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),
        ),
      ),
    );
  }
}

其它两个文件差不多一样，因为只显示了一个单词而已。