Search code examples
listviewflutterdartscrollchat

how can I scroll list view to the bottom in flutter


I have a flutter app contain a list view builder (chat page) I need to scroll the page to the end of the page to the last message?


Solution

  • You will need to create a scrollController and pass that to the ListView and run a code like this:

    class SampleList extends StatefulWidget {
      @override
      _SampleListState createState() => _SampleListState();
    }
    
    class _SampleListState extends State<SampleList> {
      ScrollController _scrollController;
      @override
      Widget build(BuildContext context) {
        return ListView.builder(
          controller: _scrollController,
          itemBuilder: (_, index) => ListTile(
            title: Text(
              index.toString(),
            ),
          ),
        );
      }
    
      void scrollToBottom() {
        final bottomOffset = _scrollController.position.maxScrollExtent;
        _scrollController.animateTo(
          bottomOffset,
          duration: Duration(milliseconds: 1000),
          curve: Curves.easeInOut,
        );
      }
    
      @override
      void initState() {
        _scrollController = ScrollController();
        super.initState();
      }
    
      @override
      void dispose() {
        _scrollController.dispose();
        super.dispose();
      }
    }