import 'dart:math';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    var sliverList = <Widget>[
      SliverToBoxAdapter(
        child: Container(
          color: randomColor(),
          height: 200,
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          color: randomColor(),
          height: 200,
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          color: randomColor(),
          height: 200,
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          color: randomColor(),
          height: 200,
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          color: randomColor(),
          height: 200,
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          color: randomColor(),
          height: 200,
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          color: randomColor(),
          height: 200,
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          color: randomColor(),
          height: 200,
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          color: randomColor(),
          height: 200,
        ),
      ),
      SliverToBoxAdapter(
        child: Container(
          color: randomColor(),
          height: 200,
        ),
      ),
      SliverPersistentHeader(
        pinned: true,
        delegate: _SliverPersistentHeaderDelegate(_tabController),
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('TEST'),
      ),
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return sliverList;
        },
        body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            CustomScrollView(
              slivers: <Widget>[
                SliverToBoxAdapter(
                  child: Container(
                    height: 200,
                    color: randomColor(),
                  ),
                ),
                SliverToBoxAdapter(
                  child: Container(
                    height: 400,
                    color: randomColor(),
                  ),
                ),
                SliverToBoxAdapter(
                  child: Container(
                    height: 300,
                    color: randomColor(),
                  ),
                ),
                SliverToBoxAdapter(
                  child: Container(
                    height: 400,
                    color: randomColor(),
                  ),
                ),
                SliverToBoxAdapter(
                  child: Container(
                    height: 200,
                    color: randomColor(),
                  ),
                ),
              ],
            ),
            Container(
              height: 1400,
              color: randomColor(),
            ),
            Container(
              height: 1400,
              color: randomColor(),
            ),
          ],
        ),
      ),
    );
  }
}

class _SliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final TabController tabController;

  _SliverPersistentHeaderDelegate(this.tabController);

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return TabBar(
      controller: tabController,
      labelColor: Colors.blue,
      tabs: <Widget>[
        Tab(
          text: '111',
        ),
        Tab(
          text: '222',
        ),
        Tab(
          text: '333',
        ),
      ],
    );
  }

  @override
  double get maxExtent => TabBar(
        tabs: <Widget>[],
      ).preferredSize.height;

  @override
  double get minExtent => TabBar(
        tabs: <Widget>[],
      ).preferredSize.height;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

Color randomColor() {
  List<MaterialColor> colors = [
    Colors.red,
    Colors.orange,
    Colors.yellow,
    Colors.green,
    Colors.cyan,
    Colors.blue,
    Colors.purple,
  ];
  return colors[Random.secure().nextInt(6)][Random.secure().nextInt(8) * 100 + 100];
}