从0开始写一个基于Flutter的开源中国客户端（5）——App整体布局框架搭建

| 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属性中，为