for Mahdi

main.dart

import 'package:flutter/material.dart';
import 'dart:math' as math;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  _MyHomePageState() {
    _tabs = [
      _buildTab('tab 1'),
      _buildTab('tab 2'),
      _buildTab('tab 3'),
    ];

    _tabScreenLists = [
      _buildTabScreen('tab1'),
      _buildTabScreen('tab2'),
      _buildTabScreen('tab3'),
    ];
  }
  TabController _tabController;
  List<Tab> _tabs;

  Tab _buildTab(String title) {
    return Tab(
      child: Text(
        title,
        style: TextStyle(color: Colors.black),
      ),
    );
  }

  List<Widget> _tabScreenLists;

  Widget _buildTabScreen(String tabName) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text('$tabName: item $index'),
        );
      },
      itemCount: 40,
    );
  }

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

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

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          SliverPersistentHeader(
            pinned: true,
            floating: false,
            delegate: MyDelegate(
              title: 'App Bar',
              child: TabBar(
                tabs: _tabs,
                controller: _tabController,
              ),
            ),
          ),
        ];
      },
      body: TabBarView(
        children: _tabScreenLists,
        controller: _tabController,
      ),
    );
  }
}

class MyDelegate extends SliverPersistentHeaderDelegate {
  MyDelegate({this.title, this.child});

  final Widget child;
  final String title;
  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    var animationValue = shrinkOffset / 80;

    print(animationValue);
    return Container(
      height: _height,
      child: Stack(
        children: [
          Positioned(
            bottom: _height - (_height * animationValue),
            left: 0,
            right: 0,
            child: Container(
              color: Colors.white,
              height: 30,
              child: child,
            ),
          ),
          Container(
            padding: EdgeInsets.only(left: 20),
            color: Colors.white,
            height: _height - ((_height - 50) * animationValue),
            alignment: Alignment.centerLeft,
            child: Text(
              title,
              style: TextStyle(
                fontSize: 18 - (2 * animationValue),
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }

  final double _height = 80;

  @override
  double get maxExtent => _height;

  @override
  double get minExtent => _height;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}