Stretchy Header Practice

main.dart

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 MaterialApp(
      title: 'Stretchy Header Practice',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Builder(builder: (context) {
        return Center(
          child: ElevatedButton(
            onPressed: () {
              showModalBottomSheet(
                isScrollControlled: true,
                enableDrag: false,
                backgroundColor: Colors.transparent,
                context: context,
                builder: (context) {
                  return MediaQuery(
                    data: MediaQueryData.fromWindow(
                      WidgetsBinding.instance!.window,
                    ),
                    child: DraggableScrollableSheet(
                      initialChildSize: 1,
                      minChildSize: 0.9,
                      snap: true,
                      builder: (context, controller) => ColoredBox(
                        color: Colors.white,
                        child: _StretchyContent(controller),
                      ),
                    ),
                  );
                },
              );
            },
            child: const Text('open'),
          ),
        );
      }),
    );
  }
}

class _StretchyContent extends StatelessWidget {
  const _StretchyContent(
    this.controller, {
    Key? key,
  }) : super(key: key);

  final ScrollController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fixed AppBar'),
        shadowColor: Colors.transparent,
        backgroundColor: Colors.transparent,
      ),
      extendBodyBehindAppBar: true,
      body: CustomScrollView(
        controller: controller,
        physics: const BouncingScrollPhysics(),
        slivers: [
          SliverAppBar(
            backgroundColor: Colors.white,
            automaticallyImplyLeading: false,
            expandedHeight: 520,
            stretch: true,
            flexibleSpace: FlexibleSpaceBar(
              stretchModes: const [StretchMode.zoomBackground],
              background: Stack(
                fit: StackFit.expand,
                children: [
                  Image.network(
                    'https://github.com/chooyan-eng/crop_your_image/blob/main/example/assets/images/train.png?raw=true',
                    fit: BoxFit.cover,
                  ),
                ],
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              [const _ContentBelowImage()],
            ),
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: List.generate(
        20,
        (index) => Padding(
          padding: const EdgeInsets.all(16),
          child: Text(
            'text $index, ' * index,
            style: const TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}