Трепетная реализация WhatsApp Appbar

Question

Я собрал все необходимые вещи из inte rnet для построения WhatsApp AppBar с использованием Flutter.

Вывод выглядит так:

Я использовал NestedScrollView, код:

Scaffold(
  body: NestedScrollView(
    controller: _scrollViewController,
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          backgroundColor: Color(0xFF075E55),
          title: Text(
            'WhatsApp',
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.w500,
              fontSize: 21.0,
            ),
          ),
          pinned: true,
          floating: true,
          forceElevated: innerBoxIsScrolled,
          actions: <Widget>[
            IconButton(
              tooltip: 'search',
              icon: Icon(
                Icons.search,
                color: Colors.white,
              ),
            ),
            IconButton(
              tooltip: 'more',
              icon: Icon(
                Icons.more_vert,
                color: Colors.white,
              ),
            ),
          ],
          bottom: TabBar(
            indicatorColor: Colors.white,
            indicatorWeight: 3.1,
            isScrollable: true,
            tabs: <Widget>[
              Container(
                padding: kHeaderPadding,
                width: kCameraButtonWidth,
                height: kBottomTabBarHeight,
                alignment: Alignment.center,
                child: FractionallySizedBox(
                  widthFactor: kCameraIconScale,
                  heightFactor: kCameraIconScale,
                  child: Image(
                    image: AssetImage('images/camera.png'),
                    color: cameraColor,
                  ),
                ),
              ),
              Container(
                padding: kHeaderPadding,
                width: othersWidth,
                height: kBottomTabBarHeight,
                alignment: Alignment.center,
                child: Text(
                  "CHATS",
                  style: kBottomTabTextStyle,
                ),
              ),
              Container(
                padding: kHeaderPadding,
                width: othersWidth,
                height: kBottomTabBarHeight,
                alignment: Alignment.center,
                child: Text(
                  "STATUS",
                  style: kBottomTabTextStyle,
                ),
              ),
              Container(
                padding: kHeaderPadding,
                width: othersWidth,
                height: kBottomTabBarHeight,
                alignment: Alignment.center,
                child: Text(
                  "CALLS",
                  style: kBottomTabTextStyle,
                ),
              )
            ],
            controller: _tabController,
          ),
        ),
      ];
    },
    body: TabBarView(
      children: <Widget>[
        Center(child: Text('camera')),
        Center(child: Text('chats')),
        Center(child: Text('status')),
        Center(child: Text('calls')),
      ],
      controller: _tabController,
    ),
  ),
  floatingActionButton: FloatingActionButton(
    backgroundColor: Color(0xFF00CC3F),
    child: FractionallySizedBox(
      widthFactor: kFABIconScale,
      heightFactor: kFABIconScale,
      child: Image.asset('images/chat.png'),
    ),
  ),
);

Полный код можно найти здесь

Положение проблемы Когда я прокручиваю вверх , мы можем видеть («Заголовок» + «Действие»), а «Нижний» не прокручивается вместе. Если мы видим в оригинальном WhatsApp, когда мы прокручиваем вверх, все это прокручивается вверх как единое целое и останавливается внизу. Как того же можно достичь во Флаттере? Пожалуйста, предложите мне решение :).

Примечание: я новичок в трепетании