flutter底部导航栏demo

main.dart

import 'package:flutter/material.dart';
import 'pages/pageIndex.dart';

main(){
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        home: IndexPage()
      )
    );
  }
}


           

index.dart

import 'package:flutter/material.dart';
import './pageA.dart';
import './pageB.dart';
import './pageC.dart';
import './pageD.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {

  //底部导航栏选项列表
  final List<BottomNavigationBarItem> bottomItems = [
    BottomNavigationBarItem(
      //标题
      title: Text("pageA"),
      //图标
      icon: Icon(Icons.ac_unit),
    ),
    BottomNavigationBarItem(
        title: Text("pageB"), icon: Icon(Icons.brightness_2)),
    BottomNavigationBarItem(
      title: Text("pageC"),
      icon: Icon(Icons.filter_drama),
    ),
    BottomNavigationBarItem(
      title: Text("pageD"),
      icon: Icon(Icons.wb_sunny)
    )
  ];

  //
  final List<Widget> pages = [pageA(), pageB(), pageC(), pageD()];

  @override
  void initState() {
    //初始化默认页面
    currentPage = pages[currentIndex];
    super.initState();
  }

  //当前页索引
  int currentIndex = 0;
  //当前页
  Widget currentPage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //当前页
      body: currentPage,
      bottomNavigationBar: BottomNavigationBar(
        //背景色,不知道是不是flutter的bug，在shifting类型中无效
        backgroundColor: Colors.white,
        //没有选择的选项颜色
        unselectedItemColor: Colors.blue,
        //选中的选项颜色
        selectedItemColor: Colors.red,
        //底部导航栏颜色
        type: BottomNavigationBarType.shifting,
        //底部导航栏选项
        items: bottomItems,
        //当前索引
        currentIndex: currentIndex,
        onTap: (index) {
          //更新当前页索引和当前页
          setState(() {
            currentIndex = index;
            currentPage = pages[index];
          });
        },
      ),
    );
  }
}
           

pages

    pageA.dart

import 'package:flutter/material.dart';

class pageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("pageA"),
      ),
    );
  }
}
           

    pageB.dart

import 'package:flutter/material.dart';

class pageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("pageB"),
      ),
    );
  }
}
           

    pageC.dart

    pageD.dart