Sliver Test

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const AppBarApp());

class AppBarApp extends StatelessWidget {
  const AppBarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SliverAppBarExample(),
    );
  }
}

class SliverAppBarExample extends StatefulWidget {
  const SliverAppBarExample({super.key});

  @override
  State<SliverAppBarExample> createState() => _SliverAppBarExampleState();
}

// controlBoxMinHeight - appBarMinHeight が
// 中央エリアの最小値

const appBarMinHeight = 160.0;
const appBarMaxHeight = 320.0;
const controlBoxMinHeight = 180.0;

class _SliverAppBarExampleState extends State<SliverAppBarExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraint) {
          return CustomScrollView(
            physics: const PageScrollPhysics(parent: ClampingScrollPhysics()),
            slivers: <Widget>[
              const SliverAppBar(
                pinned: true,
                floating: true,
                expandedHeight: appBarMaxHeight,
                collapsedHeight: appBarMinHeight,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text('SliverAppBar'),
                ),
              ),
              SliverPersistentHeader(
                floating: false,
                delegate: _MySliverHeaderDelegate(maxExtent: constraint.maxHeight - appBarMaxHeight),
              ),
              SliverToBoxAdapter(
                child: Container(
                  color: Colors.black12,
                  height: constraint.maxHeight - controlBoxMinHeight,
                  child: const Center(
                    child: Text('test', textScaleFactor: 5),
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

class _MySliverHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  double get minExtent => controlBoxMinHeight;
 
  @override
  final double maxExtent;
  
  _MySliverHeaderDelegate({required this.maxExtent});

  @override
  bool shouldRebuild(covariant oldDelegate) => false;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.white,
      child: const Center(child: Text('title')),
    );
  }
}