1. import 'package:flutter/material.dart';
    2. import 'home.dart';
    3. import 'search.dart';
    4. import 'me.dart';
    5. import 'detail.dart';
    6. import 'news.dart';
    8. class MyBottomNavigationBar extends StatefulWidget {
    9.     final int index;
    10.     MyBottomNavigationBar({this.index = 0});
    12.     @override
    13.     _MyBottomNavigationBarState createState() =>
    14.         _MyBottomNavigationBarState(this.index);
    15. }
    17. class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
    18.     _MyBottomNavigationBarState(index) {
    19.         this._currentIndex = index;
    20.     }
    21.     int _currentIndex = 0;
    23.     List _pageList = [
    24.         HomePage(),
    25.         SearchPage(),
    26.         DetailPage(),
    27.         NewsPage(),
    28.         MePage(),
    29.     ];
    31.     @override
    32.     Widget build(BuildContext context) {
    33.         return Scaffold(
    34.             appBar: AppBar(
    35.                 title: Text('Lynn'),
    36.             ),
    37.             floatingActionButton: FloatingActionButton(
    38.                 onPressed: () {
    39.                     setState(() {
    40.                         this._currentIndex = 2;
    41.                     });
    42.                 },
    43.                 child: Icon(
    44.                     Icons.add,
    45.                     color: Colors.white,
    46.                 ),
    47.             ),
    48.             floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    49.             body: this._pageList[this._currentIndex],
    50.             bottomNavigationBar: BottomNavigationBar(
    51.                 currentIndex: _currentIndex,
    52.                 onTap: (int index) {
    53.                     setState(() {
    54.                         if(index == 2) return; // 如果你想要独立这个按钮的事件， 可以把这个事件禁止，这样就不会出现该页面
    55.                         this._currentIndex = index;
    56.                     });
    57.                 },
    58.                 // iconSize: 20,
    59.                 // fixedColor: Colors.pink,
    60.                 type: BottomNavigationBarType.fixed, // 配置多个tabItem
    61.                 items: [
    62.                     BottomNavigationBarItem(
    63.                         icon: Icon(Icons.home),
    64.                         label: '首页',
    65.                     ),
    66.                     BottomNavigationBarItem(
    67.                         icon: Icon(Icons.search),
    68.                         label: '搜索',
    69.                     ),
    70.                     BottomNavigationBarItem(
    71.                         icon: Icon(Icons.home, color: Colors.white.withOpacity(0.05)),
    72.                         label: '详情',
    73.                     ),
    74.                     BottomNavigationBarItem(
    75.                         icon: Icon(Icons.forum),
    76.                         label: '新闻',
    77.                     ),
    78.                     BottomNavigationBarItem(
    79.                         icon: Icon(Icons.near_me),
    80.                         label: '我的',
    81.                     ),
    82.                 ],
    83.             ),
    84.         );
    85.     }
    86. }

    底部导航凹进去的布局：

    1. import 'package:flutter/material.dart';
    2. import 'home.dart';
    3. import 'search.dart';
    4. import 'me.dart';
    5. import 'detail.dart';
    6. import 'news.dart';
    8. class MyBottomNavigationBar extends StatefulWidget {
    9.     final int index;
    10.     MyBottomNavigationBar({this.index = 0});
    12.     @override
    13.     _MyBottomNavigationBarState createState() =>
    14.         _MyBottomNavigationBarState(this.index);
    15. }
    17. class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
    18.     _MyBottomNavigationBarState(index) {
    19.         this._currentIndex = index;
    20.     }
    21.     int _currentIndex = 0;
    23.     List _pageList = [
    24.         HomePage(),
    25.         SearchPage(),
    26.         DetailPage(),
    27.         NewsPage(),
    28.         MePage(),
    29.     ];
    31.     void onPageChanged(int value) {
    32.         setState(() {
    33.             this._currentIndex = value;
    34.         });
    35.     }
    37.     Color getColor(int value) {
    38.         return this._currentIndex == value
    39.             ? Theme.of(context).cardColor
    40.             : Color(0XFFBBBBBB);
    41.     }
    43.     @override
    44.     Widget build(BuildContext context) {
    45.         return Scaffold(
    46.             appBar: AppBar(
    47.                 title: Text('Lynn'),
    48.             ),
    49.             floatingActionButton: FloatingActionButton(
    50.                 onPressed: () {
    51.                     setState(() {
    52.                         this._currentIndex = 2;
    53.                     });
    54.                 },
    55.                 child: Icon(
    56.                     Icons.add,
    57.                     color: Colors.white,
    58.                 ),
    59.             ),
    60.             floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    61.             body: this._pageList[this._currentIndex],
    62.             // BottomAppBar 组件 配置 shape: CircularNotchedRectangle(), 这样就会在中间有个 凹进入的半圆用于放FloatingActionButton按钮
    63.             bottomNavigationBar: BottomAppBar(
    64.                 color: Theme.of(context).accentColor,
    65.                 shape: CircularNotchedRectangle(),
    66.                 child: Padding(
    67.                     padding: EdgeInsets.fromLTRB(0, 6, 0, 6),
    68.                     child: Row(
    69.                         mainAxisSize: MainAxisSize.max,
    70.                         mainAxisAlignment: MainAxisAlignment.spaceAround,
    71.                         children: [
    72.                             GestureDetector(
    73.                                 onTap: () {
    74.                                     onPageChanged(0);
    75.                                 },
    76.                                 child: Column(
    77.                                     mainAxisSize: MainAxisSize.min,
    78.                                     children: <Widget>[
    79.                                         Icon(Icons.home, color: getColor(0)),
    80.                                         Text("首页", style: TextStyle(color: getColor(0)))
    81.                                     ],
    82.                                 )),
    83.                             GestureDetector(
    84.                                 onTap: () {
    85.                                     onPageChanged(1);
    86.                                 },
    87.                                 child: Column(
    88.                                     mainAxisSize: MainAxisSize.min,
    89.                                     children: <Widget>[
    90.                                         Icon(Icons.search, color: getColor(1)),
    91.                                         Text("搜索", style: TextStyle(color: getColor(1)))
    92.                                     ],
    93.                                 )),
    94.                             GestureDetector(
    95.                                 onTap: () {
    96.                                     onPageChanged(2);
    97.                                 },
    98.                                 child: Column(
    99.                                     mainAxisSize: MainAxisSize.min,
    100.                                     children: <Widget>[
    101.                                         Icon(Icons.home, color: getColor(2)),
    102.                                         Text("详情", style: TextStyle(color: getColor(2)))
    103.                                     ],
    104.                                 )),
    105.                             GestureDetector(
    106.                                 onTap: () {
    107.                                     onPageChanged(3);
    108.                                 },
    109.                                 child: Column(
    110.                                     mainAxisSize: MainAxisSize.min,
    111.                                     children: <Widget>[
    112.                                         Icon(Icons.forum, color: getColor(3)),
    113.                                         Text("新闻", style: TextStyle(color: getColor(3)))
    114.                                     ],
    115.                                 )),
    116.                             GestureDetector(
    117.                                 onTap: () {
    118.                                     onPageChanged(4);
    119.                                 },
    120.                                 child: Column(
    121.                                     mainAxisSize: MainAxisSize.min,
    122.                                     children: <Widget>[
    123.                                         Icon(Icons.near_me, color: getColor(4)),
    124.                                         Text("我的", style: TextStyle(color: getColor(4)))
    125.                                     ],
    126.                                 )),
    127.                         ],
    128.                     ),
    129.                 ),
    130.             ),
    131.         );
    132.     }
    133. }

    底部导航左右滑动页面切换：

    1. import 'package:flutter/material.dart';
    2. import 'home.dart';
    3. import 'search.dart';
    4. import 'me.dart';
    5. import 'detail.dart';
    6. import 'news.dart';
    8. class MyBottomNavigationBar extends StatefulWidget {
    9.     final int index;
    10.     MyBottomNavigationBar({this.index = 0});
    12.     @override
    13.     _MyBottomNavigationBarState createState() =>
    14.         _MyBottomNavigationBarState(this.index);
    15. }
    17. class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
    18.     _MyBottomNavigationBarState(index) {
    19.         this._currentIndex = index;
    20.     }
    21.     PageController pageController; // 控制器
    22.     int _currentIndex = 0;
    24.     List _pageList = <Widget>[
    25.         HomePage(),
    26.         SearchPage(),
    27.         DetailPage(),
    28.         NewsPage(),
    29.         MePage(),
    30.     ];
    32.     @override
    33.     void initState() {
    34.         super.initState();
    35.         // 初始化 pageController ， 默认显示第一个页面
    36.         pageController = PageController(initialPage: this._currentIndex);
    37.     }
    39.     // 定义页面切换方法
    40.     void onPageChanged(int value) {
    41.         setState(() {
    42.             this._currentIndex = value;
    43.         });
    44.     }
    46.     Color getColor(int value) {
    47.         return this._currentIndex == value
    48.             ? Theme.of(context).cardColor
    49.             : Color(0XFFBBBBBB);
    50.     }
    52.     // 点击 tabbar 切换页面 需要使用 pageController.animateToPage ， 传递页面的索引值。
    53.     void onTap(int value) {
    54.         pageController.animateToPage(value,
    55.                                      duration: const Duration(milliseconds: 100), curve: Curves.ease);
    56.     }
    58.     @override
    59.     Widget build(BuildContext context) {
    60.         return Scaffold(
    61.             appBar: AppBar(
    62.                 title: Text('Lynn'),
    63.             ),
    64.             floatingActionButton: FloatingActionButton(
    65.                 onPressed: () {
    66.                     setState(() {
    67.                         onTap(2);
    68.                     });
    69.                 },
    70.                 child: Icon(
    71.                     Icons.add,
    72.                     color: Colors.white,
    73.                 ),
    74.             ),
    75.             floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    76.             // 利用 PageView 实现页面左右滑动切换
    77.             body: PageView(
    78.                 children: _pageList,
    79.                 onPageChanged: onPageChanged, // 切换页面的方法
    80.                 controller: pageController, // 页面控制器 
    81.             ),
    82.             bottomNavigationBar: BottomAppBar(
    83.                 color: Theme.of(context).accentColor,
    84.                 shape: CircularNotchedRectangle(), // 凹园
    85.                 child: Padding(
    86.                     padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
    87.                     child: Row(
    88.                         mainAxisSize: MainAxisSize.max,
    89.                         mainAxisAlignment: MainAxisAlignment.spaceAround,
    90.                         children: [
    91.                             // GestureDetector 手势检测器
    92.                             GestureDetector(
    93.                                 // 定义点击事件
    94.                                 onTap: () {
    95.                                     onTap(0); // 调用方法
    96.                                 },
    97.                                 child: Column(
    98.                                     mainAxisSize: MainAxisSize.min,
    99.                                     children: <Widget>[
    100.                                         Icon(Icons.home, color: getColor(0)),
    101.                                         Text("首页", style: TextStyle(color: getColor(0)))
    102.                                     ],
    103.                                 )),
    104.                             GestureDetector(
    105.                                 onTap: () {
    106.                                     onTap(1);
    107.                                 },
    108.                                 child: Column(
    109.                                     mainAxisSize: MainAxisSize.min,
    110.                                     children: <Widget>[
    111.                                         Icon(Icons.search, color: getColor(1)),
    112.                                         Text("搜索", style: TextStyle(color: getColor(1)))
    113.                                     ],
    114.                                 )),
    115.                             GestureDetector(
    116.                                 onTap: () {
    117.                                     onTap(2);
    118.                                 },
    119.                                 child: Column(
    120.                                     mainAxisSize: MainAxisSize.min,
    121.                                     children: <Widget>[
    122.                                         Icon(Icons.home, color: Colors.transparent), // 设置透明
    123.                                         Text("详情", style: TextStyle(color: getColor(2)))
    124.                                     ],
    125.                                 )),
    126.                             GestureDetector(
    127.                                 onTap: () {
    128.                                     onTap(3);
    129.                                 },
    130.                                 child: Column(
    131.                                     mainAxisSize: MainAxisSize.min,
    132.                                     children: <Widget>[
    133.                                         Icon(Icons.forum, color: getColor(3)),
    134.                                         Text("新闻", style: TextStyle(color: getColor(3)))
    135.                                     ],
    136.                                 )),
    137.                             GestureDetector(
    138.                                 onTap: () {
    139.                                     onTap(4);
    140.                                 },
    141.                                 child: Column(
    142.                                     mainAxisSize: MainAxisSize.min,
    143.                                     children: <Widget>[
    144.                                         Icon(Icons.near_me, color: getColor(4)),
    145.                                         Text("我的", style: TextStyle(color: getColor(4)))
    146.                                     ],
    147.                                 )),
    148.                         ],
    149.                     ),
    150.                 ),
    151.             ),
    152.         );
    153.     }
    154. }