flutter的底部导航栏

今天学习了底部导航栏，并且实现了功能

image.png

或者是下面效果：

image.png

实现的功能还是比较好看的，代码如下：

import 'package:flutter/material.dart';


/**
 * flutter 入门
 */
void main() {
  runApp(myApp());
}

class myApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'fade demo',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: homeContent()
    );
  }
}

class homeContent extends StatefulWidget{

  @override
  State<StatefulWidget> createState() => _BottomNavigationBar();

}

class _BottomNavigationBar extends State<homeContent>{

  int _selectIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.access_alarms,color: Colors.black,),
              title: Text("微信"),
              activeIcon: Icon(Icons.access_alarms,color: Colors.blue,)
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.access_alarms,color: Colors.black,),
              title: Text("通讯录"),
              activeIcon: Icon(Icons.access_alarms,color: Colors.blue,)
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.access_alarms,color: Colors.black,),
              title: Text("发现"),
              activeIcon: Icon(Icons.access_alarms,color: Colors.blue,)
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.access_alarms,color: Colors.black,),
              title: Text("我"),
              activeIcon: Icon(Icons.access_alarms,color: Colors.blue,)
          )
        ],
        iconSize: 24,
        currentIndex: _selectIndex,
        onTap: (index){
          setState(() {
            _selectIndex = index;
          });
        },
        fixedColor: Colors.green,
        type: BottomNavigationBarType.shifting,
      ),
    );
  }

}