Skip to content

Instantly share code, notes, and snippets.

@Andrious
Last active December 3, 2019 01:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Andrious/8fca44c767e8243006c21e64c562ee88 to your computer and use it in GitHub Desktop.
Save Andrious/8fca44c767e8243006c21e64c562ee88 to your computer and use it in GitHub Desktop.
A demonstration of the types of GridViews used.
//
// https://fluttercentral.com/Articles/Post/45
//
// Author: Seven Srikanth
//
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());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment