Flutter底部导航制作

1、main.dart加入如下代码

import 'package:flutter/material.dart';
import 'ButtomNavigationWidget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter底部导航',
      theme:ThemeData.light(),
      home:ButtomNavigationWidget()
    );
  }
}

2、ButtomNavigationWidget动态路由组件

import 'package:flutter/material.dart';

// 引入页面
import 'pages/home.dart';
import 'pages/emial.dart';
import 'pages/pages.dart';
import 'pages/airplay.dart';


class ButtomNavigationWidget extends StatefulWidget {
  _ButtomNavigationWidgetState createState() => _ButtomNavigationWidgetState();
}

class _ButtomNavigationWidgetState extends State<ButtomNavigationWidget> {
  
  final _BottomNavigationColor = Colors.blue;
  int _createIndex = 0;
  List<Widget> list = List();

  @override
  void initState() { 
    list
      ..add(HomePage())
      ..add(EmialPage())
      ..add(PagesPage())
      ..add(AirplayPage());

         super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:list[_createIndex],
        bottomNavigationBar:BottomNavigationBar(
          items:[
            BottomNavigationBarItem(
              icon:Icon(
                Icons.home,
                color:_BottomNavigationColor
              ),
              title:Text(
                'Home',
                style:TextStyle(color: _BottomNavigationColor)
              )
            ),
            BottomNavigationBarItem(
              icon:Icon(
                Icons.email,
                color:_BottomNavigationColor
              ),
              title:Text(
                'Emial',
                style:TextStyle(color: _BottomNavigationColor)
              )
            ),
            BottomNavigationBarItem(
              icon:Icon(
                Icons.pages,
                color:_BottomNavigationColor
              ),
              title:Text(
                'Pages',
                style:TextStyle(color: _BottomNavigationColor)
              )
            ),
            BottomNavigationBarItem(
              icon:Icon(
                Icons.airplay,
                color:_BottomNavigationColor
              ),
              title:Text(
                'airPlay',
                style:TextStyle(color: _BottomNavigationColor)
              )
            )
          ],
          currentIndex:_createIndex,
          //设置当前选中角标
          onTap: (int index){
              setState(() {
                _createIndex = index;
              });
          },
        )
    );
  }
}

3、有几个导航就建几个页面

4、其中一个页面的代码

import 'package:flutter/material.dart';

class PagesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(title:Text('pages页面')),
      body:Center(child:Text('pages页面'))
    );
  }
}