Animated Container with scrolling list - Flutter

Question

I have a fairly complicated screen I am trying to implement in Flutter. It's a scrollview with a parallax background and...kind of a collapsing toolbar. I know I have to probably use a NestedScrollView and SliverAppBar(?), but not sure where to start on implementing. I think a picture would best show what I am trying to accomplish:

The list starts below a Container. As you scroll the list, the Container shrinks to a smaller Container and is pinned to the top. Does that make sense? Any help would be greatly appreciated!

Answer 1

This is using SliverAppBar with expandedHeight. I will encourage checking this video.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => CustomScrollView(
          slivers: [
            SliverAppBar(
              pinned: true,
              expandedHeight: constraints.maxHeight * .3,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text("Title"),
                background: Container(
                  color: Colors.pink,
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                height: constraints.maxHeight * 4,
                color: Colors.deepOrange,
              ),
            )
          ],
        ),
      ),
    );
  }