Play Flutter Quiz. Click here .

GridView Widget - Grid layouts Implementation - GirdView, GridView.count, GridView.builder, GridView.custom, GridView.extent

This Article is posted by seven.srikanth@gmail.com at 02-10-2018 11:30:09



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.
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.
##FlutterCentralAds##
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.
##FlutterCentralAds##
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());
}
##FlutterCentralAds##
Let me know your queries through comments.
Thanks,
Srikanth

Tags: GridView Widget - Grid layouts Implementation - GirdView, GridView.count, GridView.builder, GridView.custom, GridView.extent ; How to implement GridView in Flutter? GridView Widget; GridView with Images;




0 Comments
Login to comment.

Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.







© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com

Terms | Privacy