How to use future builder in slivers in flutter-CodePudding

I want to display data from the api in the slivers using future builder with grid layouts. I tried but i could not do that. Here is the code

 slivers: [
 SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.teal[100 * (index % 9)],
                  child: Text('grid item $index'),
                );
              },
              childCount: 10,
            ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 15,
              crossAxisSpacing: 15,
              childAspectRatio: 2.0,
            ),
          )
        ],

I tried this way. but child count is the problem

  SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return FutureBuilder(
                  future: getProducts(),
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    return Container(
                      child: Text(
                        'Hello',
                      ),
                    );
                  },
                );
              },
              childCount: 10,
            ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 15,
              crossAxisSpacing: 15,
              childAspectRatio: 2.0,
            ),
          )

CodePudding user response：

get that future and build the delegate inside your FutureBuilder

FutureBuilder(
       future:YourApi(),
       builder:(_,snap){
         if(snap.hasData){
         //get your data , if its json, decode and make it into a class
         List<T> data = snap.data .......
         return ....(
           slivers:[
            SliverGrid(
              ......
              ,childCount: data.lenght
            )
          ]
        )
      } else {}
     }
    )

CodePudding user response：

You can directly use FutureBuilder inside slivers. just make sure the return widget is needed to be a sliver widget on every case.

body: CustomScrollView(
  slivers: [
    FutureBuilder<List<int>>(
      /// create a future variable on state class
      future: Future.delayed(Duration(seconds: 2))
          .then((value) => List.generate(11, (i) => i)),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return SliverGrid(
              delegate: SliverChildBuilderDelegate(
                childCount: snapshot.data?.length,
                (context, index) => Container(
                  child: Text("${snapshot.data?[index]}"),
                ),
              ),
              gridDelegate:
                  const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2));
        }
        return const SliverToBoxAdapter(
          child: CircularProgressIndicator(),
        );
      },
    )
  ],
),