Search code examples
flutter

Flutter Scrollbar Doesn't Scroll to the Bottom Completely in ListView


I’m using a ListView.builder inside a Container with a fixed height in Flutter. However, the scrollbar doesn't scroll all the way to the bottom of the list. Instead, there is an extra space below the last item, and the scrollbar stops prematurely (see screenshot below). https://imgur.com/a/JcgITuk

Here’s a simplified version of my code:

class MyListView extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 200.0,
        color: Colors.white,
        child: Stack(
          children: [
            Scrollbar(
              controller: _scrollController,
              thumbVisibility: true,
              trackVisibility: true,
              child: ListView.builder(
                controller: _scrollController,
                itemCount: 30,
                padding: EdgeInsets.zero,
                itemBuilder: (BuildContext context, int index) {
                  return Text("List Item ${index + 1}");
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}


Solution

  • this Works for me just fine

    class MyListView extends StatelessWidget {
      final ScrollController _scrollController = ScrollController();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: Container(
             height: 500,
              color: Colors.grey.shade300,
              child: Scrollbar(
                controller: _scrollController,
                thumbVisibility: true,
                trackVisibility: true,
                child: ListView.builder(
                  controller: _scrollController,
                  itemCount: 75,
                  padding: EdgeInsets.zero,
                  itemBuilder: (BuildContext context, int index) {
                    return Text("List Item ${index + 1}");
                  },
                ),
              ),
            ),
          ),
        );
      }
    }