SliverAppBar Demo

main.dart

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _tabController.addListener(() {
      setState(() {
        _selectedIndex = _tabController.index;
      });
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          leading: const BackButton(),
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        extendBodyBehindAppBar: true,
        body: TabBarView(
          physics: const NeverScrollableScrollPhysics(),
          controller: _tabController,
          children: [
            ShowcasePage(),
            DummyPage(),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: (index) {
            setState(() {
              _selectedIndex = index;
              _tabController.index = index;
            });
          },
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.shopping_basket_outlined),
              label: 'Showcase',
            ),
            BottomNavigationBarItem(
              icon: Badge(
                child: Icon(Icons.notifications_none),
              ),
              label: 'Notifications',
            ),
          ],
        ),
      );
}

class ShowcasePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 300,
            pinned: true,
            primary: false,
            flexibleSpace: const FlexibleSpaceBar(
              titlePadding: EdgeInsets.zero,
              background: FlutterLogo(),
            ),
            bottom: PreferredSize(
              preferredSize: const Size.fromHeight(50),
              child: SizedBox(
                height: 50,
                child: ListView.separated(
                  scrollDirection: Axis.horizontal,
                  itemCount: 10,
                  itemBuilder: (_, i) => ChoiceChip(
                    label: Text('Choice $i'),
                    selected: false,
                    onSelected: (value) {},
                  ),
                  separatorBuilder: (_, __) => const SizedBox(width: 10),
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => const DummyProductCard(),
              childCount: 20,
            ),
          ),
        ],
      );
}

class DummyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        backgroundColor: Colors.blue,
        body: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(10),
            child: Text(
              'This is item ${index + 1}',
              style: const TextStyle(fontSize: 18),
            ),
          ),
        ),
      );
}

class DummyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) => RichText(
        text: const TextSpan(
          children: [
            WidgetSpan(
              child: Icon(Icons.abc, size: 14),
            ),
            TextSpan(
              text: "Foobar",
            ),
          ],
        ),
      );
}

class DummyInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Row(
        children: [
          DummyText(),
          const Spacer(),
          DummyText(),
        ],
      );
}

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

  @override
  Widget build(BuildContext context) => Card(
        margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: SizedBox(
          height: 300,
          child: Column(
            children: [
              DummyInfo(),
              const Expanded(
                child: FlutterLogo(size: double.infinity),
              ),
              DummyInfo(),
            ],
          ),
        ),
      );
}