<p>Any widget with a PreferredSize can appear at the bottom of an AppBar.</p> <p><div class="container-fluid]( <div class="row]( <div class="col-md-4]( <div class="panel panel-default]( <div class="panel-body" style="padding: 16px 32px;]( <img style="border:1px solid #000000" src="https://storage.googleapis.com/flutter-catalog/cb4a54db8fb3726bf4293b9cc5cb12ce16883803/app_bar_bottom_small.png "Android screenshot" class="img-responsive](</p> <pre> <div class="panel-footer]( Android screenshot
</pre> <p>Typically an AppBar’s bottom widget is a TabBar however any widget with a PreferredSize can be used. In this app, the app bar’s bottom widget is a TabPageSelector that displays the relative position of the selected page in the app’s TabBarView. The arrow buttons in the toolbar part of the app bar and they select the previous or the next page.</p> <p>Try this app out by creating a new project with <code class="highlighter-rouge](flutter create<code> and replacing the contents of <code class="highlighter-rouge](lib/main.dart</code> with the code that follows.</p> <p><div class="language-dart highlighter-rouge](<pre class="highlight language-dart](<code class=" language-dart](<span class="token comment" spellcheck="true](<span class="c1](// Copyright 2017 The Chromium Authors. All rights reserved. <span class="token comment" spellcheck="true](<span class="c1](// Use of this source code is governed by a BSD-style license that can be <span class="token comment" spellcheck="true](<span class="c1](// found in the LICENSE file.</p> <p><span class="token keyword](<span class="kn](import <span class="token string](<span class="s]('package:flutter/material.dart'<span class="token punctuation](<span class="o](;</p> <p><span class="token keyword](<span class="kd](class <span class="token class-name](<span class="nc](AppBarBottomSample <span class="token keyword](<span class="kd](extends <span class="token class-name](<span class="n](StatefulWidget <span class="token punctuation](<span class="o]({ <span class="token metadata symbol](<span class="nd](@override <span class="n](_AppBarBottomSampleState <span class="token function](<span class="n](createState<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation]( <span class="token operator](<span class="o](<span class="token operator](=<span class="token operator](><span class="token operator]( <span class="token function](<span class="n](_AppBarBottomSampleState<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token punctuation](<span class="o](}</p> <p><span class="token keyword](<span class="kd](class <span class="token class-name](<span class="nc](_AppBarBottomSampleState <span class="token keyword](<span class="kd](extends <span class="token class-name](<span class="n](State<span class="token operator](<span class="o](<<span class="n](AppBarBottomSample<span class="token operator](<span class="o](> <span class="token keyword](<span class="k](with <span class="n](SingleTickerProviderStateMixin <span class="token punctuation](<span class="o]({ <span class="n](TabController <span class="n](_tabController<span class="token punctuation](<span class="o](;</p> <p><span class="token metadata symbol](<span class="nd](@override <span class="token keyword](<span class="kt](void <span class="token function](<span class="n](initState<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation]( <span class="token punctuation](<span class="o]({ <span class="token keyword](<span class="k](super<span class="token punctuation](<span class="o](.<span class="token function](<span class="na](initState<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="n](_tabController <span class="token operator](<span class="o](= <span class="token function](<span class="n](TabController<span class="token punctuation](<span class="o]((<span class="nl](vsync<span class="token punctuation](:<span class="token punctuation]( <span class="token keyword](<span class="k](this<span class="token punctuation](<span class="o](, <span class="nl](length<span class="token punctuation](:<span class="token punctuation]( <span class="n](choices<span class="token punctuation](<span class="o](.<span class="na](length<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token punctuation](<span class="o](}</p> <p><span class="token metadata symbol](<span class="nd](@override <span class="token keyword](<span class="kt](void <span class="token function](<span class="n](dispose<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation]( <span class="token punctuation](<span class="o]({ <span class="n](_tabController<span class="token punctuation](<span class="o](.<span class="token function](<span class="na](dispose<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token keyword](<span class="k](super<span class="token punctuation](<span class="o](.<span class="token function](<span class="na](dispose<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token punctuation](<span class="o](}</p> <p><span class="token keyword](<span class="kt](void <span class="token function](<span class="n](_nextPage<span class="token punctuation](<span class="o]((<span class="kt](int <span class="n](delta<span class="token punctuation](<span class="o]() <span class="token punctuation](<span class="o]({ <span class="token keyword](<span class="kd](final <span class="kt](int <span class="n](newIndex <span class="token operator](<span class="o](= <span class="n](_tabController<span class="token punctuation](<span class="o](.<span class="na](index <span class="token operator](<span class="o](+ <span class="n](delta<span class="token punctuation](<span class="o](; <span class="token keyword](<span class="k](if <span class="token punctuation](<span class="o]((<span class="n](newIndex <span class="token operator](<span class="o](< <span class="token number](<span class="mi](0 <span class="token operator](<span class="o](|| <span class="n](newIndex <span class="token operator](<span class="o](>= <span class="n](_tabController<span class="token punctuation](<span class="o](.<span class="na](length<span class="token punctuation](<span class="o]() <span class="token keyword](<span class="k](return<span class="token punctuation](<span class="o](; <span class="n](_tabController<span class="token punctuation](<span class="o](.<span class="token function](<span class="na](animateTo<span class="token punctuation](<span class="o]((<span class="n](newIndex<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token punctuation](<span class="o](}</p> <p><span class="token metadata symbol](<span class="nd](@override <span class="n](Widget <span class="token function](<span class="n](build<span class="token punctuation](<span class="o]((<span class="n](BuildContext <span class="n](context<span class="token punctuation](<span class="o]() <span class="token punctuation](<span class="o]({ <span class="token keyword](<span class="k](return <span class="token function](<span class="n](MaterialApp<span class="token punctuation](<span class="o](( <span class="nl](home<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](Scaffold<span class="token punctuation](<span class="o](( <span class="nl](appBar<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](AppBar<span class="token punctuation](<span class="o](( <span class="nl](title<span class="token punctuation](:<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](Text<span class="token punctuation](<span class="o]((<span class="token string](<span class="s]('AppBar Bottom Widget'<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="nl](leading<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](IconButton<span class="token punctuation](<span class="o](( <span class="nl](tooltip<span class="token punctuation](:<span class="token punctuation]( <span class="token string](<span class="s]('Previous choice'<span class="token punctuation](<span class="o](, <span class="nl](icon<span class="token punctuation](:<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](Icon<span class="token punctuation](<span class="o]((<span class="n](Icons<span class="token punctuation](<span class="o](.<span class="na](arrow_back<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="nl](onPressed<span class="token punctuation](:<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation]( <span class="token punctuation](<span class="o]({ <span class="token function](<span class="n](_nextPage<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token operator](-<span class="token operator](<span class="token number](<span class="mi](1<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation](}<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="nl](actions<span class="token punctuation](:<span class="token punctuation]( <span class="token operator](<span class="o](<<span class="n](Widget<span class="token operator](<span class="o](<span class="token operator](><span class="token punctuation]([<span class="token punctuation]( <span class="token function](<span class="n](IconButton<span class="token punctuation](<span class="o](( <span class="nl](icon<span class="token punctuation](:<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](Icon<span class="token punctuation](<span class="o]((<span class="n](Icons<span class="token punctuation](<span class="o](.<span class="na](arrow_forward<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="nl](tooltip<span class="token punctuation](:<span class="token punctuation]( <span class="token string](<span class="s]('Next choice'<span class="token punctuation](<span class="o](, <span class="nl](onPressed<span class="token punctuation](:<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation]( <span class="token punctuation](<span class="o]({ <span class="token function](<span class="n](_nextPage<span class="token punctuation](<span class="o]((<span class="token number](<span class="mi](1<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation](}<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation](]<span class="token punctuation](,<span class="token punctuation]( <span class="nl](bottom<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](PreferredSize<span class="token punctuation](<span class="o](( <span class="nl](preferredSize<span class="token punctuation](:<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="n](Size<span class="token punctuation](<span class="o](.<span class="token function](<span class="na](fromHeight<span class="token punctuation](<span class="o]((<span class="token number](<span class="mf](48.0<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="nl](child<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](Theme<span class="token punctuation](<span class="o](( <span class="nl](data<span class="token punctuation](:<span class="token punctuation]( <span class="n](Theme<span class="token punctuation](<span class="o](.<span class="token function](<span class="na](of<span class="token punctuation](<span class="o]((<span class="n](context<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](.<span class="token punctuation](<span class="token function](<span class="na](copyWith<span class="token punctuation](<span class="o]((<span class="nl](accentColor<span class="token punctuation](:<span class="token punctuation]( <span class="n](Colors<span class="token punctuation](<span class="o](.<span class="na](white<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="nl](child<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](Container<span class="token punctuation](<span class="o](( <span class="nl](height<span class="token punctuation](:<span class="token punctuation]( <span class="token number](<span class="mf](48.0<span class="token punctuation](<span class="o](, <span class="nl](alignment<span class="token punctuation](:<span class="token punctuation]( <span class="n](Alignment<span class="token punctuation](<span class="o](.<span class="na](center<span class="token punctuation](<span class="o](, <span class="nl](child<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](TabPageSelector<span class="token punctuation](<span class="o]((<span class="nl](controller<span class="token punctuation](:<span class="token punctuation]( <span class="n](_tabController<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="nl](body<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](TabBarView<span class="token punctuation](<span class="o](( <span class="nl](controller<span class="token punctuation](:<span class="token punctuation]( <span class="n](_tabController<span class="token punctuation](<span class="o](, <span class="nl](children<span class="token punctuation](:<span class="token punctuation]( <span class="n](choices<span class="token punctuation](<span class="o](.<span class="token function](<span class="na](map<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]((<span class="token punctuation](<span class="n](Choice <span class="n](choice<span class="token punctuation](<span class="o]() <span class="token punctuation](<span class="o]({ <span class="token keyword](<span class="k](return <span class="token function](<span class="n](Padding<span class="token punctuation](<span class="o](( <span class="nl](padding<span class="token punctuation](:<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="n](EdgeInsets<span class="token punctuation](<span class="o](.<span class="token function](<span class="na](all<span class="token punctuation](<span class="o]((<span class="token number](<span class="mf](16.0<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="nl](child<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](ChoiceCard<span class="token punctuation](<span class="o]((<span class="nl](choice<span class="token punctuation](:<span class="token punctuation]( <span class="n](choice<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation](}<span class="token punctuation]()<span class="token punctuation](.<span class="token punctuation](<span class="token function](<span class="na](toList<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token punctuation](<span class="o](} <span class="token punctuation](<span class="o](}</p> <p><span class="token keyword](<span class="kd](class <span class="token class-name](<span class="nc](Choice <span class="token punctuation](<span class="o]({ <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](Choice<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]({<span class="token punctuation](<span class="token keyword](<span class="k](this<span class="token punctuation](<span class="o](.<span class="na](title<span class="token punctuation](<span class="o](, <span class="token keyword](<span class="k](this<span class="token punctuation](<span class="o](.<span class="na](icon<span class="token punctuation](<span class="o](<span class="token punctuation](}<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation](</p> <p><span class="token keyword](<span class="kd](final <span class="kt](String <span class="n](title<span class="token punctuation](<span class="o](; <span class="token keyword](<span class="kd](final <span class="n](IconData <span class="n](icon<span class="token punctuation](<span class="o](; <span class="token punctuation](<span class="o](}</p> <p><span class="token keyword](<span class="kd](const <span class="n](List<span class="token operator](<span class="o](<<span class="n](Choice<span class="token operator](<span class="o](> <span class="n](choices <span class="token operator](<span class="o](= <span class="token keyword](<span class="kd](const <span class="token operator](<span class="o](<<span class="n](Choice<span class="token operator](<span class="o](<span class="token operator](><span class="token punctuation]([<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](Choice<span class="token punctuation](<span class="o]((<span class="nl](title<span class="token punctuation](:<span class="token punctuation]( <span class="token string](<span class="s]('CAR'<span class="token punctuation](<span class="o](, <span class="nl](icon<span class="token punctuation](:<span class="token punctuation]( <span class="n](Icons<span class="token punctuation](<span class="o](.<span class="na](directions_car<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](Choice<span class="token punctuation](<span class="o]((<span class="nl](title<span class="token punctuation](:<span class="token punctuation]( <span class="token string](<span class="s]('BICYCLE'<span class="token punctuation](<span class="o](, <span class="nl](icon<span class="token punctuation](:<span class="token punctuation]( <span class="n](Icons<span class="token punctuation](<span class="o](.<span class="na](directions_bike<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](Choice<span class="token punctuation](<span class="o]((<span class="nl](title<span class="token punctuation](:<span class="token punctuation]( <span class="token string](<span class="s]('BOAT'<span class="token punctuation](<span class="o](, <span class="nl](icon<span class="token punctuation](:<span class="token punctuation]( <span class="n](Icons<span class="token punctuation](<span class="o](.<span class="na](directions_boat<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](Choice<span class="token punctuation](<span class="o]((<span class="nl](title<span class="token punctuation](:<span class="token punctuation]( <span class="token string](<span class="s]('BUS'<span class="token punctuation](<span class="o](, <span class="nl](icon<span class="token punctuation](:<span class="token punctuation]( <span class="n](Icons<span class="token punctuation](<span class="o](.<span class="na](directions_bus<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](Choice<span class="token punctuation](<span class="o]((<span class="nl](title<span class="token punctuation](:<span class="token punctuation]( <span class="token string](<span class="s]('TRAIN'<span class="token punctuation](<span class="o](, <span class="nl](icon<span class="token punctuation](:<span class="token punctuation]( <span class="n](Icons<span class="token punctuation](<span class="o](.<span class="na](directions_railway<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](Choice<span class="token punctuation](<span class="o]((<span class="nl](title<span class="token punctuation](:<span class="token punctuation]( <span class="token string](<span class="s]('WALK'<span class="token punctuation](<span class="o](, <span class="nl](icon<span class="token punctuation](:<span class="token punctuation]( <span class="n](Icons<span class="token punctuation](<span class="o](.<span class="na](directions_walk<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation](]<span class="token punctuation](;<span class="token punctuation](</p> <p><span class="token keyword](<span class="kd](class <span class="token class-name](<span class="nc](ChoiceCard <span class="token keyword](<span class="kd](extends <span class="token class-name](<span class="n](StatelessWidget <span class="token punctuation](<span class="o]({ <span class="token keyword](<span class="kd](const <span class="token function](<span class="n](ChoiceCard<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]({<span class="token punctuation](<span class="n](Key <span class="n](key<span class="token punctuation](<span class="o](, <span class="token keyword](<span class="k](this<span class="token punctuation](<span class="o](.<span class="na](choice<span class="token punctuation](<span class="o](<span class="token punctuation](}<span class="token punctuation]()<span class="token punctuation]( <span class="token punctuation](<span class="o](: <span class="token keyword](<span class="k](super<span class="token punctuation](<span class="o]((<span class="nl](key<span class="token punctuation](:<span class="token punctuation]( <span class="n](key<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation](</p> <p><span class="token keyword](<span class="kd](final <span class="n](Choice <span class="n](choice<span class="token punctuation](<span class="o](;</p> <p><span class="token metadata symbol](<span class="nd](@override <span class="n](Widget <span class="token function](<span class="n](build<span class="token punctuation](<span class="o]((<span class="n](BuildContext <span class="n](context<span class="token punctuation](<span class="o]() <span class="token punctuation](<span class="o]({ <span class="token keyword](<span class="kd](final <span class="n](TextStyle <span class="n](textStyle <span class="token operator](<span class="o](= <span class="n](Theme<span class="token punctuation](<span class="o](.<span class="token function](<span class="na](of<span class="token punctuation](<span class="o]((<span class="n](context<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](.<span class="token punctuation](<span class="na](textTheme<span class="token punctuation](<span class="o](.<span class="na](display1<span class="token punctuation](<span class="o](; <span class="token keyword](<span class="k](return <span class="token function](<span class="n](Card<span class="token punctuation](<span class="o](( <span class="nl](color<span class="token punctuation](:<span class="token punctuation]( <span class="n](Colors<span class="token punctuation](<span class="o](.<span class="na](white<span class="token punctuation](<span class="o](, <span class="nl](child<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](Center<span class="token punctuation](<span class="o](( <span class="nl](child<span class="token punctuation](:<span class="token punctuation]( <span class="token function](<span class="n](Column<span class="token punctuation](<span class="o](( <span class="nl](mainAxisSize<span class="token punctuation](:<span class="token punctuation]( <span class="n](MainAxisSize<span class="token punctuation](<span class="o](.<span class="na](min<span class="token punctuation](<span class="o](, <span class="nl](crossAxisAlignment<span class="token punctuation](:<span class="token punctuation]( <span class="n](CrossAxisAlignment<span class="token punctuation](<span class="o](.<span class="na](center<span class="token punctuation](<span class="o](, <span class="nl](children<span class="token punctuation](:<span class="token punctuation]( <span class="token operator](<span class="o](<<span class="n](Widget<span class="token operator](<span class="o](<span class="token operator](><span class="token punctuation]([<span class="token punctuation]( <span class="token function](<span class="n](Icon<span class="token punctuation](<span class="o]((<span class="n](choice<span class="token punctuation](<span class="o](.<span class="na](icon<span class="token punctuation](<span class="o](, <span class="nl](size<span class="token punctuation](:<span class="token punctuation]( <span class="token number](<span class="mf](128.0<span class="token punctuation](<span class="o](, <span class="nl](color<span class="token punctuation](:<span class="token punctuation]( <span class="n](textStyle<span class="token punctuation](<span class="o](.<span class="na](color<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token function](<span class="n](Text<span class="token punctuation](<span class="o]((<span class="n](choice<span class="token punctuation](<span class="o](.<span class="na](title<span class="token punctuation](<span class="o](, <span class="nl](style<span class="token punctuation](:<span class="token punctuation]( <span class="n](textStyle<span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation](]<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](,<span class="token punctuation]( <span class="token punctuation](<span class="o](<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token punctuation](<span class="o](} <span class="token punctuation](<span class="o](}</p> <p><span class="token keyword](<span class="kt](void <span class="token function](<span class="nf](main<span class="token punctuation](<span class="p]((<span class="token punctuation](<span class="o]() <span class="token punctuation](<span class="o]({ <span class="token function](<span class="n](runApp<span class="token punctuation](<span class="o]((<span class="token function](<span class="n](AppBarBottomSample<span class="token punctuation](<span class="o](<span class="token punctuation]((<span class="token punctuation]()<span class="token punctuation]()<span class="token punctuation](;<span class="token punctuation]( <span class="token punctuation](<span class="o](} `</pre></p> <h2 id="see-also">See also:</h2> <ul> <li>The “Components-Tabs” section of the Material Design specification: <a href="https://material.io/guidelines/components/tabs.html">https://material.io/guidelines/components/tabs.html</a>- The source code in <a href="examples/catalog/lib/app_bar_bottom.dart">https://github.com/flutter/flutter/blob/master/examples/catalog/lib/app_bar_bottom.dart</a>.Credits: This article was initially posted in Flutter.io.</li> </ul>