设计给的效果如下：
UI布局图
拿到设计后，先把整体拆分成几个部分：
- “用户昵称输入”，获取用户输入的昵称信息。
- “用户头像选取”，获取用户选取作为头像的图片。
- “用户性别选择”，获取用户选择的性别信息。
- “提交按钮”，提交用户的信息。
然后就可以开始进行编码了。
第1步：绘制组件树
完善信息页的组件树
第2步：实现“用户昵称输入”
先通过脚手架（Scaffold）组件、安全区（SafeArea）组件和列表视图（ListView）组件搭一个适配现在各种奇形怪状屏幕的、可滚动的“脚手架”，方便后面填充组件。
import 'package:flutter/material.dart';
import 'widgets/complex_navigation.dart';
import 'widgets/upload_avatar.dart';
import 'widgets/gender_selection.dart';
import '../common/doodle_button.dart';
/// 自定义的注册页面组件。
class RegisteredPage extends StatefulWidget {
@override
_RegisteredPageState createState() => _RegisteredPageState();
}
/// 与自定义的注册页面组件关联的状态子类。
class _RegisteredPageState extends State<RegisteredPage> {
/// 昵称文本字段的控制器。
final _nameController = TextEditingController();
/// 当前选择的性别值。
int _genderSelect = 0;
/// 当前昵称文本字段的状态。
bool _userInput = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: ListView(
children: <Widget>[
// TODO: 第2步：实现“用户昵称输入”
// TODO: 第3步：实现“用户头像选取”
// TODO: 第4步：实现“用户性别选择”
// TODO: 第5步：实现“提交按钮”
],
),
),
);
}
}
下面使用的自定义的复合导航（ComplexNavigation）组件是《Flutter布局锦囊---带输入字段的应用栏》中实现的一个带有返回按钮、主题图片和文本输入框的自定义操作区域。
// TODO: 第2步：实现“用户昵称输入”
ComplexNavigation(
textEditingController: _nameController,
nonEmptyCallback: () {
_userInput = true;
setState(() {});
},
emptyCallback: () {
_userInput = false;
setState(() {});
},
),
第3步：实现“用户头像选取”
下面使用的自定义的上传头像（UploadAvatar）组件是《Flutter布局锦囊---有背景图的头像选择》中的一个借助Flutter团队开发的图片选择器（image_picker）插件实现的图片选取器。
// TODO: 第3步：实现“用户头像选取”
SizedBox(height: 42.0),
UploadAvatar(),
SizedBox(height: 36.0),
第4步：实现“用户性别选择”
下面使用的自定义的性别选择（GenderSelection）组件是《Flutter布局锦囊---男女性别单选》中实现的一个图文并貌的性能选择区域。
// TODO: 第4步：实现“用户性别选择”
GenderSelection(
selectCallback: (genderSelect){
_genderSelect = genderSelect;
setState(() {});
},
),
SizedBox(height: 48.0),
第5步：实现“提交按钮”
下面使用的自定义的涂鸦按钮（DoodleButton）组件是《Flutter布局锦囊---涂鸦风格按钮》中实现的一个涂鸦画风的自定义样式的按钮。
// TODO: 第5步：实现“提交按钮”
Container(
padding: EdgeInsets.symmetric(horizontal: 40.0),
child: DoodleButton(
promptText: '好了',
activation: _genderSelect != 0 && _userInput,
onTapCallback: (){
print('注册成功！');
},
),
),
第6步：还原效果
完善信息页的还原效果
