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

CodePudding user response：

Add future method onfuture inside FutureBuilder.

 return FutureBuilder(
      future: yourFutureMethod(),
      builder: (context, snapshot) {...},
    );

CodePudding user response：

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 05:09:48am.png",
  
  
    "https://dlanzer.com/flutter_api/assets/uploads/images/farm_2021-10-25 05:09:11am.png",
  
  
    "https://dlanzer.com/flutter_api/assets/uploads/images/farm_2021-10-19 02: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