| 2 | 从0开始写一个基于Flutter的开源中国客户端(2)
Dart语法基础 |
| 3 | 从0开始写一个基于Flutter的开源中国客户端(3)
初识Flutter & 常用的Widgets |
| 4 | 从0开始写一个基于Flutter的开源中国客户端(4)
Flutter布局基础 |
| 👉5 | 从0开始写一个基于Flutter的开源中国客户端(5)
App整体布局框架搭建 |
| 6 | 从0开始写一个基于Flutter的开源中国客户端(6)
各个静态页面的实现 |
| 7 | 从0开始写一个基于Flutter的开源中国客户端(7)
App网络请求和数据存储 |
| 8 | 从0开始写一个基于Flutter的开源中国客户端(8)
插件的使用 |
App整体布局框架搭建
在我们日常生活中经常使用的App比如微信、微博、QQ等,基本上都是使用首页底部多个Tab可切换页面,加上可侧滑的菜单这种布局方式来组合。基于Flutter的开源中国客户端也是使用这种布局组合来实现的App。本篇要实现的页面效果如下图所示:
下面一步步来完成这个布局框架的搭建。
新建项目
在AndroidStudio中,通过File
-> New
-> New Flutter Project...
创建一个新的Flutter工程。
使用MaterialApp和Scaffold组件构建首页
在新创建的Flutter工程中,删除lib/main.dart
中的代码,并编写下面的代码:
import ‘package:flutter/material.dart’;
void main() {
runApp(new MyApp());
}
// MyApp是一个有状态的组件,因为页面标题,页面内容和页面底部Tab都会改变
class MyApp extends StatefulWidget {
@override
State createState() => new MyOSCClientState();
}
class MyOSCClientState extends State {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData(
// 设置页面的主题色
primaryColor: const Color(0xFF63CA6C)
),
home: new Scaffold(
appBar: new AppBar(
// 设置AppBar标题
title: new Text(“My OSC”,
// 设置AppBar上文本的样式
style: new TextStyle(color: Colors.white)
),
// 设置AppBar上图标的样式
iconTheme: new IconThemeData(color: Colors.white)
),
body: new Text(“MyOSC Client”)
),
);
}
}
上面的代码中,为MaterialApp设置了theme
参数,主要是为了改变页面主题颜色为绿色,在Scaffold的appBar
属性中,为