Flutter：ListView 中动态大小的小部件

Question

I would like to create a page with a ListView with a dynamically sized widget to archive this behavior:

The dynamically sized widget (shown in red) has a minimal and maximal size.

1. When there is enough space on the page/listView for all elements, the dynamically sized widget should have its maximum size and there should not be any scrolling behavior in the listView.
2. When there is not enough space for all the elements and the full maximum size widget, the widget should decrease in size until it fits exactly. There should be no scroll behavior.
3. If the widget would have to decrease below its minimal size to make all elements fit the listView, it should keep its minimal size. Since there is not enough space for elements, the ListView should be scrollable.

How can I archive this behavior in flutter?

Answer 1

You can use SliverAppBar with a flexibleSpace all inside a CustomScrollView

CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            floating: false,
            pinned: true,
            snap: false,
            expandedHeight: 150.0,
            flexibleSpace: FlexibleSpaceBar(
                title: Text("SliverAppBar Widget"),
                ),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: Text('List Item $index'),
                );
              },
            ),
          ),
        ],
      )

You can see an example in my code