Flutter Create Simple Custom GridView Layout Android iOS Example Tutorial

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.

2. Create void main runApp() method and call our main MyApp class here.

3. Create our main Root class named as MyApp and we would call here GridViewWidget() class.

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.

5. Create our main children class named as GridViewState extends State. In this class we would create the GridView List.

6. Create a String List named as items with 20 String items. We would use these items to create Grid List.

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.

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.

9. Complete source code for main.dart file:

Screenshots:

Flutter Create Simple Custom GridView Layout Android iOS Example Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *