flutter之Tabbar實現（兩種方式，直接切換IndexedStack，過渡動畫切換PageView）

學習flutter過程當中製做底部導航欄的寫法
先上圖

首頁，備用，個人三個欄目切換

方法一（不帶過分動畫,IndexedStack方式）

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
//引入3頁
import './car_page.dart';
import './my_page.dart';
import './index_page.dart';

class HomePage extends StatefulWidget{
    @override
    _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>{
     //這是監聽安卓的返回鍵操做
    Future<bool> _onWillPop() {
        return showDialog(
            context: context,
            builder: (context) => new AlertDialog(
                title: new Text('退出App?'),
                content: new Text('Do you want to exit an App'),
                actions: <Widget>[
                    new FlatButton(
                        onPressed: () => Navigator.of(context).pop(false),
                        child: new Text('不'),
                    ),
                    new FlatButton(
                        onPressed: () async {
                            await pop();
                        },
                        child: new Text('是的'),
                    ),
                ],
            ),
        ) ?? false;
    }

    static Future<void> pop() async {
        await SystemChannels.platform.invokeMethod('SystemNavigator.pop');
    }


    final List<BottomNavigationBarItem> bottomTabs = [
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            title: Text("首頁")
        ),
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.search),
            title: Text("備用")
        ),
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.profile_circled),
            title: Text("個人")
        )
    ];

    final List<Widget> tabBodies = [
        IndexPage(),
        CarPage(),
        MyPage(),
    ];


    int currentIndex = 0;
    var currenPage;
    @override
    void initState(){
        currenPage = tabBodies[currentIndex];
        super.initState();
    }

    @override
    Widget build(BuildContext context){
        return WillPopScope(
            onWillPop: _onWillPop,
            child: Container(
                child: Scaffold(
                    bottomNavigationBar: BottomNavigationBar(
                        type: BottomNavigationBarType.fixed,
                        currentIndex: currentIndex,
                        items: bottomTabs,
                        onTap: (index){
                            setState(() {
                                currentIndex = index;
                                currenPage = tabBodies[currentIndex];
                            });
                        },
                    ),
                    body: IndexedStack(
                        index: currentIndex,
                        children: tabBodies,
                    ),
                ),
            )
        );
    }
}

方法二（帶過分動畫，PageView方式）

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

//引入3個切換的頁面
import './car_page.dart';
import './my_page.dart';
import './index_page.dart';

class HomePage extends StatefulWidget{
    @override
    _HomePageState createState() => _HomePageState();
}
//要混入SingleTickerProviderStateMixin
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{
    //這是監聽安卓的返回鍵操做
    Future<bool> _onWillPop() {
        return showDialog(
            context: context,
            builder: (context) => new AlertDialog(
                title: new Text('退出App?'),
                content: new Text('Do you want to exit an App'),
                actions: <Widget>[
                    new FlatButton(
                        onPressed: () => Navigator.of(context).pop(false),
                        child: new Text('不'),
                    ),
                    new FlatButton(
                        onPressed: () async {
                            await pop();
                        },
                        child: new Text('是的'),
                    ),
                ],
            ),
        ) ?? false;
    }

    static Future<void> pop() async {
        await SystemChannels.platform.invokeMethod('SystemNavigator.pop');
    }

    //創建下面三個按鈕數組
    final List<BottomNavigationBarItem> bottomTabs = [
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            title: Text("首頁")
        ),
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.search),
            title: Text("備用")
        ),
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.profile_circled),
            title: Text("個人")
        )
    ];
    //把3個頁面排成數組形式方便切換
    final List<Widget> tabBodies = [
        IndexPage(),
        CarPage(),
        MyPage(),
    ];


    int currentIndex = 0;
    //建立頁面控制器
    var _pageController;
    @override
    void initState(){
        //頁面控制器初始化
        _pageController = new PageController(initialPage : 0);
        super.initState();
    }

    @override
    Widget build(BuildContext context){
        //WillPopScope監聽安卓返回鍵
        return WillPopScope(
            onWillPop: _onWillPop,
            child: Container(
                child: Scaffold(
                    bottomNavigationBar: BottomNavigationBar(
                        type: BottomNavigationBarType.fixed,
                        currentIndex: currentIndex,
                        items: bottomTabs,
                        onTap: (index){
                            setState(() {
                                currentIndex = index;
                            });
                            //點擊下面tabbar的時候執行動畫跳轉方法
                            _pageController.animateToPage(index, duration: new Duration(milliseconds: 500),curve:new ElasticOutCurve(4));
                        },
                    ),
                    body: PageView(
                        controller: _pageController,
                        children: tabBodies,
                        onPageChanged: (index){
                           currentIndex = index;
                        },
                    ),
                ),
            )
        ); 
    }
}