Flutter 自定义AppBar搜索框

一个简单带搜索框的AppBar，外部引用和TextField差不多，需要扩展的属性可自行添加

效果图：

上代码：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(750, 1334),
      allowFontScaling: false,
      builder: () => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.green,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        debugShowCheckedModeBanner: false,
        home: MyPage(),
      ),
    );
  }
}



class MyPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyPageState();
  }
}

class _MyPageState extends State<MyPage> {

  TextEditingController _textEditingController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFFBFBFB),
      appBar: AppBar(
        backgroundColor: Color(0xFFFBFBFB),
        elevation: 0,
        title: SearchAppBar(
          hintLabel: '搜证书',
        ),
        titleSpacing: 0,
        toolbarHeight: 92.w,
        automaticallyImplyLeading: false,     // 去掉左侧的leading
      ),
      body: Container(),
      ),
    );
  }
}



class SearchAppBar extends StatefulWidget {
  SearchAppBar({Key key, @required this.hintLabel}) : super(key: key);

  final String hintLabel;

  @override
  State<StatefulWidget> createState() {
    return _SearchAppBarState();
  }
}

class _SearchAppBarState extends State<SearchAppBar> {

  TextEditingController _textEditingController = new TextEditingController();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 70.w,
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Container(
              height: double.infinity,
              margin: EdgeInsets.only(left: 32.w),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12.w),
                boxShadow: [
                  BoxShadow(color: Colors.grey[350], blurRadius: 3.w)
                ]
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 20.w),
                    child: Image.asset(
                      Utils.getImgPath('search'),
                      width: 36.w,
                    ),
                  ),
                  Expanded(
                    child: TextField(
                      controller: _textEditingController,
                      autofocus: false,
                      style: TextStyle(
                        fontSize: 32.sp,
                        color: Color(0xFF333333),
                        textBaseline: TextBaseline.alphabetic
                      ),
                      decoration: InputDecoration(
                        hintText: widget.hintLabel,
                        counterText: '',
                        /// 以下设置为了让textfield占满父组件的高度且内容居中
                        border: OutlineInputBorder(
                          borderSide: BorderSide(
                            color: Colors.transparent,
                          ),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                            color: Colors.transparent,
                          ),
                        ),
                        disabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                            color: Colors.transparent,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                            color: Colors.transparent,
                          ),
                        ),
                        contentPadding: EdgeInsets.only(top: 0, bottom: 0)
                      ),
                      maxLines: 1,
                      /// 光标样式
                      cursorColor: Colors.black87,
                      cursorWidth: ScreenUtil().setWidth(1.5),
                    ),
                  )
                ],
              ),
            ),
          ),
          GestureDetector(
            onTap: () {},
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 34.w),
              child: Text(
                '取消',
                style: TextStyle(
                  color: Colors.black54,
                  fontSize: 32.sp,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}