flutter：BottomNavigationBar+PageView聯動

1. 自定義 BottomNavigationBarItem 的樣式

class NavigationIconView {
  final BottomNavigationBarItem item;

  NavigationIconView(
      {Key key, String title, Icon icon, Icon activeIcon})
      : item = BottomNavigationBarItem(
            icon: icon,
            activeIcon: activeIcon,
            title: Text(title,style: TextStyle(color: Colors.black),),
            backgroundColor: Colors.white);
}

2.初始化需要的widget

 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _navigationViews = [
      NavigationIconView(
        title: 'first',
        icon: Icon(
          Icons.home,
        ),
        activeIcon: Icon(
          Icons.home,color: Colors.greenAccent,
        ),
      ),
      NavigationIconView(
        title: 'next',
        icon: Icon(
          Icons.desktop_mac,
        ),
        activeIcon: Icon(
          Icons.desktop_mac,color: Colors.greenAccent,
        ),
      ),
      NavigationIconView(
        title: 'than',
        icon: Icon(
          Icons.history,
        ),
        activeIcon: Icon(
          Icons.history,color: Colors.greenAccent,
        ),
      ),
      NavigationIconView(
        title: 'final',
        icon: Icon(
          Icons.map,
        ),
        activeIcon: Icon(
          Icons.map,color: Colors.greenAccent,
        ),
      ),
      NavigationIconView(
        title: 'mine',
        icon: Icon(
          Icons.accessibility,
        ),
        activeIcon: Icon(
          Icons.accessibility,color: Colors.greenAccent,
        ),
      ),
    ];

    _pageController = PageController(initialPage: _currentIndex);

    _pages = [
      HomeMessage(),
      Container(color: Colors.brown),
      Container(color: Colors.green),
      Container(color: Colors.brown),
      MinePage()
    ];
  }

3. BottomNavigationBar屬性設置

    BottomNavigationBar botNavBar = BottomNavigationBar(
        items: _navigationViews.map((NavigationIconView view){
          return view.item;
    }).toList(),
    currentIndex: _currentIndex,
    type: BottomNavigationBarType.fixed,
    onTap: (int index){
          _currentIndex = index;
          // 動畫效果
          _pageController.animateToPage(_currentIndex, duration: Duration(milliseconds: 200), curve: Curves.easeInOut);
    },);

4.簡單demo

import 'package:flutter/material.dart';

class NavigationIconView {
  final BottomNavigationBarItem item;

  NavigationIconView(
      {Key key, String title, Icon icon, Icon activeIcon})
      : item = BottomNavigationBarItem(
            icon: icon,
            activeIcon: activeIcon,
            title: Text(title,style: TextStyle(color: Colors.black),),
            backgroundColor: Colors.white);
}

class home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return homeState();
  }
}

class homeState extends State<home> {
  PageController _pageController;
  int _currentIndex = 0;
  List<NavigationIconView> _navigationViews;
  List<Widget> _pages;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _navigationViews = [
      NavigationIconView(
        title: 'first',
        icon: Icon(
          Icons.home,
        ),
        activeIcon: Icon(
          Icons.home,color: Colors.greenAccent,
        ),
      ),
      NavigationIconView(
        title: 'next',
        icon: Icon(
          Icons.desktop_mac,
        ),
        activeIcon: Icon(
          Icons.desktop_mac,color: Colors.greenAccent,
        ),
      ),
      NavigationIconView(
        title: 'than',
        icon: Icon(
          Icons.history,
        ),
        activeIcon: Icon(
          Icons.history,color: Colors.greenAccent,
        ),
      ),
      NavigationIconView(
        title: 'final',
        icon: Icon(
          Icons.map,
        ),
        activeIcon: Icon(
          Icons.map,color: Colors.greenAccent,
        ),
      ),
      NavigationIconView(
        title: 'mine',
        icon: Icon(
          Icons.accessibility,
        ),
        activeIcon: Icon(
          Icons.accessibility,color: Colors.greenAccent,
        ),
      ),
    ];

    _pageController = PageController(initialPage: _currentIndex);

    _pages = [
      Container(color: Colors.black),
      Container(color: Colors.green),
      Container(color: Colors.brown),
      Container(color: Colors.green),
      Container(color: Colors.white),
    ];

  }

  @override
  Widget build(BuildContext context) {

    BottomNavigationBar botNavBar = BottomNavigationBar(
        items: _navigationViews.map((NavigationIconView view){
          return view.item;
    }).toList(),
    currentIndex: _currentIndex,
    type: BottomNavigationBarType.fixed,
    onTap: (int index){
          _currentIndex = index;

          _pageController.animateToPage(_currentIndex, duration: Duration(milliseconds: 200), curve: Curves.easeInOut);
    },);
    
    // TODO: implement build
    return Scaffold(
      body: PageView.builder(
        itemBuilder: (BuildContext context, int index) {
          return _pages[index];
        },
        controller: _pageController,
        itemCount: _pages.length,
        onPageChanged: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      bottomNavigationBar: botNavBar,
    );
  }
}