How do i load all the images of my assets/shirt in Gridview? I have 10 pictures in may assets/shirt
this is my existing code for creating a gridview
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final textTheme = Theme.of(context).textTheme;
return Scaffold(
backgroundColor: Colors.white,
body: GridView.count(
crossAxisCount: 2,
children: List.generate(1, (index) {
return new Card(
elevation: 9.0,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0)),
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/shirt/white-shirt1.jpg"),
fit: BoxFit.cover,
),
),
),
);
}),
),
);
}
pubspec.yaml
assets:
- assets/shirt/white-shirt1.jpg
- assets/shirt/yellow-shirt2.jpg
- assets/shirt/navyblue-shirt3.jpg
- assets/shirt/blue-shirt4.png
- assets/shirt/red-shirt5.jpg
- assets/shirt/brown-shirt6.jpg
- assets/shirt/maroon-shirt7.jpg
- assets/shirt/lime-shirt8.jpg
- assets/shirt/green-shirt9.jpg
- assets/shirt/gray-shirt10.png
in pub file not required a file name in the same folder you can you this
assets:
- assets/shirt/
Create a list of the paths:
final paths = [
'assets/shirt/white-shirt1.jpg',
'assets/shirt/yellow-shirt2.jpg',
'assets/shirt/navyblue-shirt3.jpg',
'assets/shirt/blue-shirt4.png',
'assets/shirt/red-shirt5.jpg',
'assets/shirt/brown-shirt6.jpg',
'assets/shirt/maroon-shirt7.jpg',
'assets/shirt/lime-shirt8.jpg',
'assets/shirt/green-shirt9.jpg',
'assets/shirt/gray-shirt10.png'
];
Now, instead of List.generate, you can simply use.map on the list.
children: paths.map((path) {
return new Card(
elevation: 9.0,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0)),
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(path), // Use the path here.
fit: BoxFit.cover,
),
),
),
);
}).toList(),
Here is the full code:
final paths = [
'assets/shirt/white-shirt1.jpg',
'assets/shirt/yellow-shirt2.jpg',
'assets/shirt/navyblue-shirt3.jpg',
'assets/shirt/blue-shirt4.png',
'assets/shirt/red-shirt5.jpg',
'assets/shirt/brown-shirt6.jpg',
'assets/shirt/maroon-shirt7.jpg',
'assets/shirt/lime-shirt8.jpg',
'assets/shirt/green-shirt9.jpg',
'assets/shirt/gray-shirt10.png'
];
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final textTheme = Theme.of(context).textTheme;
return Scaffold(
backgroundColor: Colors.white,
body: GridView.count(
crossAxisCount: 2,
children: paths.map((path) {
return new Card(
elevation: 9.0,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0)),
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(path), // Use the path here.
fit: BoxFit.cover,
),
),
),
);
}).toList(),
),
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.