Scaffold(
appBar: AppBar(
centerTitle: true, 标题栏文字居中
title: Text('me-son'), 标题栏文字
backgroundColor: Colors.red, 顶部栏目背景色
leading: IconButton( 设置顶部栏目左侧图标,默认为箭头,实现事件需要IconButton
icon: Icon(Icons.menu),
onPressed: (){
},
),
actions: <Widget>[ 给顶部栏目最右侧添加内容
IconButton(
icon:Icon(Icons.search),
onPressed: (){},
)
],
iconTheme: IconThemeData(color: Colors.blue,size:24.0,opacity: 0.5), 设置栏目字体图标样式
textTheme:TextTheme(title: TextStyle(color: Colors.blue) ), 设置栏目文字样式
),
...
);
去除顶部栏目右上角的debug贴纸
在main.dart里的materialApp中与home同级设置
debugShowCheckedModeBanner: false
代码示例:
import 'package:flutter/material.dart';
import '../main.dart';
class Me2 extends StatefulWidget {
String title='me';
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Me2> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true, //标题栏文字居中
title: Text('me-son'),
backgroundColor: Colors.red, //顶部导航栏背景色
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: (){
},
), //设置顶部左侧图标,默认为箭头,实现事件需要IconButton
actions: <Widget>[ //给右侧添加内容
IconButton(
icon:Icon(Icons.search),
onPressed: (){},
)
],
iconTheme: IconThemeData(color: Colors.blue,size:24.0,opacity: 0.5), //设置字体图标样式
textTheme:TextTheme(title: TextStyle(color: Colors.blue) ), //设置标题栏文字样式
),
body: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Text('me-sonnnnn'),
RaisedButton(
color: Theme.of(context).accentColor,
child: Text('回到根'),
onPressed: (){
Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new Tabs(index: 2)),
(route) => route == null );
},
),
],
)
);
}
}
/*
单独的页面没有主题样式,需要通过Scaffold自行设置
*/