底部导航的应用BottomNavigationBar

 新建项目所需的文件，效果如图所示

 

先写入口文件main.dart的代码如下 

import 'package:flutter/material.dart';
import 'bottom_navigation_widget.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter bottomNavigationBar',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomNavigationWidget(),
    );
  }
}

 

再写主页面bottom_navigation_widget.dart的代码，如下：

import 'package:flutter/material.dart';
import 'pages/home_screen.dart';
import 'pages/email_screen.dart';
import 'pages/checkout_screen.dart';
import 'pages/mine_screen.dart';

class BottomNavigationWidget extends StatefulWidget {
  @override
  State createState() => BottomNavigationWidgetState();
}

class BottomNavigationWidgetState extends State {
  final _bottomNavigationColor = Colors.blue;
  int _currentIndex = 0;
  List list = List();

  @override
  void initState() {
    list
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(CheckoutScreen())
      ..add(MineScreen());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: _bottomNavigationColor,
              ),
              title: Text(
                '首页',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.email,
                color: _bottomNavigationColor,
              ),
              title: Text(
                '邮箱',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.pages,
                color: _bottomNavigationColor,
              ),
              title: Text(
                '检查',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.airplay,
                color: _bottomNavigationColor,
              ),
              title: Text(
                '我的',
                style: TextStyle(color: _bottomNavigationColor),
              )),
        ],
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        type: BottomNavigationBarType.shifting,
      ),
    );
  }
}

 再写分页面home_screen.dart的代码如下

import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("首页"),
      ),
      body: new Container(
        color: Colors.pinkAccent,
      ),
    );
  }
}

 再写分页面email_screen.dart的代码如下

import 'package:flutter/material.dart';
class EmailScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("邮箱"),
      ),
      body: new Container(
        color: Colors.red,
      ),
    );
  }
}

 

 再写分页面checkout_screen.dart的代码如下

import 'package:flutter/material.dart';
class CheckoutScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("检验"),
      ),
      body: new Container(
        color:Colors.lightBlue,
      ),
    );
  }
}

 再写分页面mine_screen.dart的代码如下

 

import 'package:flutter/material.dart';
class MineScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("我的"),
      ),
      body: new Container(
        color: Colors.yellow,
      ),
    );
  }
}

效果如图所示：