将标题位置向下移动

Question

目前我正在尝试实现一个选项卡控制器，而不是我在CategorySelector() 函数中使用的列表视图。但是，我想保持相同的设计。如何将默认文本标题移动到箭头指向的位置。并使其根据所选标签做出响应。

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffDCE3E5),
      appBar: AppBar(
        title: Text('DISCOVER', style:
          TextStyle(color: kOnyx,
          fontFamily: 'Baukasten'),),
        backgroundColor: kSnow,
        leading: IconButton(
          icon: Icon(Icons.menu),
          iconSize: 30.0,
          color: kOnyx,
          onPressed: () {},
        ),
        elevation: 0.0,
        actions: <Widget>[
          FlatButton.icon(
            icon: Icon(
              Icons.person,
              color: kOnyx,
              size: 30.0,
            ),
            label: Text('Log Out'),
            onPressed: () {
              _auth.signOut();
              Navigator.push(context, MaterialPageRoute(builder: (context) => Authentication()));
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: kSnow,
            padding: EdgeInsets.only(left: 15.0, top: 15.0),
            child: FractionallySizedBox(
              widthFactor: 1.0,
              child: Text(
                'DISCOVER',
                style: TextStyle(
                    color: kOnyx,
                    fontSize: 30.0,
                    //fontWeight: FontWeight.w600,
                    fontFamily: 'Baukasten'),
              ),
            ),
          ),
          CategorySelector(),

        ],
      ),
    );
  }
}

Answer 1

使用tabbarView

例如:)

class _MainPage extends State<MainPage> with SingleTickerProviderStateMixin {
  TabController controller;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App bar'),
      ),
      body: TabBarView(
        children: <Widget>[FirstPage(), SecondPage() , ThirdPage()],
        controller: controller,
      ),
      bottomNavigationBar:  TabBar(tabs: <Tab>[
        Tab(icon: Icon(Icons.looks_one),) ,
        Tab(icon: Icon(Icons.looks_two),) ,
        Tab(icon: Icon(Icons.looks_3),) , ] ,
        controller: controller,),
    );
  }

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