Flutter GridView with Builder Constructor

Last updated Nov 07, 2021

In previous post we discussed about arrange list data in GridView with GridView.Count() and GridView() default contrucotrs.
 
 In this post we will learn how to arrange the list data in GridView with GridView.builder() contructor.

Click here to check previous post
 
 Create a Grid with large number of tiles then we can use GridView.builder() contructor.
 We need to pass SliverGridDelegateWithFixedCrossAxisCount/SliverGridDelegateWithMaxCrossAxisExtent as gridDelegate 
 If we not pass grideDeleget it won't work.

Flutter GridView Constructor example


 Check .dart file

import 'package:flutter/material.dart';

class GridWithBuilder extends StatefulWidget{
  @override
  State createState() {
    // TODO: implement createState
    return GridState();
  }


}

class GridState extends State{
  ListlistData=new List();
  Widget prepareList(int k)
  {
    return Card(
      child: Hero(
        tag: "text$k",
        child: Material(
          child: InkWell(
            onTap: (){},
            child: Wrap(
              children: [
                Column(
                  children: [
                    Image.asset("img/"+corcessImg[k]),
                    Text(corcess[k]),
                  ],
                )
              ],


            ),
          ),
        ),
      ),
    );
  }
  Listcorcess=new List();
  ListcorcessImg=new List();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    corcess.add("Swift");
    corcess.add("Angular");
    corcess.add("BootStrap");
    corcess.add("CSS");
    corcess.add("Eclipse");
    corcess.add("Fullstack Web");
    corcess.add("JQuery");
    corcess.add(".Net");
    corcess.add("ADO .Net");
    corcess.add("Phython");
    corcess.add("Salesforece");
    corcess.add("SpringBoot");
    corcess.add("Tableu");
    corcess.add("Docker");


    corcessImg.add("course_swift.png");
    corcessImg.add("course_angular.png");
    corcessImg.add("course_bootstrap.png");
    corcessImg.add("course_css.png");
    corcessImg.add("course_eclipse.png");
    corcessImg.add("course_fullstack_web.png");
    corcessImg.add("course_jquery.png");
    corcessImg.add("course_.net.png");
    corcessImg.add("course_ado.net.png");
    corcessImg.add("course_phython.png");
    corcessImg.add("course_saleforce.png");
    corcessImg.add("course_springboot.png");
    corcessImg.add("course_tabeau.png");
    corcessImg.add("course_docker.png");

  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.black26,padding: EdgeInsets.all(2),
      child: GridView.builder(itemBuilder: (ctx,index){
        return prepareList(index);
      },
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount
(crossAxisCount: 3,childAspectRatio: 1.0/1.20),
        itemCount: corcess.length,
      ),
    );
  }

}

Click here to check previous post

Check complete code at Github

Flutter Multi selection GridView Example Flutter Multi selection GridView Example

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

3730 Views