main.dart

import 'package:flutter/material.dart';
import 'package:sliver_appbar_example/sliver_items.dart';
import 'package:sliver_header_delegate/sliver_header_delegate.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverPersistentHeader(
            pinned: true,
            delegate: FlexibleHeaderDelegate(
              statusBarHeight: MediaQuery.of(context).padding.top,
              expandedHeight: 240,
              background: MutableBackground(
                expandedWidget: Image.asset(
                  'assets/images/mountains.jpg',
                  fit: BoxFit.cover,
                ),
                collapsedColor: const Color(0xBE7A81FF),
              ),
              actions: [
                IconButton(
                  icon: const Icon(Icons.search),
                  onPressed: () {},
                ),
                IconButton(
                  icon: const Icon(Icons.more_vert),
                  onPressed: () {},
                ),
              ],
              children: [
                FlexibleTextItem(
                  text: 'Mountains',
                  collapsedStyle: Theme.of(context)
                      .textTheme
                      .headline6
                      .copyWith(color: Colors.white),
                  expandedStyle: Theme.of(context)
                      .textTheme
                      .headline4
                      .copyWith(color: Colors.white),
                  expandedAlignment: Alignment.bottomLeft,
                  collapsedAlignment: Alignment.center,
                  expandedPadding:
                      EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                ),
              ],
            ),
          ),
          const SliverItems(),
        ],
      ),
    );
  }
}