Flutter GridView with Builder Constructor
Last updated Nov 07, 2021In 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.
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
Flutter Multi selection GridView Example
Article Contributed By :
|
|
|
|
4156 Views |