具有自定义布局和动画的 Flutter Collapsible Appbar

要使滑动应用条的灵活空间图像在扩展空间塌陷时消失，只需使用FlexibleSpaceBar.background属性.

要解决重叠的文本，只需将FlexibleSpaceBar环绕在LayoutBuilder周围，以获得它是否展开，并调整文本位置.

查看下面的结果(还有live demo on DartPad个):

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final expandedHeight = MediaQuery.of(context).size.height * 0.2;
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            leading: GestureDetector(
              onTap: () => {},
              child: const Icon(
                Icons.arrow_back,
                color: Colors.black,
              ),
            ),
            flexibleSpace: LayoutBuilder(builder: (context, constraints) {
              final fraction =
                  max(0, constraints.biggest.height - kToolbarHeight) /
                      (expandedHeight - kToolbarHeight);
              return FlexibleSpaceBar(
                title: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Row(
                    children: [
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(left: 24 * (1 - fraction)),
                          child: const Text.rich(
                            TextSpan(
                                text: "Buffet Deal\n",
                                style: TextStyle(
                                    color: Colors.black, fontSize: 14),
                                children: [
                                  TextSpan(
                                    text: "Flash Deal",
                                    style: TextStyle(
                                        color: Colors.black, fontSize: 10),
                                  ),
                                ]),
                          ),
                        ),
                      ),
                      const SizedBox(width: 18)
                    ],
                  ),
                ),
                background: Align(
                  alignment: Alignment.centerRight,
                  child: Image.network(
                    "https://source.unsplash.com/random/400x225?sig=1&licors",
                  ),
                ),
              );
            }),
            expandedHeight: MediaQuery.of(context).size.height * 0.2,
            backgroundColor: const Color(0xFFFFF4F4),
          ),
          const SliverToBoxAdapter(child: SizedBox(height: 1000))
        ],
      ),
    );
  }
}