How to add Tabbar in SliverAppBar on Flutter?

问题

Can we add TabBar in our SliverAppBar?

Since SliverAppBar has the bottom property, I thought we can add Tabbar in our SliverAppBar, but the problem is TabBar needs DefaultTabbarController and DefaultTabbarController only works in Material Widget and SliverAppbar only works in Scaffold Body, not in my appbar, but I need my scaffold body to have TabView. What is the explanation?

回答1:

I was able to achieve what you was asking. But I have only one problem, i.e., when I add a scrolling widget in TabView it doesn't produce the required result.

I have open an issue on GitHub.

Here is my code:

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomePageState();
}

class HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  TabController tabController;
  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    Color tabColor = Theme.of(context).primaryColorDark;
    TextStyle tabStyle = TextStyle(color: tabColor);
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text("AppBar"),
              floating: true,
              primary: true,
              pinned: false,
            ),
            SliverFillRemaining(
              child: Scaffold(
                appBar: TabBar(
                controller: tabController,
                tabs: <Widget>[
                  Tab(
                    child: Text(
                      'Tab1',
                     style: tabStyle,
                    ),
                  ),
                  Tab(
                    child: Text(
                      'Tab2',
                    style: tabStyle,
                    ),
                  ),
                ],
              ),
                body: TabBarView(
                  controller: tabController,
                  children: <Widget>[
                    Scaffold(
                      body: Text('Tab One'),
                    ),
                    Scaffold(
                      body: Text('Tab Two'),
                    ),
                  ],
                ),
              ),
              ),
          ],
        ),
      ),
    );
  }
}

回答2:

You can wrap SilverAppBar(which has TabBar as bottom) & SilverFillRemaining(wraps TabBarView) with CustomScrollView. Then set CustomScrollView as body of Scaffold. For this you need to create a TabController.

Full example here:

import 'package:flutter/material.dart';

class SilverAppBarWithTabBarScreen extends StatefulWidget {
  @override
  _SilverAppBarWithTabBarState createState() => _SilverAppBarWithTabBarState();
}

class _SilverAppBarWithTabBarState extends State<SilverAppBarWithTabBarScreen>
    with SingleTickerProviderStateMixin {
  TabController controller;

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new CustomScrollView(
        slivers: <Widget>[
          new SliverAppBar(
            title: Text("Silver AppBar With ToolBar"),
            pinned: true,
            expandedHeight: 160.0,
            bottom: new TabBar(
              tabs: [
                new Tab(text: 'Tab 1'),
                new Tab(text: 'Tab 2'),
                new Tab(text: 'Tab 3'),
              ],
              controller: controller,
            ),
          ),
          new SliverFillRemaining(
            child: TabBarView(
              controller: controller,
              children: <Widget>[
                Text("Tab 1"),
                Text("Tab 2"),
                Text("Tab 3"),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

来源：https://stackoverflow.com/questions/51277171/how-to-add-tabbar-in-sliverappbar-on-flutter