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

This Article is posted by seven.srikanth 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.
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.
##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.



Recent Articles


How to deploy flutter web site on GitHub using peanut

Posted by nikhilchaudhary12155 on 13 Oct 2019 Article


AnimatedPositioned Widget Example in Flutter

Posted by seven.srikanth on 10 Oct 2019 Article


Flutter Open-Source and directory lists

Posted by nishantkotatech on 09 Oct 2019 Article


Flutter Travelling Couple Leading Page - Flutter Web Series 3

Posted by nikhilchaudhary12155 on 05 Oct 2019 Article



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