(Flutter) Infinite Scroll `ListView.builder` with Finite Content

Question

1. The Problem

How do I make my ListView.builder be able to scroll to empty space both to the top and to the bottom?

For example,

Answer 1

That is possible to be achived with your "Container workaround". You could use a ScrollController and have its initialScrollOffset where the top Container ends. It is something I only later found out through this other StackOverflow question.

1. Declare your ScrollController inside your widget's class.

   ScrollController scrollController = ScrollController(
     initialScrollOffset: 10, // or whatever offset you wish
     keepScrollOffset: true,
   );
   

2. Add the controller to your ListView

   ListView.builder(
     controller: scrollController,
     itemCount: widgetsList.length,
     itemBuilder: (context, index){
       return widgetsList[index];
     },
   ),
   

Additionally, you may even want to create animations for the background scrolling action. That is possible through using the .animateTo method inside your widget's initState.

Answer 2

If I understand it correctly, your best bet would be using a CustomScrollView with an expandable space in the SliverAppBar.

Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: [
         SliverAppBar(
           automaticallyImplyLeading: false, // gets rid of the back arrow
           expandedHeight: 250, // the collapsible space you want to use 
           flexibleSpace: FlexibleSpaceBar(
             background: Container(
               color: Colors.transparent
             ),
           ),
         ),
         SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              // put your widgetsList here
            },
            childCount: widgetsList.length,
          ),
        ),
      ]
    ),
  );
}