Flutter架构搭建《二》 自定义Appbar

Flutter架构搭建《二》 自定义Appbar

自定义Appbar

/**
 * @Author: Nimodou
 * @Blog: https://blog.csdn.net/qq_28535319
 * @Email: [email protected]
 * @Email: [email protected]
 * @Date: 2019/7/27
 * @Description:
 */
///
class AppBarCustomer extends StatefulWidget implements PreferredSizeWidget{

  AppBarCustomer({@required this.child,this.value}) : assert(child != null);
  final Widget child;
  final SystemUiOverlayStyle value;
  @override
  Size get preferredSize {
    return new Size.fromHeight(56.0);
  }
  @override
  State createState() {
    return new MAppBarState();
  }
}


class MAppBarState extends State<AppBarCustomer> {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: widget.value??SystemUiOverlayStyle.dark,
      child: new SafeArea(
        top: true,
        child: widget.child,
    ));
  }
}

使用

AppBarCustomer(
        child: Container(
            width: ScrennInstance.width,
            height: 45,
            decoration: BoxDecoration(color: ThemeApp.white),
            child: Stack(
              children: <Widget>[
                Positioned(
                  left: 10,
                  child: IconButton(
                    icon: Icon(Icons.arrow_back_ios),
                    color: Colors.black54,
                    onPressed: () {
                      RouteUtil.maybePop(context);
                    },
                  ),
                ),
                Center(
                  child: Text('设备响应列表', style: TextStyles.appTitle),
                ),
                Positioned(
                    right: 10,
                    child: IconButton(
                        icon: Icon(Icons.add),
                        color: Colors.black54,
                        onPressed: () {
                          RouteUtil.pushEmentAndBackResult(
                              context,
                              DeviceResponsAddPage(
                                  room: widget.room, orgId: widget.orgId),
                              (ResponsDeviceItemBean result) {
                            if (result != null) {
                              widget.sceneResponseList.add(result);
                              setState(() {});
                            }
                          });
                        })),
              ],
            )),
      ),

效果如下

路还很长，慢慢走