import 'package:flutter/material.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _currentIndex = 0;//选中Item时发生变化
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          onTap: (int index){//点击事件,代理方法
            _currentIndex =  index;//赋值当前索引
            setState(() {});
          },
          type: BottomNavigationBarType.fixed,//设置系统样式
          fixedColor: Colors.green,//设置选中颜色
          currentIndex: _currentIndex,//当前索引
          items:<BottomNavigationBarItem> [
            BottomNavigationBarItem(
                icon: Icon(Icons.chat),
                title: Text('微信')
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.bookmark),
                title: Text('通讯录')
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.history),
                title: Text('发现')
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.person_outline),
                title: Text('我')
            ),

          ],
        ),
      ),
    );
  }
}

效果图

BottomNavigationBar使用

BottomNavigationBarItem 切换

import 'package:flutter/material.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  List<Widget> pages = [
    Scaffold(
      appBar: AppBar(
        title: Text("微信"),
      ),
      body: Center(
        child: Text("微信页面"),
      ),
    ),
    Scaffold(
      appBar: AppBar(
        title: Text("通讯录"),
      ),
      body: Center(
        child: Text("通讯录页面"),
      ),
    ),
    Scaffold(
      appBar: AppBar(
        title: Text("发现"),
      ),
      body: Center(
        child: Text("发现页面"),
      ),
    ),
    Scaffold(
      appBar: AppBar(
        title: Text("我"),
      ),
      body: Center(
        child: Text("我页面"),
      ),
    )
  ];
  int _currentIndex = 0; //选中Item时发生变化
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          onTap: (int index) {
            //点击事件,代理方法
            _currentIndex = index; //赋值当前索引
            setState(() {});
          },
          type: BottomNavigationBarType.fixed,
          //设置系统样式
          fixedColor: Colors.green,
          //设置选中颜色
          currentIndex: _currentIndex,
          //当前索引
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('微信')),
            BottomNavigationBarItem(
                icon: Icon(Icons.bookmark), title: Text('通讯录')),
            BottomNavigationBarItem(
                icon: Icon(Icons.history), title: Text('发现')),
            BottomNavigationBarItem(
                icon: Icon(Icons.person_outline), title: Text('我')),
          ],
        ),
        body: pages[_currentIndex],
      ),
    );
  }
}

效果图

BottomNavigationBarItem 切换