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