Flutter 底部Tab导航栏

main文件

import 'package:flutter/material.dart';
import 'BottonWidget.dart';
main(){
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      
      theme: ThemeData.light(),

      // 导航栏主文件
      home: BottonWidget(),
    );
  }
}

BottonWidget文件

import 'package:flutter/material.dart';
// 引入四个文件
import 'home.dart';
import 'email.dart';
import 'pages.dart';
import 'airplay.dart';

// 动态的Widget
class BottonWidget extends StatefulWidget {
  BottonWidget({Key key}) : super(key: key);

  _BottonWidgetState createState() => _BottonWidgetState();
}

class _BottonWidgetState extends State<BottonWidget> {

  // 设置定义颜色变量
  final _Color = Colors.lightBlue;
  // 设置初始化的索引
  int _currentIndex = 0;

  List<Widget> lists =  List();
  // 重写方法 把四个文件添加到lists里面
  @override
  void initState() {
    lists
        ..add(Home())
        ..add(Email())
        ..add(Pages())
        ..add(Airplay());
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 根据用户点击的索引显示不同的内容
      body: lists[_currentIndex],

      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            // 设置图标,颜色和文字
            icon: Icon(
              Icons.home,
              color: _Color,
            ),
            title: Text('home',style: TextStyle(color: _Color),),
          ),
            BottomNavigationBarItem(
            icon: Icon(
              Icons.email,
              color: _Color,
            ),
            title: Text('email',style: TextStyle(color: _Color),),
          ),
            BottomNavigationBarItem(
            icon: Icon(
              Icons.pages,
              color: _Color,
            ),
            title: Text('pages',style: TextStyle(color: _Color),),
          ),
            BottomNavigationBarItem(
            icon: Icon(
              Icons.airplay,
              color: _Color,
            ),
            title: Text('airplay',style: TextStyle(color: _Color),),
          ),
        ],

        // 点击哪个高亮
        currentIndex: _currentIndex,

        // 用户点击哪个把索引赋值给 _currentIndex
        onTap: (int index){
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

四个要显示的文件

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home'),),
      body: Center(
        child: Text('我是home'),
      ),
    );
  }
}



import 'package:flutter/material.dart';

class Email extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Email'),),
      body: Center(
        child: Text('我是email'),
      ),
    );
  }
}



import 'package:flutter/material.dart';

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


import 'package:flutter/material.dart';
class Airplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Airplay'),),
      body: Center(
        child: Text('我是airplay'),
      ),
    );
  }
}