tab_with_sliver_appbar.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      body: DefaultTabController(
        length: 3,
        child: NestedScrollView(
          headerSliverBuilder:
              (BuildContext context, bool innerBoxIsScrolled) => [
            SliverAppBar(
              expandedHeight: 200,
              pinned: true,
              elevation: 0,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text('FlexibleSpaceBar'),
                background: Image.network(
                  'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverPersistentHeader(
              delegate: _PersistenHeaderDelegate(
                TabBar(
                  tabs: List.generate(3, (index) => Tab(text: 'Tab $index')),
                ),
              ),
              pinned: true,
              floating: false,
            ),
          ],
          body: TabBarView(
            children: List.generate(
              3,
              (index) => ListView.builder(
                itemCount: 50,
                itemBuilder: (context, index) => Card(
                  child: ListTile(title: Text('Item $index')),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _PersistenHeaderDelegate extends SliverPersistentHeaderDelegate {
  final PreferredSizeWidget tabBar;
  _PersistenHeaderDelegate(this.tabBar);

  @override
  Widget build(_, __, ___) => Material(child: tabBar);

  @override
  double get maxExtent => tabBar.preferredSize.height;

  @override
  double get minExtent => tabBar.preferredSize.height;

  @override
  bool shouldRebuild(_) => false;
}