Filter by Widgets


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
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

Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Check out this article on Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Read full post

How to create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

ListView with Images from the Internet

Check out this article on ListView with Images from the Internet

Read full post

How to show Tooltip in Flutter?

Check out this article on How to show Tooltip in Flutter?

Read full post

How to create BottomNavigationBar in flutter?

Check out this article on How to create BottomNavigationBar in flutter?

Read full post

How to add actions to Appbar?

Check out this article on How to add actions to Appbar?

Read full post

How to open dart devtools in VS code?

Check out this article on How to open dart devtools in VS code?

Read full post

Accessibility features in flutter

Check out this article on Accessibility features in flutter

Read full post

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

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.