Flutter AppBar 自定義頂部導航按鈕 圖標、顏色 以及 TabBar 定義頂部 Tab 切換

一、Flutter AppBar 自定義頂部按鈕圖標、顏色

屬性	描述
leading	在標題前面顯示的一個控件，在首頁通常顯示應用 的 logo；在其他界面通常顯示為返回按鈕
title	標題，通常顯示為當前界面的標題文字，可以放組件
actions	通常使用 IconButton 來表示，可以放按鈕組
bottom	通常放 tabBar，標題下面顯示一個 Tab 導航欄
backgroundColor	導航背景顏色
iconTheme	圖標樣式
textTheme	文字樣式
centerTitle	標題是否居中顯示

 

 

 

 

 

 

 

 

 

 

 

import 'package:flutter/material.dart';

class AppBardemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: "Search",
            onPressed: () {
              print('menu Pressed');
            }),
        title: Text('FlutterDemo'),
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.search),
              tooltip: "Search",
              onPressed: () {
                print('Search Pressed');
              }),
          IconButton(
              icon: Icon(Icons.more_horiz),
              tooltip: "more_horiz",
              onPressed: () {
                print('more_horiz Pressed');
              })
        ],
      ),
      body: Text('這是 Appbar'),
    );
  }
}

二、Flutter AppBar 中自定義 TabBar 實現頂部 Tab 切換

TabBar 常見屬性：

屬性	描述
tabs	顯示的標簽內容，一般使用 Tab 對象,也可以是其他 的 Widget
controller	TabController 對象
isScrollable	是否可滾動
indicatorColor	指示器顏色
indicatorWeight	指示器高度
indicatorPadding	底部指示器的 Padding
indicator	指示器 decoration，例如邊框等
indicatorSize	指示器大小計算方式，TabBarIndicatorSize.label 跟文 字等寬,TabBarIndicatorSize.tab 跟每個 tab 等寬
labelColor	選中 label 顏色
labeStyle	選中 label 的 Style
labelPadding	每個 label 的 padding 值
unselectedLabelColor	未選中 label 顏色
unselectedLabelStyle	未選中 label 的 Style

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

import 'package:flutter/material.dart';

class AppBardemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
              title: Text('FlutterDemo'),
              bottom: TabBar(tabs: <Widget>[
                Tab(text: "熱門"),
                Tab(text: "推薦")
              ])),
          body: TabBarView(
            children: <Widget>[
              ListView(
                children: <Widget>[
                  ListTile(title: Text("這是第一個 tab")),
                  ListTile(title: Text("這是第一個 tab")),
                  ListTile(title: Text("這是第一個 tab"))
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title: Text("這是第二個 tab")),
                  ListTile(title: Text("這是第二個 tab")),
                  ListTile(title: Text("這是第二個 tab"))
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

三、Flutter 把 TabBar 放在導航最頂部

import 'package:flutter/material.dart';

class AppBardemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            // backgroundColor: Colors.red,
            leading: IconButton(
                icon: Icon(Icons.arrow_back),
                tooltip: "Search",
                onPressed: () {
                  Navigator.of(context).pop();
                }),
            title: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child:
                      TabBar(tabs: <Widget>[Tab(text: "熱門"), Tab(text: "推薦")]),
                )
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              ListView(
                children: <Widget>[
                  ListTile(title: Text("這是第一個 tab")),
                  ListTile(title: Text("這是第一個 tab")),
                  ListTile(title: Text("這是第一個 tab"))
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title: Text("這是第二個 tab")),
                  ListTile(title: Text("這是第二個 tab")),
                  ListTile(title: Text("這是第二個 tab"))
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

四、Flutter AppBar 中自定義 TabBar 實現 Tabs 的另一種方法。

import 'package:flutter/material.dart';

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

  _AppBardemoPageState createState() => _AppBardemoPageState();
}

class _AppBardemoPageState extends State<AppBardemoPage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('頂部 tab 切換'),
        bottom: new TabBar(
          tabs: <Widget>[
            new Tab(
              icon: new Icon(Icons.directions_bike),
            ),
            new Tab(
              icon: new Icon(Icons.directions_boat),
            ),
            new Tab(
              icon: new Icon(Icons.directions_bus),
            ),
          ],
          controller: _tabController,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: <Widget>[
          new Center(child: new Text('自行車')),
          new Center(child: new Text('船')),
          new Center(child: new Text('巴士')),
        ],
      ),
    );
  }
}