Flutter: ListView & GridView
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
List
The 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:
1. Grid List
2. Horizontal List
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.
ListView constructor has ListTile widget
ListTile: A list tile contains one to three lines of text optionally flanked by icons or other widgets, such as checkboxes. The icons [or other widgets] for the tile are defined with the leading and trailing parameters.
Here in LIstTile two very important widgets are leading and trailing
leading: This widget is used to show something like an icon or logo or image in the left most of the list.
trailing: This widget is used to show items like icon, image or logo right most of the 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: It can be horizontal as well as vertical according to your need
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 List
An 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: GridView is a scrollable 2D array of widgets. The most frequently used grid layout is GridView.count
GridView.count
GridView.count[It creates a 2D scrollable widget with the flexible number of tiles in the cross axis.
],
crossAxisCount
It 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.generate
It 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,
],
];
}],
],
]
],
],
],
],
],
],
];
}
}
GoodBye
Thanks 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 :
//about.me/nmaurya
Follow FlutterFly :
LinkedIn : //www.linkedin.com/in/flutterfly-5726b6189/
LinkedIn Group : //www.linkedin.com/groups/10482289/
Facebook : //www.facebook.com/flutterflytech/
Twitter : //twitter.com/flutterflytech
GitHub : //github.com/flutterflytech
Medium : //medium.com/flutterfly-tech
Reddit : //www.reddit.com/user/flutterflytech/
Introduction to Flutter, getting started with MaterialApp, Scaffold
If you are new in development or experienced and want to learn something exciting or get bored in working with your
medium.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 the
medium.com