gridview builder with random width of its items in flutter - flutter

Question

i need to show something like this
can some one help on this?
I can able to achieve following out put
i am using following code ::
GridView.builder(
scrollDirection: Axis.vertical,
physics: ScrollPhysics(),
shrinkWrap: true,
itemCount: 6,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 4),),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
child: Container(
padding: EdgeInsets.all(0.0),
margin: EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0xFF282f61),width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(
14.0) // <--- border radius here
),
),
child: Center(
child: Text(
'Avg-project',
style: TextStyle(
color: Color(0xFF17b01b),
fontSize: 14.0,
),
),
),
),
onTap: () {},
);
},
))
how can i achieve gridview with random width in flutter?

Answer 1

gridview is not support random width so instead of gridview you can use wrap widget to achieve your desired output.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: BackAppBar("Notifications", context),
body: Wrap(
children: [
"Help Moviing",
"Furniture Assembly",
"Mounting",
"Home Repairs",
"Personal Assistant",
"Delivery",
"Hard Work",
"Practice & Unpacking",
"Painting",
"Cleaning",
"Heavy Liffing"
].map((f) => GestureDetector(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
margin: EdgeInsets.only(
left: 5.0, right: 5.0, top: 10.0, bottom: 10.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0xFF282f61), width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(
10.0) // <--- border radius here
),
),
child: Text(f,
style: TextStyle(
color: Color(0xFF17b01b),
fontSize: 16.0,
),
),
),
onTap: () {},
))
.toList(),
),
);
}