任何具有PreferredSize的widget都可以出现在AppBar的底部。

    Android screenshot
    Android screenshot

    通常，AppBar的底部widget是TabBar，但是可以使用具有PreferredSize的任何widget。在这个应用程序中，应用程序栏的底部widget是一个TabPageSelector，用于显示应用程序的TabBarView中所选页面的相对位置。 可以通过工具栏部中的箭头按钮，选择上一页或下一页。

    通过flutter create命令创建一个新项目，并用下面的代码替换lib/main.dart的内容来尝试运行一下。

    1. // Copyright 2017 The Chromium Authors. All rights reserved.
    2. // Use of this source code is governed by a BSD-style license that can be
    3. // found in the LICENSE file.
    5. import 'package:flutter/material.dart';
    7. class AppBarBottomSample extends StatefulWidget {
    8.   @override
    9.   _AppBarBottomSampleState createState() => new _AppBarBottomSampleState();
    10. }
    12. class _AppBarBottomSampleState extends State<AppBarBottomSample> with SingleTickerProviderStateMixin {
    13.   TabController _tabController;
    15.   @override
    16.   void initState() {
    17.     super.initState();
    18.     _tabController = new TabController(vsync: this, length: choices.length);
    19.   }
    21.   @override
    22.   void dispose() {
    23.     _tabController.dispose();
    24.     super.dispose();
    25.   }
    27.   void _nextPage(int delta) {
    28.     final int newIndex = _tabController.index + delta;
    29.     if (newIndex < 0 || newIndex >= _tabController.length)
    30.       return;
    31.     _tabController.animateTo(newIndex);
    32.   }
    34.   @override
    35.   Widget build(BuildContext context) {
    36.     return new MaterialApp(
    37.       home: new Scaffold(
    38.         appBar: new AppBar(
    39.           title: const Text('AppBar Bottom Widget'),
    40.           leading: new IconButton(
    41.             tooltip: 'Previous choice',
    42.             icon: const Icon(Icons.arrow_back),
    43.             onPressed: () { _nextPage(-1); },
    44.           ),
    45.           actions: <Widget>[
    46.             new IconButton(
    47.               icon: const Icon(Icons.arrow_forward),
    48.               tooltip: 'Next choice',
    49.               onPressed: () { _nextPage(1); },
    50.             ),
    51.           ],
    52.           bottom: new PreferredSize(
    53.             preferredSize: const Size.fromHeight(48.0),
    54.             child: new Theme(
    55.               data: Theme.of(context).copyWith(accentColor: Colors.white),
    56.               child: new Container(
    57.                 height: 48.0,
    58.                 alignment: Alignment.center,
    59.                 child: new TabPageSelector(controller: _tabController),
    60.               ),
    61.             ),
    62.           ),
    63.         ),
    64.         body: new TabBarView(
    65.           controller: _tabController,
    66.           children: choices.map((Choice choice) {
    67.             return new Padding(
    68.               padding: const EdgeInsets.all(16.0),
    69.               child: new ChoiceCard(choice: choice),
    70.             );
    71.           }).toList(),
    72.         ),
    73.       ),
    74.     );
    75.   }
    76. }
    78. class Choice {
    79.   const Choice({ this.title, this.icon });
    80.   final String title;
    81.   final IconData icon;
    82. }
    84. const List<Choice> choices = const <Choice>[
    85.   const Choice(title: 'CAR', icon: Icons.directions_car),
    86.   const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
    87.   const Choice(title: 'BOAT', icon: Icons.directions_boat),
    88.   const Choice(title: 'BUS', icon: Icons.directions_bus),
    89.   const Choice(title: 'TRAIN', icon: Icons.directions_railway),
    90.   const Choice(title: 'WALK', icon: Icons.directions_walk),
    91. ];
    93. class ChoiceCard extends StatelessWidget {
    94.   const ChoiceCard({ Key key, this.choice }) : super(key: key);
    96.   final Choice choice;
    98.   @override
    99.   Widget build(BuildContext context) {
    100.     final TextStyle textStyle = Theme.of(context).textTheme.display1;
    101.     return new Card(
    102.       color: Colors.white,
    103.       child: new Center(
    104.         child: new Column(
    105.           mainAxisSize: MainAxisSize.min,
    106.           crossAxisAlignment: CrossAxisAlignment.center,
    107.           children: <Widget>[
    108.             new Icon(choice.icon, size: 128.0, color: textStyle.color),
    109.             new Text(choice.title, style: textStyle),
    110.           ],
    111.         ),
    112.       ),
    113.     );
    114.   }
    115. }
    117. void main() {
    118.   runApp(new AppBarBottomSample());
    119. }

    也可以看看: