In this example, I've implemented Flutter GridView Widget into a TabBar. Each tab will have different GirdView layout implementations.
Various Grid layouts are GirdView, GridView.count, GridView.builder, GridView.custom, GridView.extent.
As per Flutter documentation, the most commonly used grid layouts are GridView.count, which creates a layout with a fixed number of tiles in the cross axis, and GridView.extent, which creates a layout with tiles that have a maximum cross-axis extent. A custom SliverGridDelegate can produce an arbitrary 2D arrangement of children, including arrangements that are unaligned or overlapping.
If you are a beginner and want to try a simple example, then check this out. https://fluttercentral.com/Articles/Post/31
To create a grid with a large (or infinite) number of children, use the GridView.builder constructor with either a SliverGridDelegateWithFixedCrossAxisCount or a SliverGridDelegateWithMaxCrossAxisExtent for the gridDelegate. To use a custom SliverChildDelegate, use GridView.custom.
Here is the final output of this program.
Here is the final code from main.dart. All you need to do is, copy paste this code into your newly created flutter project and run.
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: DefaultTabController(
length: 5,
child: Scaffold(
appBar: AppBar(
title: Text('Grid Demo'),
bottom: TabBar(
tabs: [
Tab(
text: 'GridView',
),
Tab(
text: 'GridView.Count',
),
Tab(
text: 'GridView.builder',
),
Tab(
text: 'GridView.custom',
),
Tab(
text: 'GridView.extent',
),
],
isScrollable: true,
)),
body: TabBarView(children: [
GridView(
scrollDirection: Axis.vertical,
controller: ScrollController(),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0),
children: List.generate(100, (index) {
return Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: GridTile(
footer: Text(
'Item $index',
textAlign: TextAlign.center,
),
header: Text(
'SubItem $index',
textAlign: TextAlign.center,
),
child: Icon(Icons.access_alarm,
size: 40.0, color: Colors.white30),
),
),
color: Colors.blue[400],
margin: EdgeInsets.all(1.0),
);
}),
),
GridView.count(
crossAxisCount: 2,
children: List.generate(100, (index) {
return Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: GridTile(
footer: Text(
'Item $index',
textAlign: TextAlign.center,
),
header: Text(
'SubItem $index',
textAlign: TextAlign.center,
),
child: Icon(Icons.access_alarm,
size: 40.0, color: Colors.white30),
),
),
color: Colors.blue[400],
margin: EdgeInsets.all(1.0),
);
})),
GridView.builder(
itemCount: 50,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
//if (index < 50)
return Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: GridTile(
footer: Text(
'Item $index',
textAlign: TextAlign.center,
),
header: Text(
'SubItem $index',
textAlign: TextAlign.center,
),
child: Icon(Icons.access_alarm,
size: 40.0, color: Colors.white30),
),
),
color: Colors.blue[400],
margin: EdgeInsets.all(1.0),
);
},
),
GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
childrenDelegate:
SliverChildListDelegate(List.generate(100, (index) {
return Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: GridTile(
footer: Text(
'Item $index',
textAlign: TextAlign.center,
),
header: Text(
'SubItem $index',
textAlign: TextAlign.center,
),
child: Icon(Icons.access_alarm,
size: 40.0, color: Colors.white30),
),
),
color: Colors.blue[400],
margin: EdgeInsets.all(1.0),
);
}))),
GridView.extent(
maxCrossAxisExtent: 200.0,
children: List.generate(100, (index) {
return Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: GridTile(
footer: Text(
'Item $index',
textAlign: TextAlign.center,
),
header: Text(
'SubItem $index',
textAlign: TextAlign.center,
),
child: Icon(Icons.access_alarm,
size: 40.0, color: Colors.white30),
),
),
color: Colors.blue[400],
margin: EdgeInsets.all(1.0),
);
}),
)
]))),
);
}
}
void main() {
runApp(MyApp());
}
Let me know your queries through comments.
Thanks,
Srikanth
