flutter 案例 (一)： 搭建介面基礎導航框架

首先建立flutter專案

在lib目錄下的main.dart 中改成下面的程式碼

    import 'package:flutter/material.dart';
    import 'package:flutter_trip_ichenkun/navigator/tab_navigator.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: TabNavigator(),
        );
      }
    }

在lib目錄中新建navigator目錄，然後新建檔案 tab_navigator.dart

import 'package:flutter/material.dart';
import 'package:flutter_trip_ichenkun/pages/home_page.dart';
import 'package:flutter_trip_ichenkun/pages/my_page.dart';
import 'package:flutter_trip_ichenkun/pages/searh_page.dart';
import 'package:flutter_trip_ichenkun/pages/travel_page.dart';

class TabNavigator extends StatefulWidget{
  @override
  _TabNavigatorState createState()=>_TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator>{

  // 預設導航顏色
  final _defaultColor = Colors.grey;
   // 預設導航啟用顏色
  final _activeColor = Colors.blue;

  // PageView的控制器
  final PageController _controller = PageController(
    initialPage: 0,
  );  
  // 導航當前索引值
  int _currentIndex= 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 介面容器， 一個可以滾動的列表
      body:PageView(
        controller: _controller,
        // 對應的介面
        children: <Widget>[
          HomePage(),
          SearchPage(),
          TravelPage(),
          MyPage()
        ],
      ),
      // 底部導航選單
      bottomNavigationBar: BottomNavigationBar(
        // 固定檔案一直顯示。  如只顯示啟用狀態的使用 BottomNavigationBarType.shifting
        type: BottomNavigationBarType.fixed,
        // 當前啟用的索引
        currentIndex: _currentIndex,
        // 當點選時候觸發事件，   引數為點選的索引值
        onTap: (index){
          // PageView 跳轉
          _controller.jumpToPage(index);
          setState(() {
            // 設定當前索引啟用
           _currentIndex = index; 
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.home,
              color: _activeColor,
            ),
            title: Text("首頁",
            style:TextStyle(
              color:_currentIndex !=0?_defaultColor:_activeColor
            ))
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.search,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.search,
              color: _activeColor,
            ),
            title: Text("搜尋",style:TextStyle(
              color:_currentIndex !=1?_defaultColor:_activeColor
            ))
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.camera_alt,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.camera_alt,
              color: _activeColor,
            ),
            title: Text("旅拍",style:TextStyle(
              color:_currentIndex !=2?_defaultColor:_activeColor
            ))
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.account_circle,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.account_circle,
              color: _activeColor,
            ),
            title: Text("我的",style:TextStyle(
              color:_currentIndex !=3?_defaultColor:_activeColor
            ))
          )
        ],
      ),
    );

  }
}