Flutter实现仿微信底部菜单栏

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }

}

class MyHomePage extends StatefulWidget{
 MyHomePage({Key key}) : super(key:key);
 @override
 _MyHomePageState createState() => _MyHomePageState();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }


}
class _MyHomePageState extends State<MyHomePage>
{
  int _selectedIndex = 1;//当前选中项的索引
  final _widgetOptions = [
    Text('Index 0: 微信'),
    Text('Index 1: 通讯录'),
    Text('Index 2: 发现'),
    Text('Index 3：我')

  ];



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('仿微信'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),//居中显示某个文本

      ),
      //底部导航按钮,包含图标及文本
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.chat),backgroundColor:Colors.green,title: Text('微信')),//设置背景颜色和icon的描述
          BottomNavigationBarItem(icon: Icon(Icons.contacts),backgroundColor:Colors.green,title: Text('通讯录')),
          BottomNavigationBarItem(icon: Icon(Icons.account_circle),backgroundColor:Colors.green,title: Text('发现')),
          BottomNavigationBarItem(icon: Icon(Icons.memory),backgroundColor:Colors.green,title: Text('我')),
         ],
//        backgroundColor: Colors.green,
        currentIndex: _selectedIndex,//当前选中项的索引
        fixedColor: Colors.deepPurple,//选项中项的颜色
        onTap:_onItemTapped,//选择按下处理

      ),
    );
  }
  //选择按下处理
void _onItemTapped(int index)
{
  setState(() {
    _selectedIndex = index;
  });
}
}