Flutter list count
Flutter: ListView & GridViewNeeraj Follow Feb 28, 2020 · 5 min read While working with Flutter I needed to create a list in my user interface and I found some wonderful list widget which I will be demonstrating here in this blog. So let's get started Show
ListThe list is basically an arrangement of items in such a way that they look organized and easily accessible. The flutter list is more than just a normal list. Here are some types of lists available in flutter: Mobile applications fundamental display pattern is showing data in the form of a list. We can use a standard ListView constructor to achieve this goal for a fewer item containing list. children: ListTile( leading: FlutterLogo(), trailing: Icon(Icons.more_vert), title: Text('One-line with leading & trailing widget'), ) ], ) Horizontal & Vertical List If you want a list which is scrollable left to right i.e horizontally, you just need to add scrollDirection: Axis.horizontal in your code. scrollDirection: Axis.horizontal, children: Container( width: 100, color: Colors.grey, ), Container( width: 200, color: Colors.blueGrey, ), Container( width: 200, color: Colors.green, ), Container( width: 200, color: Colors.grey, ) ], ) We can set scrollDirection as vertical also to enable vertical scrolling on the list, you just need to put below-given code into your ListView widget Grid ListAn alternative to the normal List is Grid List. If you want to show items in a list as a grid that comes one after another below as well as side by side, GridView is the widget for you. Let's see how it works GridView.countGridView.count( ), crossAxisCountIt gives you the flexibility to show the number of grids in the cross axis of your view. The below-given snippet will allow showing 2 grid side by side on the body area. crossAxisCount: 2List.generateIt gives you the power of replication of the same grid to a number of times you want to generate it. Example GridView.count(crossAxisCount: 2 , children: List.generate(50,(index){ return Container( child: Card( color: Colors.blue, ), ); }), ) In the given example and previously explained points, one can easily relate and understand the purpose of all widgets and implementation. Sample Code and Output: void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: SingleChildScrollView( child: Container( child: Column( children: Container( height: 200, child: ListView( scrollDirection: Axis.horizontal, children: Container( width: 200, color: Colors.grey, ), Container( width: 200, color: Colors.blueGrey, ), Container( width: 200, color: Colors.green, ), Container( width: 200, color: Colors.grey, ) ], ), ), Container( height: 200, child: ListView( shrinkWrap: true, scrollDirection: Axis.vertical, children: Container( width: 50, height: 100, color: Colors.yellowAccent, ), Container( width: 50, height: 100, color: Colors.blue, ), Container( width: 50, height: 100, color: Colors.green, ), Container( width: 50, height: 100, color: Colors.red, ),Container( width: 50, height: 100, color: Colors.yellowAccent, ), Container( width: 50, height: 100, color: Colors.blue, ), Container( width: 50, height: 100, color: Colors.green, ), Container( width: 50, height: 100, color: Colors.red, ) ], ), ), Container( height: 200, child: GridView.count( scrollDirection: Axis.horizontal, crossAxisCount: 2 , children: List.generate(50,(index){ return Container( child: Card( color: Colors.amber, ), ); }), ), ) ], ), ), ), ), ), ); } } GoodByeThanks for reading. If you found this article to be helpful please share it with your friends. For more about flutter, follow me, so youll get notified when I write new posts. To know more about me, visit :https://about.me/nmaurya Follow FlutterFly :LinkedIn : https://www.linkedin.com/in/flutterfly-5726b6189/ LinkedIn Group : https://www.linkedin.com/groups/10482289/ Facebook : https://www.facebook.com/flutterflytech/ Twitter : https://twitter.com/flutterflytech GitHub : https://github.com/flutterflytech Medium : https://medium.com/flutterfly-tech Reddit : https://www.reddit.com/user/flutterflytech/ Introduction to Flutter, getting started with MaterialApp, ScaffoldIf you are new in development or experienced and want to learn something exciting or get bored in working with yourmedium.com ScopedModel | Score Counter App using ScopedModel way of state management in the flutter.State Management in flutter is a very hot topic and we have various way to manage the state according to themedium.com |