Posted in Dart Flutter

Flutter – How to insert children into Grid View from model List

Flutter – How to insert children into Grid View from model List Posted on May 24, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

In this example, I’m going to show you how to make a model class, and make a list of model data and populate them into Grid View. This is a simple example to clear the method to insert data into Grid View. You can make a list from JSON string as well using Model class. I have commented the code to convert JSON string to model data.

gridview children

See the example below to learn how to insert children inside Grid View from a list of model data. Please read the comments in the code for better understandings.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

//apply this class to home: attribute of MaterialApp()
class MyGridView extends StatefulWidget{
  @override
  _MyGridViewState createState(){
    return _MyGridViewState();
  } 
}

class _MyGridViewState extends State<MyGridView> {
  List<PeopleOne> peoplelist; //list array variable for peoples

  @override
  void initState() {

    peoplelist = [ 
        PeopleOne(id:"1", name:"Poonam", address:"Kathmandu, Nepal"),
        PeopleOne(id:"2", name:"Krishna", address:"Lumbini, Nepal"),
        PeopleOne(id:"3", name:"Anil", address:"Chaumala, Nepal"),
        PeopleOne(id:"4", name:"Arjun", address:"Kailali, Nepal"),
        PeopleOne(id:"5", name:"Karan", address:"Dhangadhu, Nepal"),
        PeopleOne(id:"6", name:"Saroj", address:"Pokhara, Nepal"),
    ];  //list of peoples using PeopleOne model class, you can convert from JSON too

    //OR to convert from JSON

   /*
    peoplelist = List<PeopleOne>.from(
      jsonstring.map((dataone){
          return PeopleOne.fromJSON(dataone); 
          //return of factory of PeopleOne
      })
    ); 
   */

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
      return Scaffold( 
        appBar: AppBar(
          title:Text("GridView People List"),
          backgroundColor: Colors.redAccent
        ),

        body:GridView.count( //use GridView.count for independent to silver layout
            crossAxisCount: 2, //
            //scrollDirection: Axis.horizontal, //set this for horizontal scroll direction
            shrinkWrap: true,
            children: peoplelist.map((people){ //user peoplelist.map to loop over the list
                return Card( 
                  elevation: 10, //shadow elevation for card
                  margin: EdgeInsets.all(8),
                  child:Container(
                      color: Colors.orange[100],
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center, //main axix alignemnt to center
                        children: <Widget>[
                         Text(people.name, style: TextStyle(fontSize:20)),
                         Text(people.address, style: TextStyle(fontSize:13)),

                         Container( 
                           margin: EdgeInsets.only(top:20),
                           child:RaisedButton.icon(
                              onPressed: (){ 
                                  print('Clicked on view details: ' + people.id);
                                  //add more action for this button
                                  //Navigator.push() to show details in new page
                              }, 
                              icon: Icon(Icons.person), 
                              label: Text("View Details"),
                              color: Colors.redAccent,
                              colorBrightness: Brightness.dark,
                               //color brightness is dark becaause its background is dark color
                            )
                         ),

                         Container( 
                           margin: EdgeInsets.only(top:0),
                           child:RaisedButton.icon(
                              onPressed: (){ 
                                  print('Clicked on send email: ' + people.id);
                                  //add more action for this button
                                  //Navigator.push() to show details in new page
                              }, 
                              icon: Icon(Icons.mail), 
                              label: Text("Send Email"),
                              color: Colors.blueAccent,
                              colorBrightness: Brightness.dark,
                               //color brightness is dark becaause its background is dark color
                            )
                         )
                      ],) 
                    )
                );
            }).toList(), //don't forget to to add .toList() at last of map
          )
      );
  }
}

//model class for people information
class PeopleOne{
   String id, name, address;
   PeopleOne({this.id, this.name, this.address});
   //constructure for class

   /* factory to convert json string to model data
   factory PeopleOne.fromJSON(Map<String, dynamic> json){
     return PeopleOne(
       id: json["id"],
       name: json["name"],
       address: json["address"]
     );
   } */ 
}

In this way you can create your Grid View with list of data models.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

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