Flutter comes with GridView.count() widget to create simple Grid List layout for both Android and iOS devices. GridView is a type of layout in which the items will display in Grid form one after another. App developer can define how much grid he can want in a single row using crossAxisCount property of GridView.count() widget. So in this tutorial we would Flutter Create Simple Custom GridView Layout Android iOS Example Tutorial.
Contents in this project Flutter Create Simple Custom GridView Layout Android iOS Example Tutorial:
1. Import material.dart package in your project’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp class here.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main Root class named as MyApp and we would call here GridViewWidget() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: GridViewWidget() ) ) ); } } |
4. Create a class named as GridViewWidget extends StatefulWidget. In this class we would createState() method and pass the GridViewState class along with it. This method would enable the mutable state in given class.
|
1 2 3 4 5 |
class GridViewWidget extends StatefulWidget { GridViewState createState() => GridViewState(); } |
5. Create our main children class named as GridViewState extends State. In this class we would create the GridView List.
|
1 2 3 4 |
class GridViewState extends State { } |
6. Create a String List named as items with 20 String items. We would use these items to create Grid List.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
List<String> items = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen', 'Twenty' ]; |
7. Create a function named as getGridViewItems() with Build Context and String argument. In this function we would display the Grid View List selected item using Alert dialog box.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
getGridViewItems(BuildContext context, String gridItem){ showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: new Text(gridItem), actions: <Widget>[ FlatButton( child: new Text("OK"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); } |
8. Create GridView.count() widget with items String List in Widget Build area of GridViewState class.
- crossAxisCount : Used to make how much horizontal grid items can a single row contain.
- childAspectRatio : Used to set Height of Grid Item according to Screen Aspect ratio. The ratio of the cross-axis to the main-axis extent of each child grid element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Widget build(BuildContext context) { return Scaffold( body: GridView.count( crossAxisCount: 2, childAspectRatio: (2 / 1), children: items.map((data) => GestureDetector( onTap: (){getGridViewItems(context, data);}, child: Container( margin:EdgeInsets.symmetric(vertical: 5, horizontal: 5), color: Colors.green, child: Center( child: Text(data, style: TextStyle(fontSize: 22, color: Colors.white), textAlign: TextAlign.center) ))) ).toList(), ), ); } |
9. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: GridViewWidget() ) ) ); } } class GridViewWidget extends StatefulWidget { GridViewState createState() => GridViewState(); } class GridViewState extends State { List<String> items = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen', 'Twenty' ]; getGridViewItems(BuildContext context, String gridItem){ showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: new Text(gridItem), actions: <Widget>[ FlatButton( child: new Text("OK"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); } @override Widget build(BuildContext context) { return Scaffold( body: GridView.count( crossAxisCount: 2, childAspectRatio: (2 / 1), children: items.map((data) => GestureDetector( onTap: (){getGridViewItems(context, data);}, child: Container( margin:EdgeInsets.symmetric(vertical: 5, horizontal: 5), color: Colors.green, child: Center( child: Text(data, style: TextStyle(fontSize: 22, color: Colors.white), textAlign: TextAlign.center) ))) ).toList(), ), ); } } |
Screenshots:
