import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TestPageState();

}

class _TestPageState extends State<TestPage> with TickerProviderStateMixin {
  ScrollController _scrollViewController =
  ScrollController(initialScrollOffset: 0.0);

  TabController _tabController;

  @override
  Widget build(BuildContext context) {
    _tabController = TabController(length: 4, vsync: this);
    return Scaffold(
      appBar: AppBar(
        title: const Text("title"),
      ),
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    List<String> _tabList = ["1", "2", "3", "4"];

    return NestedScrollView(
      controller: _scrollViewController,
      headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            pinned: true,
            floating: true,
            forceElevated: boxIsScrolled,
            backgroundColor: Colors.white,
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.pin,
              background: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Center(
                    child: Container(
                      height: 100,
                      width: 200,
                      color: Colors.blue,
                    ),
                  ),
                  Center(
                    child: Container(
                      height: 100,
                      width: 200,
                      color: Colors.red,
                    ),
                  ),
                  Center(
                    child: Container(
                      height: 100,
                      width: 200,
                      color: Colors.green,
                    ),
                  ),
                  Center(
                    child: Container(
                      height: 100,
                      width: 200,
                      color: Colors.yellow,
                    ),
                  )
                ],
              ),
            ),
            expandedHeight: 470,
            bottom: PreferredSize(
                child: TabBar(
                    controller: _tabController,
                    tabs: _tabList.map((item) {
                      return Tab(
                        child: Text(item, style: TextStyle(color: Colors.green),),
                      );
                    }).toList()),
                preferredSize: Size(double.infinity, 60)),
          )
        ];
      },
      body: TabBarView(
        controller: _tabController,
        children: _tabList.map((_) {
          return Center(
            child: ListView.builder(
              itemBuilder: (content, index) {
                return Center(
                  child: Text("$index"),
                );
              },
              itemCount: 100,
            ),
          );
        }).toList(),
      ),
    );
  }
}