How to implement scrollable FutureBuilder Flutter-CodePudding

How do i implement a scrollable futurebuilder?

I have this snippet. but rather than make it scroll up, it just does not scroll at all.

The snippet looks like this :

    Center(
        child: FutureBuilder<List<TransactionDetails>>(
            future: fetchAlbum(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                    shrinkWrap: true,
                    itemCount: snapshot.data!.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        leading: CircleAvatar(
                          child: Image.network(
                              snapshot.data![index].avatar.toString()),
                        ),
                        title:
                            Text(snapshot.data![index].name.toString()),
                        trailing: Text(
                            snapshot.data![index].amount.toString()),
                        subtitle: Text(
                          snapshot.data![index].date.toString(),
                          style: TextStyle(fontSize: 9),
                        ),
                      );
                    });
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return const CircularProgressIndicator();
            }))

How do I get it to do something like that scroll? Please I need some help here.

CodePudding user response：

I assume you have enough data to scroll the view. in case you don't have enough data to scroll and want the scroll UX. i'll suggest you add the scroll physics to list view.

ListView.builder(
        physics: const AlwaysScrollableScrollPhysics(),
        shrinkWrap: true,
)

CodePudding user response：

You can try wrapping the FutureBuilder() with a Column() because of your ListView.builder and then wrap the Column with a SingleChildScrollView(). The Column widget always tries to expand as big as it can, so you wrap it with a SingleChildScrollView to make it scrollable. The ListView.builder is already a scrollable by it self, but since you need to scroll the whole FutureBuilder you can do it this way. If you want to disable the list view inside the ListView.builder, you can use physics: NeverScrollableScrollPhysics().

SingleChildScrollView(
child: Column(children:[
 Center(
        child: FutureBuilder<List<TransactionDetails>>(
            future: fetchAlbum(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                    shrinkWrap: true,
                    itemCount: snapshot.data!.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        leading: CircleAvatar(
                          child: Image.network(
                              snapshot.data![index].avatar.toString()),
                        ),
                        title:
                            Text(snapshot.data![index].name.toString()),
                        trailing: Text(
                            snapshot.data![index].amount.toString()),
                        subtitle: Text(
                          snapshot.data![index].date.toString(),
                          style: TextStyle(fontSize: 9),
                        ),
                      );
                    });
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return const CircularProgressIndicator();
            }))

]),
),