界面如图：
我们就从上节里面的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 = ;
currentPage() {
switch (_currentIndex) {
case :
return new Story();
case :
return new CastApp();
case :
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 == ? Color(0xFF46c01b) : Color(0xff999999),
),
),
// 判断当前索引做图片切换显示
icon: _currentIndex == ? 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 == ? Color(0xFF46c01b) : Color(0xff999999),
),
),
icon: _currentIndex == ? 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 == ? Color(0xFF46c01b) : Color(0xff999999),
),
),
icon: _currentIndex == ? 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),
),
),
);
}
}
其它两个文件差不多一样，因为只显示了一个单词而已。