1

I'm creating a page which has a list of items. I want to scroll to the bottom of the page after the list has rendered. The trouble is that I am using a FutureBuilder to fetch the list. If I use WidgetsBinding.addPostFrameCallback this seems to get called before the build() method completes (maybe because it is still in the process of fetching data).

Is there a way to figure out that a Future has completed, the list has rendered and only then trigger the scroll to bottom?

@override
void initState() {

  WidgetsBinding.instance.addPostFrameCallback((_) => _postInit());

  super.initState();
}

Future<void> _postInit() async {
 _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder(
      future: _getList(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        switch(snapshot.connectionState) {
          case ConnectionState.none:
          case ConnectionState.waiting:
            return Center(child: SizedBox(height: 100, width: 100, child: new CircularProgressIndicator()));
            break;
          default:
            if(snapshot.hasError) {
              return Container();
            } else {
              return _buildListView(snapshot.data);
            }
          }
      }

    )
  );
}

Widget _buildListView(list) {
  return Column(
    children: <Widget>[
      Expanded(
        child: ListView(
          controller: _scrollController,
          shrinkWrap: true,
          children: list,
        ),
      ),
    ],
  );
}
1
  • sure, add a simple code to reproduce the issue, so we can help you with your code Jun 10, 2019 at 16:10

2 Answers 2

3

Try removing WidgetsBinding.instance.addPostFrameCallback((_) => _postInit()); from your initState method.

After that, add a delayed function inside your _postInit() method and call it when you receive the data to display your List, like this:

Future<void> _postInit() async {
   await Future.delayed(Duration(milliseconds: 100));
 _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}


@override
Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder(
      future: _getList(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        switch(snapshot.connectionState) {
          case ConnectionState.none:
          case ConnectionState.waiting:
            return Center(child: SizedBox(height: 100, width: 100, child: new CircularProgressIndicator()));
            break;
          default:
            if(snapshot.hasError) {
              return Container();
            } else {
              _postInit();
              return _buildListView(snapshot.data);
            }
          }
      }

    )
  );
}
0

Set reverse:true on the ListView and set the array you are iterating inside the ListView in reversed order.

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Nov 8, 2022 at 20:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.