1.去除debug banner
什么是debug banner,如下图,当然是这个讨厌的东西,碍眼
如下图所示,打开调试之后会出现这个,前四个就不讲,闪电,热加载(hot reload),倒数第三,重新启动项目,倒数第二,停止项目,倒数第一,会打开一个web网页,Dart Devtools
点击debug banner就可以取消了,用过vue devtool 或者react devtool都知道这是调试工具,自己研究吧。
2.底部导航菜单
下面的代码是main.dart的文件
import 'package:flutter/material.dart'; // flutter各种组件的依赖库
import 'package:mi_shop/pages/Home.dart'; // 引入文件的方法,因为我的项目名是mi_shop,自己根据自己的改
import 'package:mi_shop/pages/Category.dart'; // Category--分类页面
import 'package:mi_shop/pages/Cart.dart'; // Cart--购物车页面
import 'package:mi_shop/pages/Mine.dart';// home对应首页页面 Mine--我的页面
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = '小米商城';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title, //
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
var _pageListr = [new Home(), new Category(), new Cart(), new Mine()];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SafeArea(
child: _pageListr[_selectedIndex],
),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('首页'),
),
BottomNavigationBarItem(
icon: Icon(Icons.list),
title: Text('分类'),
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
title: Text('购物车'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('我的'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Color(0xffff6700), //激活样式
unselectedItemColor: Color(0xff999999), // 未激活的样式
showUnselectedLabels: true, // 展示未选择的文本
type: BottomNavigationBarType.fixed, // 固定底部菜单不移动
backgroundColor: Color(0xffffffff), // 背景颜色 注:0x代表十六进制 ff代表透明度 后面6位才是颜色
onTap: _onItemTapped, // 点击事件
),
);
}
}
上面四个文件对应下方四个菜单