Flutter AppBar-滑动渐变-悬停-TabBar嵌套效

效果图

AppBar-渐变-悬停-嵌套效果.gif

关键代码

1.NestedScrollView + SliverAppBar + AppBar + TabBar

TabController _tabController;
_tabController = TabController(initialIndex: 1, length: 2, vsync: this);

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
            return <Widget>[
              SliverAppBar(
                primary: true,
                //是否随着滑动隐藏标题
                floating: true,
                //是否固定在顶部
                pinned: false,
                //可折叠的应用栏
                flexibleSpace: AppBar(
                  title: TabBar(
                    tabs: [
                      Tab(text: '好友'),
                      Tab(text: '心动'),
                    ],
                    controller: _tabController,
                    indicatorWeight: ScreenUtil().setHeight(6),
                    indicatorPadding: EdgeInsets.only(
                        left: ScreenUtil().setWidth(30),
                        right: ScreenUtil().setWidth(30)),
                    labelPadding: EdgeInsets.symmetric(
                        horizontal: ScreenUtil().setWidth(30)),
                    isScrollable: true,
                    indicatorColor: Color(0xffFF7E98),
                    labelColor: Color(0xffFF7E98),
                    labelStyle: TextStyle(
                      fontSize: ScreenUtil().setSp(42),
                      color: Color(0xffFF7E98),
                      fontWeight: FontWeight.bold,
                    ),
                    unselectedLabelColor: Color(0xffAAAAAA),
                    unselectedLabelStyle: TextStyle(
                      fontSize: ScreenUtil().setSp(36),
                      color: Color(0xffAAAAAA),
                    ),
                    indicatorSize: TabBarIndicatorSize.label,
                  ),
                  backgroundColor: Colors.white,
                  elevation: 0,
                ),
                snap: true,
              ),
            ];
          },
          body: TabBarView(
            children: [
              GroupList(),
              HeartBeatList(),
            ],
            controller: _tabController,
          ),
      ),
    );
  }

2.二级嵌套

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                // 设置阴影
                boxShadow: [
                  BoxShadow(
                    color: Color(0xffD9D9D9),
                    blurRadius: 9.0,
                    spreadRadius: -7.0,
                    offset: Offset(0, -7),
                  )
                ],
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(ScreenUtil().setWidth(30)),
                  topRight: Radius.circular(ScreenUtil().setWidth(30)),
                ),
              ),
              //alignment: Alignment.topCenter,
              child: TabBar(
                tabs: [
                  Badge(
                    child: Tab(text: '我心动的'),
                    align: Alignment(2.5, -0.6),
                    text: unreadMsg != null &&
                        unreadMsg.ilike != null &&
                        unreadMsg.ilike > 0
                        ? unreadMsg.ilike.toString()
                        : '',
                    padding: 3,
                    backgroundColor: Color(0xffFA5151),
                    textStyle: TextStyle(
                      fontSize: ScreenUtil().setSp(22),
                      color: Colors.white,
                    ),
                    visible: unreadMsg != null &&
                        unreadMsg.ilike != null &&
                        unreadMsg.ilike > 0
                        ? true
                        : false,
                  ),
                  Badge(
                    child: Tab(text: '心动我的'),
                    align: Alignment(2.5, -0.6),
                    text: unreadMsg != null && unreadMsg.likeMe > 0
                        ? unreadMsg.likeMe.toString()
                        : '',
                    padding: 3,
                    backgroundColor: Color(0xffFA5151),
                    textStyle: TextStyle(
                      fontSize: ScreenUtil().setSp(22),
                      color: Colors.white,
                    ),
                    visible:
                    unreadMsg != null && unreadMsg.likeMe > 0 ? true : false,
                  ),
                ],
                controller: _tabController,
                indicatorWeight: ScreenUtil().setHeight(6),
                indicatorPadding: EdgeInsets.only(
                    left: ScreenUtil().setWidth(40),
                    right: ScreenUtil().setWidth(40)),
                labelPadding:
                EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(30)),
                isScrollable: false,
                indicatorColor: Color(0xffFF7E98),
                labelColor: Color(0xffFF7E98),
                labelStyle: TextStyle(
                  fontSize: ScreenUtil().setSp(30),
                  color: Color(0xffFF7E98),
                ),
                unselectedLabelColor: Color(0xffAAAAAA),
                unselectedLabelStyle: TextStyle(
                  fontSize: ScreenUtil().setSp(28),
                  color: Color(0xffAAAAAA),
                ),
                indicatorSize: TabBarIndicatorSize.label,
              )),
        ),
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: TabBarView(
        children: [
          MyHeartBeatList(),
          HeartBeatMineList(),
        ],
        controller: _tabController,
      ),
    );
  }

补充

Demo案例代码

import 'package:flutter/material.dart';

class TestWidget extends StatefulWidget {
  final String title;

  TestWidget({Key key, this.title}) : super(key: key);

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

class _TestWidgetState extends State<TestWidget>
    with SingleTickerProviderStateMixin {
  TabController tabController;

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

  Widget build(BuildContext context) {
    return new Scaffold(
      body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
            return <Widget>[
              SliverAppBar(
                //展开高度
                expandedHeight: 80.0,
                //是否随着滑动隐藏标题
                floating: true,
                //是否固定在顶部
                pinned: false,
                //可折叠的应用栏
                flexibleSpace: FlexibleSpaceBar(
                  background: Image.network(
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549129578802&di=f866c638ea12ad13c5d603bcc008a6c2&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F07%2F66%2F16pic_766297_b.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ];
          },
          body: Center(
            child: Text('向上提拉，查看效果'),
          )
      ),
    );
  }
}