Flutter how to show array data in gridview? - flutter

Question

I have a simple gridview and static which is working fine now i need to show data from array. I need to know how can i do this. By for loop i think it will not good but i am not sure the other way ?
My code
Container(
color: Color(0xffECF0F1),
child: GridView(
padding: EdgeInsets.all(0),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 1,
mainAxisSpacing: 1,
crossAxisCount: 4,
),
children: <Widget>[
],
),
),
In children i have data like this now
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => BookService1()),
);
},
child: Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: Height * 0.04,
child: Image.asset('images/cat1.png'),
),
SizedBox(
height: Height * 0.008,
),
Text(
'Computer Hardware',
style: TextStyle(
fontFamily: 'UbuntuMedium',
fontSize: 10,
),
textAlign: TextAlign.center,
)
],
),
),
),
Now i need to show data from array not static my array look like this
[
{
"Name": "Computer Software",
"Image": "https://cdn.zeplin.io/5fa90ed1e66d311f086e0115/assets/75b908a5-60c0-4e9a-84a4-ae3ca65c6973.png"
},
{
"Name": "Computer Hardware",
"Image": "https://cdn.zeplin.io/5fa90ed1e66d311f086e0115/assets/75b908a5-60c0-4e9a-84a4-ae3ca65c6973.png"
}
]

Answer 1

You can use the GridView.builder widget
GridView.builder(
itemCount: myArray.length, // The length Of the array
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.6,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
), // The size of the grid box
itemBuilder: (context, index) => Container(
child: Text(myArray[index].text),
),
);

Answer 2

I have edited your code so you can try like as this code.
GridView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
//scrollDirection: Axis.vertical,
itemCount:myArray.length, // Your array item length.
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 1,
mainAxisSpacing: 1,
crossAxisCount: 4,
),
itemBuilder: (context, index) {
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => BookService1()),
);
},
child: Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: Height * 0.04,
child: Image.asset('images/cat1.png'),
),
SizedBox(
height: Height * 0.008,
),
Text(
myArray[index].name, // You can use like as
style: TextStyle(
fontFamily: 'UbuntuMedium',
fontSize: 10,
),
textAlign: TextAlign.center,
)
],
),
),
);
}),
I hope you are understand, So please let me know it's working or not.

Answer 3

Both above answers are correct but for clean code or the better way you can create a widget in which you can your data and show. So the benefit will be you can call that widget again so you can save code and also better structure.
Widget category:
import 'package:flutter/material.dart';
class CategoryBox extends StatefulWidget {
const CategoryBox({Key key, #required this.data}) : super(key: key);
final data;
#override
_CategoryBoxState createState() => _CategoryBoxState();
}
class _CategoryBoxState extends State<CategoryBox> {
#override
Widget build(BuildContext context) {
print(widget.data);
double statusBarHeight = MediaQuery.of(context).padding.top;
double Height = MediaQuery.of(context).size.height;
double Width = MediaQuery.of(context).size.width;
return GestureDetector(
onTap: () {
},
child: Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: Height * 0.04,
child: Image.network(widget.data['Image']),
),
SizedBox(
height: Height * 0.008,
),
Text(
widget.data['Name'],
style: TextStyle(
fontFamily: 'UbuntuMedium',
fontSize: 10,
),
textAlign: TextAlign.center,
)
],
),
),
);
}
}
your grid code
Container(
color: Color(0xffECF0F1),
child: GridView.builder(
itemCount: globalService
.globalServiceArray.length, // The length Of the array
padding: EdgeInsets.all(0),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 1,
mainAxisSpacing: 1,
crossAxisCount: 4,
),
itemBuilder: (context, index) => Container(
child: CategoryBox(data: globalService.globalServiceArray[index]),
),
),
),
change your array I have just given name. Both above answer is correct also if you are using the widget multiple times so I think this way will be good. Happy Coding :)