SliverGrid not showing inside CustomScrollView in Flutter

Issue

I want to get data from REST api, using future SliverGrid should build. But it is not showing, shows just white color and also I didn’t know how to specify the total grid items count in SliverGrid. So if it shows it must generate more than the actual count.

SliverGrid(
              gridDelegate:
                  SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index)
                {
                  return FutureBuilder(
                    future: _items,
                    builder: (context, snapshot) {
                      return snapshot.connectionState == ConnectionState.done
                          ? snapshot.hasData
                              ? GridItem()
                              : Text('Retry')
                          : Text('progress');
                    },

                  );

                },

              ),)

Solution

Demo Snippet

future

  Future<List<int>> _f() async {
     return await Future.delayed(Duration(seconds: 3))
        .then((value) => [1, 3, 5, 56, 65]);
  }

and use inside CustomScrollView

        FutureBuilder<List<int>>(
            future: _f(),
            builder: (context, snapshot) => !snapshot.hasData //handle more situation here  
                ? SliverToBoxAdapter(child: Text("loading"))
                : SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                    ),
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return Text(snapshot.data![index].toString());
                      },
                      childCount: snapshot.data!.length,
                    ),
                  ),
          ),

Full Widget

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Future<List<int>> _f() async {
    return await Future.delayed(Duration(seconds: 3))
        .then((value) => [1, 3, 5, 56, 65]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [ 
          FutureBuilder<List<int>>(
            future: _f(),
            builder: (context, snapshot) => !snapshot.hasData
                ? SliverToBoxAdapter(child: Text("loading"))
                : SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                    ),
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return Text(snapshot.data![index].toString());
                      },
                      childCount: snapshot.data!.length,
                    ),
                  ),
          ),
        ],
      ),
    );
  }
}

Does it solve your question?

Answered By – Yeasin Sheikh

Answer Checked By – Terry (FlutterFixes Volunteer)