Flutter自定义搜索框，解决字体不剧中的问题

Flutter自定义搜索框，解决字体不剧中的问题

效果
高度为40的时候显示：

高度为60显示的

高度为30的显示

代码如下，
创建一个SearchBar.dart文件，吧下面的代码复制进去就可以了

import 'package:flutter/material.dart';

class SearchBar extends PreferredSize {
  TextEditingController controller; //输入控制器
  FocusNode focusNode; //焦点
  String hint; //提示的文字
  TextStyle hintStyle; //提示文字的样式
  double width; //输入框的宽
  double height; //高
  // Widget startIcon; //前面显示的图标
  Widget endIcon; //后面显示的图标
  // bool isShowStartIcon; //是否显示前面的图标  默认不显示
  bool isShowEndIcon; //是否显示后面的图标
  double radius; //圆角
  Color bgColor; //背景颜色
  double endIconPadding; //右边图标距离右边的距离
  double startIconPadding; //左边图标距离左边的距离

  ValueChanged<String> onChanged;
  ValueChanged<String> onSubmitted;

  SearchBar(
      {@required this.controller,
      this.onChanged,
      this.onSubmitted,
      @required this.focusNode,
      this.hintStyle,
      this.hint,
      this.width: 200,
      this.height: 40,
      this.endIcon,
      // this.startIcon,
      this.isShowEndIcon: true,
      // this.isShowStartIcon: false,
      this.radius: 25,
      this.bgColor,
      this.endIconPadding: 12,
      this.startIconPadding: 10});

  buildWidget() {
    return Container(
        height: height,
        decoration: BoxDecoration(
            color: bgColor, borderRadius: BorderRadius.circular(radius)),
        child: Container(
          child: Stack(
            alignment: Alignment.centerLeft,
            children: [
              Container(
                margin: EdgeInsets.only(
                  left: startIconPadding,
                ),
                child: Text(
                  hint,
                  style: hintStyle,
                ),
              ),
              Container(
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.only(left: 10),
                child: Opacity(
                  opacity: 1,
                  child: EditableText(
                    controller: controller,
                    cursorWidth: 2,
                    focusNode: focusNode,
                    style: TextStyle(
                      fontSize: 14,
                    ),
                    onChanged: onChanged,
                    onSubmitted: onSubmitted,
                    cursorColor: Colors.grey,
                    backgroundCursorColor: Colors.grey,
                  ),
                ),
                width: width,
              ),
              isShowEndIcon
                  ? Positioned(
                      child: Container(
                        margin: EdgeInsets.only(right: endIconPadding),
                        child: endIcon,
                      ),
                      right: 0,
                    )
                  : Container()
            ],
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return buildWidget();
  }
}

使用方法：

 SearchBar(
                      controller: TextEditingController(),
                      focusNode:FocusNode(),
                      width: 200,
                      height: 30,
                      bgColor: Colors.white12,
                      endIcon: Opacity(opacity: 0.8,child:Image.asset('assets/images/search.png',color: Colors.white,),),
                      hintStyle: TextStyle(
                          fontSize: 12,
                          color: Colors.grey[400]
                      ),
                      hint:"请输入书籍名称",
                      onChanged: (val){
                        model.onChanged(val);
                      },
                    )

需要在onchanged的时候进行判断

  onChanged(val){
    if(val.length>0){
      searchHint='';
    }else{
      searchHint=Constants.searchHint;
    }
    notifyListeners();
  }

谢谢观看🙏