Flutter BottomNavigationBar 底部頁籤導航元件

 

import 'package:flutter/material.dart';
import 'package:untitled/Constants.dart';
import 'package:untitled/Page1.dart';
import 'package:untitled/Page2.dart';
import 'package:untitled/Page3.dart';

class detailpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: appBackgroundGreyColor,
      body: _detailpage(),
    );
  }
}

class _detailpage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _detailpageState();
  }
}

class _detailpageState extends State<_detailpage> {
  int _currentIndex = 0; //Page預設值
  final List<Widget> _children = [page1(), page2(), page3()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Page 1")),
          BottomNavigationBarItem(icon: Icon(Icons.chair), title: Text("Page 2")),
          BottomNavigationBarItem(icon: Icon(Icons.add), title: Text("Page 3")),
        ],
        currentIndex: _currentIndex,
        backgroundColor: appDarkGreyColor,
        fixedColor: Colors.white,
        onTap: _onItemClick,
      ),
    );
  }

  //BottomNavigationBar 按下處理事件，更新設定當下索引值
  void _onItemClick(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}