flutter 底部按鈕切換頁面

界面如圖：

我們就從上節里面的app.dartt修改

目錄：lib

lib/story

其它兩個目錄一樣。

圖片配置一下

app.dart

 

import 'package:flutter/material.dart';
import 'cast/cast.dart';
import 'story/story.dart';
import 'derivative/derivative.dart';
void main() => runApp(App());

class App extends StatefulWidget {
  @override
  _MyApp  createState() => new _MyApp();
}

class _MyApp extends State<App> {
  // 當前選中頁索引
  var _currentIndex  = 0;
  currentPage() {
    switch (_currentIndex) {
      case 0:
        return new Story();
      case 1:
        return new CastApp();
      case 2:
        return new Derivative();
      default:
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      // 底部導航按鈕
      bottomNavigationBar: new BottomNavigationBar(
        // 通過fixedColor設置選中的item的顏色
        type: BottomNavigationBarType.fixed,
        // 當前頁面索引
        currentIndex: _currentIndex,
        // 按下后設置當前頁面索引
        onTap: ((index){
          setState(() {
            _currentIndex = index;
          });
        }),
        // 底部導航按鈕選項
        items: [
          new BottomNavigationBarItem(
            title:new Text(
              'ストーリー',
              style: TextStyle(
                color: _currentIndex == 0 ? Color(0xFF46c01b) : Color(0xff999999),
              ),
            ),
            // 判斷當前索引做圖片切換顯示
            icon: _currentIndex == 0 ? Image.asset('images/icon/sawako.jpg', width: 32.0, height: 28.0,) : Image.asset('images/icon/sawako.jpg', width: 32.0, height: 28.0,),
//              backgroundColor:Colors.yellow[200]
          ),
          new BottomNavigationBarItem(
              title: new Text(
                'キャラクター',
                style: TextStyle(
                  color: _currentIndex == 1 ? Color(0xFF46c01b) : Color(0xff999999),
                ),
              ),
              icon: _currentIndex == 1 ? Image.asset('images/icon/flower.png', width: 32.0, height: 28.0,) : Image.asset('images/icon/flower.png', width: 32.0, height: 28.0,)
          ),
          new BottomNavigationBarItem(
              title: new Text(
                '周辺',
                style: TextStyle(
                  color: _currentIndex == 2 ? Color(0xFF46c01b) : Color(0xff999999),
                ),
              ),
              icon: _currentIndex == 2 ? Image.asset('images/icon/flower.png', width: 32.0, height: 28.0,) : Image.asset('images/icon/flower.png', width: 32.0, height: 28.0,)
          )
        ],
      ),

      body: currentPage(),
    );
  }
}

lib/story/story.dart

story.dart

import 'package:flutter/material.dart';

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

class Story extends StatefulWidget {
  @override
  _Story  createState() => new _Story();
}

class _Story extends State<Story> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: new Center(
        child: new Text(
          'Story',
          style: TextStyle(color: Colors.amberAccent),
        ),
      ),
    );
  }
}

其它兩個文件差不多一樣，因為只顯示了一個單詞而已。