说明

在现有市面的应用中，底部导航栏几乎是个必备的控件，因此熟悉它的使用就很必要。不过flutter中，底部导航栏是比较好实现的，flutter为我们提供了一个控件BottomNavigationBar，直接使用就好，不像安卓等需要再自己造轮子。其实官方还提供了2种控件CupertinoTabBar和CupertinoTabBarScaffold如下图，但是我们主要是看BottomNavigationBar。

BottomNavigationBar
Other tab bar

BottomNavigationBar简介

BottomNavigationBar({
    Key? key,
    required this.items, //必填项，长度必须至少为两个，每个项目的图标和标签不能为null
    this.onTap, //点击事件
    this.currentIndex = 0, //当前选中item下标
    this.elevation, //控制阴影z坐标高度，如果是null，默认为8.0
    this.type, //BottomNavigationBarType，默认 fixed，设置为 shifting 时，需要设置选中样式，和未选中样式，提供一个特殊动画
    Color? fixedColor, //选中 item 填充色
    this.backgroundColor, //整个BottomNavigationBar 背景色
    this.iconSize = 24.0, //图标大小
    Color? selectedItemColor, //选中title填充色，fixedColor,selectedItemColor只能2选1，优先用selectedItemColor
    this.unselectedItemColor, //未选中title填充色
    this.selectedIconTheme, //选中item图标主题
    this.unselectedIconTheme, //未选中item图标主题
    this.selectedFontSize = 14.0, //选中title字体大小
    this.unselectedFontSize = 12.0, //未选中title字体大小
    this.selectedLabelStyle, //选中title样式 TextStyle
    this.unselectedLabelStyle, //未选中title样式 TextStyle
    this.showSelectedLabels, //是否展示选中title，默认为true
    this.showUnselectedLabels, //是否展示未选中title，默认为true
    this.mouseCursor, //鼠标悬停
    this.enableFeedback,//是否有反馈，类似回调
    this.landscapeLayout,//展示样式，有3种，spread，centered，linear，默认为spread
  }) 

部分注意事项

1，显示在应用程序底部的材料小部件，用于在少量视图中进行选择，通常在三到五个之间。
2，底部导航栏由文本标签、图标或两者形式的多个项目组成，布置在一块材料的顶部。它在应用程序的顶级视图之间提供快速导航。对于更大的屏幕，侧边导航可能更合适。
3，底部导航栏通常与Scaffold一起使用，它作为参数提供。
4，底部导航栏的类型会更改其item的显示方式。如果未指定，则 在少于四个项目时 自动设置为fixed ，否则设置为shifting。
5，items的长度必须至少为两个，并且每个项目的图标和标题/标签不得为空。

• BottomNavigationBarType.fixed，少于四个[项目]时的默认值。如果所选项目不为空，则使用selectedItemColor呈现所选项目 ，否则主题的 ColorScheme.primary颜色用于Brightness.light主题和ColorScheme.secondary用于Brightness.dark主题。如果backgroundColor为 null，则导航栏的背景颜色默认为Material背景颜色[ThemeData.canvasColor（本质上是不透明的白色）。
• BottomNavigationBarType.shifting，当有四个或更多[项目]时默认。如果selectedItemColor为 null，则所有项目都呈现为白色。导航栏的背景颜色与 选中项的BottomNavigationBarItem.backgroundColor相同。]在这种情况下，假设每个项目将具有不同的背景颜色，并且背景颜色将与白色形成鲜明对比。

使用，官方demo如下

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

凸起特效

凸起效果

要实现这种效果可以用FloatingActionButton来实现中间的凸起部分，这里就不详细赘述了，具体可参考demo中实现

代码地址：

https://github.com/liuyewu101/flutter_demo

底部导航栏的部分就先写到这，以后有新东西再补充