Flutter 導航欄AppBar

恢弘志士之氣，不宜妄自菲薄。——諸葛亮

People of noble ambition should not belittle themselves. zhugelianggit

以上效果是谷歌團隊建立的AppBar最第一版,經典呀!!!github

[知乎]聽 Flutter 創始人 Eric 爲你講述 Flutter 的故事api

AppBar

App 應用app

Bar 條 ide

簡稱應用導航條post

final Widget title 標題 app_bar.png
AppBar(title: Text('AppBarTitle'),)

final bool centerTitle 標題居中 app_bar.png

AppBar(
        title: Text('AppBarTitle'),
        backgroundColor: Colors.lightBlue,
        centerTitle: true,
)

final Color backgroundColor 背景顏色 app_bar.png
AppBar(
        title: Text('AppBarTitle'),
        backgroundColor: Colors.red,
)

final List<Widget> actions Widget集合 app_bar.png

AppBar(
        title: Text('AppBarTitle'),
        backgroundColor: Colors.green,
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.add),),
          IconButton(icon: const Icon(Icons.clear),),
          IconButton(icon: const Icon(Icons.arrow_drop_down),),
        ],
)

final double elevation 陰影大小(Z軸方向) app_bar.png

AppBar(
        title: Text('AppBarTitle'),
        backgroundColor: Colors.red,
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.add),),
          IconButton(icon: const Icon(Icons.clear),),
          IconButton(icon: const Icon(Icons.arrow_drop_down),),
        ],
        elevation: 50,
)

AppBar(
        title: Text('AppBarTitle'),
        backgroundColor: Colors.red,
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.add),),
          IconButton(icon: const Icon(Icons.clear),),
          IconButton(icon: const Icon(Icons.arrow_drop_down),),
        ],
        elevation: 0,
)

final ShapeBorder shape 邊框形狀 app_bar.png

/ 圓角/flex

AppBar(
        title: Text('AppBarTitle'),
        backgroundColor: Colors.greenAccent,
        elevation: 4,
        shape: RoundedRectangleBorder(
            side: BorderSide.none,
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(50.0),
                bottomRight: Radius.circular(30.0))),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add),
          ),
          IconButton(
            icon: const Icon(Icons.clear),
          ),
          IconButton(
            icon: const Icon(Icons.arrow_drop_down),
          ),
        ],
      )

/斜角/ui

AppBar(
        title: Text('AppBarTitle'),
        backgroundColor: Colors.greenAccent,
        elevation: 4,
        shape: BeveledRectangleBorder(
            side: BorderSide.none,
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(20.0),
                bottomRight: Radius.circular(20.0))),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add),
          ),
          IconButton(
            icon: const Icon(Icons.clear),
          ),
          IconButton(
            icon: const Icon(Icons.arrow_drop_down),
          ),
        ],
      )

final PreferredSizeWidget bottom 底部widgetapp_bar.png

AppBar(
        title: Text('AppBarTitle'),
        backgroundColor: Colors.lightBlue,
        elevation: 4,
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add),
          ),
          IconButton(
            icon: const Icon(Icons.clear),
          ),
          IconButton(
            icon: const Icon(Icons.arrow_drop_down),
          ),
        ],
        centerTitle: true,
        bottom: PreferredSize(child: Text('AppBarBottom')),
      )

AppBar(
        title: Text('AppBarTitle'),
        backgroundColor: Colors.lightBlue,
        elevation: 4,
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add),
          ),
          IconButton(
            icon: const Icon(Icons.clear),
          ),
          IconButton(
            icon: const Icon(Icons.arrow_drop_down),
          ),
        ],
        centerTitle: true,
        bottom: PreferredSize(child: Text('AppBarBottom'),preferredSize: Size.fromHeight(100.0))
      )

final Widget flexibleSpace 彈性空間app_bar.png

AppBar(
          title: Text('AppBarTitle'),
          backgroundColor: Colors.lightBlue,
          elevation: 4,
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.add),
            ),
            IconButton(
              icon: const Icon(Icons.clear),
            ),
            IconButton(
              icon: const Icon(Icons.arrow_drop_down),
            ),
          ],
          centerTitle: true,
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: const Text('Flight Report'),
          ),
          bottom: PreferredSize(child: Text('AppBarBottom'),
preferredSize: Size.fromHeight(50.0)))

AppBar(
          title: Text('AppBarTitle'),
          backgroundColor: Colors.lightBlue,
          elevation: 4,
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.add),
            ),
            IconButton(
              icon: const Icon(Icons.clear),
            ),
            IconButton(
              icon: const Icon(Icons.arrow_drop_down),
            ),
          ],
          centerTitle: true,
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: const Text('Flight Report'),
          ),
          bottom: PreferredSize(child: Text('AppBarBottom'),preferredSize: Size.fromHeight(200.0)))

final Widget leading 靠前widget

AppBar(
          title: Text('AppBarTitle'),
          backgroundColor: Colors.lightBlue,
          leading: Builder(builder: (BuildContext context){
            return IconButton(icon: Icon(Icons.menu), onPressed: null);
          },),
          elevation: 4,
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.add),
            ),
            IconButton(
              icon: const Icon(Icons.clear),
            ),
            IconButton(
              icon: const Icon(Icons.arrow_drop_down),
            ),
          ],
          centerTitle: true,
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: const Text('Flight Report'),
          ),
          bottom: PreferredSize(child: Text('AppBarBottom'),preferredSize: Size.fromHeight(100.0))),

App導航欄懸浮 app_bar_pinned.mp4 app_bar.mp4

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
         return Scaffold(
           body: CustomScrollView(
             physics: const BouncingScrollPhysics(),
             slivers: <Widget>[
               SliverAppBar(
                 stretch: false,
                 onStretchTrigger: () {
                   // Function callback for stretch
                   return;
                 },
                 pinned: true,
                 expandedHeight: 300.0,
                 flexibleSpace: FlexibleSpaceBar(
                   stretchModes: <StretchMode>[
                     StretchMode.zoomBackground,
                     StretchMode.blurBackground,
                     StretchMode.fadeTitle,
                   ],
                   centerTitle: true,
                   title: const Text('Flight Report'),
                   background: Stack(
                     fit: StackFit.expand,
                     children: [
                       Image.network(
                         'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
                         fit: BoxFit.cover,
                       ),
                       const DecoratedBox(
                         decoration: BoxDecoration(
                           gradient: LinearGradient(
                             begin: Alignment(0.0, 0.5),
                             end: Alignment(0.0, 0.0),
                             colors: <Color>[
                               Color(0x60000000),
                               Color(0x00000000),
                             ],
                           ),
                         ),
                       ),
                     ],
                   ),
                 ),
               ),
               SliverList(
                 delegate: SliverChildListDelegate([
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Sunday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Monday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Sunday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Monday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Sunday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Monday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Sunday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Monday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Sunday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Monday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Monday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Monday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Monday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Monday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   ListTile(
                     leading: Icon(Icons.wb_sunny),
                     title: Text('Monday'),
                     subtitle: Text('sunny, h: 80, l: 65'),
                   ),
                   // ListTiles++
                 ]),
               ),
             ],
           ),
         );
  }
}

參考：

Flutter 基礎Widgets之AppBar詳解spa

Flutter 來實現一個漸變色的 AppBar.net

Flutter之AppBar屬性分析

Flutter AppBar設置漸變色背景