In Flutter GridView widget has a property named as crossAxisCount which is used to decide number of columns in a GridView in a single row. App developer can manage how much columns he wants to display in a single row. As we all know by default in ListView there is only one column in one row so using the State we can easily mange to update the crossAxisCount value. So in this tutorial we would Flutter Change ListView to GridView on Button Click Dynamically in Android iOS Example Tutorial.
Contents in this project Flutter Change ListView to GridView on Button Click Dynamically Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget. In this class we would call our main sub-root child GridWidget class in body area.
|
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: SafeArea(child: Center( child: GridWidget() ) )) ); } } |
4. Create a class named as GridWidget extends StatefulWidget. In this class we would make createState() method of State and pass GridViewState class along with it to enable State management in it.
|
1 2 3 4 5 |
class GridWidget extends StatefulWidget { GridViewState createState() => GridViewState(); } |
5. Create our main child class named as GridViewState extends State. This is our main class in which we would make the GridView widget.
|
1 2 3 4 |
class GridViewState extends State { } |
6. Create 3 num variable named as countValue, aspectWidth and aspectHeight.
- countValue : value is used as crossAxisCount value to manage how much columns developer wants to show in a single row.
- aspectWidth : Used in childAspectRatio property.
- aspectHeight : Used in childAspectRatio property.
|
1 2 3 4 5 |
num countValue = 2 ; num aspectWidth = 2 ; num aspectHeight = 1 ; |
7. Create a String type of List named as gridItems. Here we would pas 20 items and this all would be GridView items.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
List<String> gridItems = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen', 'Twenty' ]; |
8. Create a function named as changeMode(). In this function we would Toggle the countValue, aspectWidth and aspectHeight values. Using this function we would make the GridView to ListView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
changeMode(){ if(countValue == 2){ setState(() { countValue = 1 ; aspectWidth = 3 ; aspectHeight = 1 ; });} else{ setState(() { countValue = 2 ; aspectWidth = 2 ; aspectHeight = 1 ; }); } } |
9. Create a function named as getGridViewSelectedItem(). In this function we would print the Selected GridView item on screen using Alert.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
getGridViewSelectedItem(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(); }, ), ], ); }, ); } |
10. Create Widget Build area in GridViewState class. Now we would make a Column widget and put Expanded widget inside it. We would set the GridView.count() widget as Expanded widget child so they can expand on screen fully. Now we would make Raised Button.
|
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 |
Widget build(BuildContext context) { return Scaffold( body: Column( children: [ Expanded( child: GridView.count( crossAxisCount: countValue, childAspectRatio: (aspectWidth / aspectHeight), children: gridItems.map((data) => GestureDetector( onTap: (){getGridViewSelectedItem(context, data);}, child: Container( margin:EdgeInsets.symmetric(vertical: 5, horizontal: 5), color: Colors.lightBlueAccent, child: Center( child: Text(data, style: TextStyle(fontSize: 22, color: Colors.white), textAlign: TextAlign.center) ))) ).toList(), ),), Container( margin: const EdgeInsets.fromLTRB(10, 10, 10, 10), child: RaisedButton( onPressed: () => changeMode(), child: Text(' Change GridView Mode To ListView '), textColor: Colors.white, color: Colors.red, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ) ])); } |
11. 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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea(child: Center( child: GridWidget() ) )) ); } } class GridWidget extends StatefulWidget { GridViewState createState() => GridViewState(); } class GridViewState extends State { num countValue = 2 ; num aspectWidth = 2 ; num aspectHeight = 1 ; List<String> gridItems = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen', 'Twenty' ]; changeMode(){ if(countValue == 2){ setState(() { countValue = 1 ; aspectWidth = 3 ; aspectHeight = 1 ; });} else{ setState(() { countValue = 2 ; aspectWidth = 2 ; aspectHeight = 1 ; }); } } getGridViewSelectedItem(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: Column( children: [ Expanded( child: GridView.count( crossAxisCount: countValue, childAspectRatio: (aspectWidth / aspectHeight), children: gridItems.map((data) => GestureDetector( onTap: (){getGridViewSelectedItem(context, data);}, child: Container( margin:EdgeInsets.symmetric(vertical: 5, horizontal: 5), color: Colors.lightBlueAccent, child: Center( child: Text(data, style: TextStyle(fontSize: 22, color: Colors.white), textAlign: TextAlign.center) ))) ).toList(), ),), Container( margin: const EdgeInsets.fromLTRB(10, 10, 10, 10), child: RaisedButton( onPressed: () => changeMode(), child: Text(' Change GridView Mode To ListView '), textColor: Colors.white, color: Colors.red, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ) ])); } } |
Screenshots:
