Flutter Widget 101 Part 2 (List and Stack)

1. List

For type of list: Function (Why?)

Small List: ListView (Create all at once)

Large List: ListView.itembuilder (Create item as they are scrolled onto screen)

What is ListView.itembuilder:

• Way to make list of Widgets/Children on demand.
• Widget are not static, can be called multiple times based on itemCount and return different widget at each call.

Made up of ItemCount and ItemBuilder.

• ItemCount: decide how many times callback function of ItemBuilder is called
• Based on code below, itemBuilder would be called back 4 times (itemCount is equivalent to length of list)
• Why? to estimate maximum scroll extent
• ItemBuilder: Consist of Context and Index
• Abstract of IndexedWidgetBuilder, signature for function that create Widget for a given index.
• Index can be used to indicate location. Link to solution to position of list lost after bottom navigation. Index issue

List<String> litems = ["1","2","Third","4"];
body: new ListView.builder
(
itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int index) {
return new Text(litems[index]);
}
)

Comprehensive Explanation

Stateless Widget/Stateful Widget

• 
  

a.Data Source

final items = List<String>.generate(10000, (i) => "Item $i");

or

Create a for loop to generate 50 array by list.add() in State.

class _MyAppState extends State<MyApp> {

  List<String> items = new List();

  @override  void initState() {
    // TODO: implement initState    for(int i=0;i<50;i++){
      String inventory = "Machine Part" + i.toString();
      items.add(inventory);
    }
    super.initState();
  }

b.Convert Data source into Widget with ListView.builder().

e.g. Render String into Widget

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('${items[index]}'),
    );
  },
);

c. Add data Source via ListTile

ListTile is

a single fixed-height row that typically contains some text as well as a leading or trailing icon.

void main() => runApp(MyApp());


class MyApp extends StatefulWidget {
  @override  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  List<String> items = new List();

  @override  void initState() {
    // TODO: implement initState    for(int i=0;i<50;i++){
      String inventory = "Machine Part" + i.toString();
      items.add(inventory);
    }
    super.initState();
  }

  @override  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Playing with List",
      home: new Scaffold(
        appBar: new AppBar(title: new Text("This is an App Bar"),),
        body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
            title:new Text('${items[index]}'),
              trailing: new Icon(Icons.arrow_back),
            );
          })
        ),
      );
  }
}

$variableName (or ${expression})


String interpolation: including a variable or expression’s string equivalent inside of a string literal. For more information, see Strings.

String Interpolation


You can put the value of an expression inside a string by using ${expression}. If the expression is an identifier, you can skip the {}. To get the string corresponding to an object, Dart calls the object’s toString() method.




2.Stack



Official Doc
A widget that positions its children relative to the edges of its box. For overlapping of Children.
Children are Postioned/Non-postioned (Alignment Function)


Example:
void main() =>runApp(new MaterialApp(home: new Application()));

class Application extends StatefulWidget {
  @override  _ApplicationState createState() => _ApplicationState();
}

class _ApplicationState extends State<Application> {
  @override  Widget build(BuildContext context) {
    return Scaffold(
      body: new Stack(
        alignment: Alignment.center,
        children: <Widget>[
          //biggest object/background first>>>foreground          new Card(color: Colors.red,child: new Padding(padding: const EdgeInsets.all(170.0)),),
          new Card(color: Colors.pink,child: new Padding(padding: const EdgeInsets.all(130.0)),),
          new Card(color: Colors.orange,child: new Padding(padding: const EdgeInsets.all(80.0)),),
          new Card(color: Colors.yellow,child: new Padding(padding: const EdgeInsets.all(60.0)),),
          new Card(color: Colors.green,child: new Padding(padding: const EdgeInsets.all(30.0)),),
          new Card(color: Colors.blue,child: new Padding(padding: const EdgeInsets.all(10.0)),)
        ],
      ),
    );
  }
}


3.GridView

Official Doc


A scrollable, 2D array of widgets.

The main axis direction of a grid is the direction in which it scrolls (the scrollDirection).

Large Grid/Infinite Number: GridView.builder constructor for gridDelegate:SliverGridDelegateWithFixedCrossAxisCount,SliverGridDelegateWithMaxCrossAxisExtent





void main() =>runApp(new MaterialApp(home: new Application1()));

class Application1 extends StatefulWidget {
  @override  _Application1State createState() => _Application1State();
}

class _Application1State extends State<Application1> {

  List<int> _items = new List();

  @override  void initState(){
    for(int x=0;x<20;x++){
      _items.add(x);
    }
  }

  @override  Widget build(BuildContext context) {
    return new Scaffold(
      //what is builder?, Why itemCount?      body: new GridView.builder(
          itemCount: _items.length,
          gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
          itemBuilder: (BuildContext context, int index) {
            return new Card(
              color: Colors.pink,
              child: new Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: new Text(_items.indexOf(index).toString()),
            ),
            );
          }
    )
    );
  }
}

Advance:https://code.tutsplus.com/tutorials/google-flutter-from-scratch-grids-lists-and-data-sources--cms-31624


Flutter Links:


Flutter 101 Part 1

Flutter 101 Part 2

Flutter 101 Part 3

Flutter 101 Part 4



Flutter 101 Part 5