Flutter自定义Appbar

起初想到这个需求，是因项目中有头部定制化的功能。于是硬着头皮去搜索，最终实现了，我的效果图展示只是一个我做成的样子。实际上这是一个通用解决方案，有了定制化代码方案，你可以实现更多适合你自己的appBar。
实现效果图：

image.png

页面代码：

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  @override
  _HomePage createState()=>_HomePage();
}
class _HomePage extends State<HomePage> {
  @override
  initState() {
    super.initState();
  }
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size(null, 100),
        child: Container(
          decoration: BoxDecoration(

          ),
          width: MediaQuery.of(context).size.width,
          height: 88,
          child: ClipRRect(
            child: Container(
              color: Colors.blueAccent,
              child: Container(
                margin: EdgeInsets.fromLTRB(20, 20, 0, 0),
                child: Flex(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  direction:Axis.horizontal,
                  children: [
                    Container(
                      alignment: Alignment.center,
                      child: Text("LOGO占位", style: TextStyle(color:Colors.white),),
                      margin: EdgeInsets.only(top: 20.0, bottom: 15.0, right: 10.0 ),
                      width: 120,
                      height: double.infinity,
                      decoration: BoxDecoration(
                        border: Border.all( color: Colors.white.withOpacity(0.8)),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        height: double.infinity,
                        margin: EdgeInsets.fromLTRB(0, 15, 0, 10),
                        padding: EdgeInsets.only(left: 10.0),
                        decoration: BoxDecoration(
                            color:Colors.white.withOpacity(0.4),
                            borderRadius: BorderRadius.all(Radius.circular(30.0))
//                          borderRadius:
                        ),
                        child: Opacity(
                          opacity: 0.8,
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Icon(Icons.search, color: Colors.white,size: 20.0,),
                              Padding(
                                padding: EdgeInsets.only(bottom: 4.0),
                                child: Text("商品名、厂家、条形码", style: TextStyle(color: Colors.white, fontSize: 16.0),),
                              )
                            ],
                          ),
                        )
                      ),
                    ),
                    SizedBox(
                      width: 50,
                      child: Icon(Icons.message,color: Colors.white),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
      body:Container()
    );
  }
}

如果有很多页面公用自定义头部怎么办？
提取头部：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PreferredSize(
      preferredSize: Size(null, 100),
      child: Container(
        decoration: BoxDecoration(),
        width: MediaQuery.of(context).size.width,
        height: 88,
        child: ClipRRect(
          child: Container(
            color: Colors.blueAccent,
            child: Container(
              margin: EdgeInsets.fromLTRB(20, 20, 0, 0),
              child: Flex(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                direction: Axis.horizontal,
                children: [
                  Container(
                    alignment: Alignment.center,
                    child: Text(
                      "LOGO占位",
                      style: TextStyle(color: Colors.white),
                    ),
                    margin:
                        EdgeInsets.only(top: 20.0, bottom: 15.0, right: 10.0),
                    width: 120,
                    height: double.infinity,
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.white.withOpacity(0.8)),
                    ),
                  ),
                  Expanded(
                    child: Container(
                        height: double.infinity,
                        margin: EdgeInsets.fromLTRB(0, 15, 0, 10),
                        padding: EdgeInsets.only(left: 10.0),
                        decoration: BoxDecoration(
                            color: Colors.white.withOpacity(0.4),
                            borderRadius:
                                BorderRadius.all(Radius.circular(30.0))
//                          borderRadius:
                            ),
                        child: Opacity(
                          opacity: 0.8,
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Icon(
                                Icons.search,
                                color: Colors.white,
                                size: 20.0,
                              ),
                              Padding(
                                padding: EdgeInsets.only(bottom: 4.0),
                                child: Text(
                                  "商品名、厂家、条形码",
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 16.0),
                                ),
                              )
                            ],
                          ),
                        )),
                  ),
                  SizedBox(
                    width: 50,
                    child: Icon(Icons.message, color: Colors.white),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  @override
  Size get preferredSize =>
      new Size(ScreenUtil().setWidth(750), ScreenUtil().setHeight(105));
}

重点代码，头部高度：
Size get preferredSize => new Size(ScreenUtil().setWidth(750),ScreenUtil().setHeight(105));