[Flutter] SliverAppBar　アニメーション

SliverAppBar, Stack, Positioned.fill, FlexibleSpaceBarを組み合わせると下のGIFみたいなアニメーションを作れます。

コード

test.dart

SliverAppBar(
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(56.sp + 56.h),
              child: Container(),
            ),
            expandedHeight: 244.h + 56.sp,
            snap: true,
            pinned: true,
            floating: true,
            flexibleSpace: Stack(
              children: [
                Positioned.fill(
                  child: Container(
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('assets/images/test.jpg'),
                        fit: BoxFit.cover,
                        alignment: Alignment.topCenter,
                      ),
                    ),
                  ),
                ),
                SafeArea(
                  child: FlexibleSpaceBar(
                    collapseMode: CollapseMode.none,
                    background: Column(
                      children: [
                        SizedBox(height: 56.sp + 56.h),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 32.w),
                          child: SizedBox(
                            height: 56.h,
                            child: ElevatedButton(
                              onPressed: () {},
                              child: Text('Button'),
                            ),
                          ),
                        ),
                        SizedBox(height: 36.h),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),