flutter自定义appbar

场景描述：

因为写很多页面，每个顶部都搞一个返回键、分享，中间标题这种东东，弄的比较繁琐，索性就把这个appbar给单独抽离出来，重新定义成一个widget这个内容。

效果图大致是这样子的：

源码：

直接上代码：

import 'package:flutter/material.dart';
import 'package:/common_utils/common_utils.dart';
import 'package:/resources/mycolor_resources.dart';
import 'package:/routers/application.dart';

class HeadTitleBar extends StatefulWidget implements PreferredSizeWidget {
  final String text; //从外部指定内容
  final Color statusBarColor; //设置statusbar的颜色
  final double contentHeight = 80.0;
  final bool rightShow;
  final VoidCallback callback;

  HeadTitleBar({
    this.text,
    this.statusBarColor,
    this.rightShow,
    this.callback,
  }) : super();

  @override
  State<StatefulWidget> createState() {
    return new _HeadTitleBarState(this.callback);
  }

  @override
  Size get preferredSize => new Size.fromHeight(contentHeight);
}

///这里没有直接用SafeArea，而是用Container包装了一层
///因为直接用SafeArea，会把顶部的statusBar区域留出空白
///外层Container会填充SafeArea，指定外层Container背景色也会覆盖原来SafeArea的颜色
class _HeadTitleBarState extends State<HeadTitleBar> {
  VoidCallback callback;

  _HeadTitleBarState(this.callback);

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.white,
      height: widget.contentHeight,
      child: SafeArea(
        top: true,
        child: Container(
            child: Column(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  InkWell(
                    onTap: () {
                      Application.router.pop(context);
                    },
                    child: Container(
                      child: Icon(
                        Icons.arrow_back_ios,
                        color: Colors.black,
                      ),
                      width: 40,
                    ),
                  ),
                  Text(
                    "${widget.text}",
                    style: TextStyle(
                        color: MyColorRes.titleBarColor, fontSize: 16),
                  ),
                  widget.rightShow
                      ? GestureDetector(
                          child: Container(
                            child: Image.asset(
                              Util.getImgPath('ic_more'),
                              width: 24,
                              height: 20,
                            ),
                            margin: EdgeInsets.only(right: 15),
                          ),
                          onTap: this.callback,
                        )
                      : Container(
                          width: 24,
                        ),
                ],
              ),
            ),
            Container(
              height: 0.5,
              color: MyColorRes.divideLine,
            ),
          ],
        )),
      ),
    );
  }
}

---

ad time

超详细图文搭建个人免费博客

欢迎关注「蛇崽网盘教程资源」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。

在微信后台回复「130个小程序」，即可免费领取享有导入就能跑的微信小程序

在微信后台回复「Flutter移动电商」，即可免费领取Flutter移动电商系列全套