设计给的效果如下：
UI布局图
拿到设计后，先把整体拆分成几个部分：
- “公共应用栏”，可以给应用程序中的大部分页面使用的通用组件。
然后就可以开始进行编码了。
第1步：绘制组件树
简单的应用栏的组件树.png
第2步：实现“公共应用栏”
使用Flutter的应用栏（AppBar）组件，你可以实现一些简单定制效果。应用栏（AppBar）组件亮度（brightness）属性可以控制系统状态栏的字体颜色，比如，如果你把背景颜色（backgroundColor）属性设置成了浅色系，那么亮度（brightness）属性应该设置成明亮(light)的。
import 'package:flutter/material.dart';
/// 自定义的一级导航组件。
Widget FirstNavigation(String title, [IconButton iconButton]) => AppBar(
// 应用栏（`AppBar`）组件的标题（`title`）属性，应用栏中的主要组件。
title: Text(
title,
style: TextStyle(
color: Color(0xFF282828),
fontSize: 18.0,
),
),
// 图标主题（`iconTheme`）属性，用于应用栏图标的颜色、不透明度和大小。
iconTheme: IconThemeData(
color: Color(0xFF4A4A4A),
),
// 亮度（`brightness`）属性，应用栏（`AppBar`）组件的亮度。
brightness: Brightness.light,
// 背景颜色（`backgroundColor`）属性，用于应用栏（`AppBar`）组件的颜色。
backgroundColor: Color(0xFFF9F9F9),
// 中心标题（`centerTitle`）属性，标题是否应该居中。
centerTitle: true,
// 提高（`elevation`）属性，放置此应用栏的z坐标，可以控制应用栏下方阴影的大小。
elevation: 0.0,
// 行动（`actions`）属性，要在标题后显示的组件。
actions: <Widget>[
Container(
width: 90.0,
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: 8.0),
decoration: BoxDecoration(
image: DecorationImage(
// 装饰图片（`DecorationImage`）类的图片（`image`）属性，将图像绘制成装饰。
// 通常通过资产图片（`AssetImage`）使用随应用程序一起提供的图像，
// 或通过网络图像（`NetworkImage`）使用从网络获取的图像。
image: AssetImage('assets/bg_right_texture.png'),
// 适应属性，如何在框里展示图像。
// https://docs.flutter.io/flutter/painting/BoxFit-class.html
fit: BoxFit.contain,
),
),
// 运算符`??`，表示如果为空。
child: iconButton ?? null,
),
],
);
第3步：还原效果
简单的应用栏的还原效果
