Images dose not display on the screen instead it shows loading icon - flutter

Question

I used a grid view list in order to show some items in another list that contain images
and doesn't show the items, instead it shows the loading icon
this is my code:
import 'package:flutter/material.dart';
import 'package:sct/list/list.dart';
class badriya2 extends StatefulWidget {
#override
State<badriya2> createState() => _badriya2State();
}
class _badriya2State extends State<badriya2> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"She codes",
),
),
body: FutureBuilder(builder: (context, AsyncSnapshot snapshot) {
height:
MediaQuery.of(context).size.height;
width:
MediaQuery.of(context).size.width;
if (snapshot.hasData) {
List resList = snapshot.data;
child:
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
),
itemCount: resList.length,
itemBuilder: (context, index) {
primary:
true;
padding:
const EdgeInsets.all(20);
shrinkWrap:
true;
children:
<Widget>[
Card(
child: Center(
child: CircleAvatar(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
list[0].image,
),
),
minRadius: 50,
maxRadius: 75,
),
),
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
];
return Center(child: CircularProgressIndicator());
}));
}
return Center(child: CircularProgressIndicator());
}));
}
}
and this is the list :
import 'package:flutter/cupertino.dart';
List list = [
{
Image.asset('assets/images/butterfly.jpg'),
},
{
Image.asset('assets/images/flower.jpg'),
},
{
Image.asset('assets/images/glass.jpg'),
},
{
Image.asset('assets/images/sun.jpg'),
},
{
Image.asset('assets/images/lighting.jpg'),
},
{
Image.asset('assets/images/phone.jpg'),
},
{
Image.asset('assets/images/eye.jpg'),
},
{
Image.asset('assets/images/photo1.jpg'),
},
];
the point of this code is not to duplicate the items in grid view, I want to write in one line

Answer 1

Add future method onfuture inside FutureBuilder.
return FutureBuilder(
future: yourFutureMethod(),
builder: (context, snapshot) {...},
);

Answer 2

You use the Future Builder but you didn't mention any future. Set the Future
import 'package:flutter/material.dart';
import 'package:sct/list/list.dart';
class badriya2 extends StatefulWidget {
#override
State<badriya2> createState() => _badriya2State();
}
class _badriya2State extends State<badriya2> {
var dummy;
#override
void initState() {
super.initState();
dummy = _getimages();
print("data ${dummy}");
}
_getimages() async {
var imagelist = await list;
print(imagelist);
return imagelist;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"She codes",
),
),
body: FutureBuilder(
future: _getimages(),
builder: (context, AsyncSnapshot snapshot) {
if(snapshot.hasError) print(snapshot.error);
return snapshot.hasData
?GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
),
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
List reslist = snapshot.data;
return Column(
children: [
Card(
child: Center(
child: Container(
width: 100,
height: 100,
child: CircleAvatar(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(reslist[index].toString(),)
),
minRadius: 50,
maxRadius: 75,
),
),
),
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
],
);
}
):
Center(
child:CircularProgressIndicator()
);
}
)
);
}
}
And please assign proper list of data
import 'package:flutter/cupertino.dart';
List list= [
"https://dlanzer.com/flutter_api/assets/uploads/images/farm_2021-10-25%2005:09:48am.png",
"https://dlanzer.com/flutter_api/assets/uploads/images/farm_2021-10-25%2005:09:11am.png",
"https://dlanzer.com/flutter_api/assets/uploads/images/farm_2021-10-19%2002:51:18pm.png",
"https://dlanzer.com/flutter_api/assets/uploads/images/farm_2021_10_12_04_30_13_pm.png",
];
Here I use network images You change to asset images