In the last blog, we have learned how to create a widget and I think you guys must have understood it pretty well. In case you have missed the previous blog, then I suggest you read that first and then continue with this blog. The link to the Widget blog is here.
Let’s get started with the List in Flutter
Just as we use Recyclerview in Native Android to display the lists, In the flutter as we know everything is Widget. We can use the ListView widget to display the lists. It is a scrolling widget which displays its children one after another.
There are four options to create a ListView
- List<Widget>
- ListView.builder
- ListView.separated
- ListView.custom
Let us discuss the ListView.separated type to create a list view.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ListView.separated( separatorBuilder: (context, index) => Divider( height: 1, color: Colors.grey, ), scrollDirection: Axis.vertical, shrinkWrap: true, itemCount: model.list.length, itemBuilder: (context, position) { return _listLayout(model.list[position]); }, ), |
As we can see in the above code segment. We have created ListView.separated widget and also assigned a few of its attributes.
separatorBuilder creates a divider line between each item of the list.
scrollDirection will decide the direction of the list.
shrinkWrap will make the ListView only occupies the space it needs.
itemCount gives the count of the item.
itemBuilder draws each item in the list and takes item layout input which is _listLayout in this example.
Let us see whats inside the _listLayout widget
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
Widget _productListLayout(EachProduct eachProduct) { return GestureDetector( child: Container( height: 140, color: MobikulTheme.backgroundColor, padding: EdgeInsets.fromLTRB(spacing_normal, 0.0, spacing_normal, 0.0), child: Row( children: <Widget>[ CachedNetworkImage( fit: BoxFit.fill, imageUrl: eachProduct.thumbNail, placeholder: (context, url) => Image(image: AssetImage('assets/images/placeholder.png')), ), Expanded( child: Container( padding: EdgeInsets.all(spacing_normal), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text(eachProduct.name, overflow: TextOverflow.ellipsis, maxLines: 1, style: TextStyle( fontSize: text_size_large, color: MobikulTheme.textColorSecondary, fontWeight: FontWeight.bold)), SizedBox( width: spacing_small, ), Text(eachProduct.sku, overflow: TextOverflow.ellipsis, maxLines: 1, style: TextStyle( fontSize: text_size_medium, color: MobikulTheme.textColorSecondary, )), ], ), ), ), ], ), ), onTap: () {}, ); } |
this is just a widget which uses a few other widgets to create a layout which is used as the item layout.
That’s all for this blog. Thank you very much. This is Vedesh Kumar signing off.