如何减少TextField上prefixIcon的填充？

Question

我不知道如何克服48px材质库的默认设置。我快速浏览了SDK，却找不到任何东西。我知道这与prefixIcon参数本身有关，因为它始终为48px或无论放置在里面的内容如何。

我有一个自定义SDK，所以如果有人知道它在哪里，我想减少它，因为它总是会妨碍您。

  // : Searchbar Decoration
  static InputDecoration searchbarDecoration = InputDecoration(
    prefixIcon: Icon(
      Icons.search,
      color: DocumentColours.colour10,
    ),
    contentPadding: EdgeInsets.symmetric(
      vertical: 0.0,
      horizontal: 0.0,
    ),
    fillColor: DocumentColours.colour8,
    filled: true,
    labelText: 'Search',
    labelStyle: FontStyles.searchbarLabel,
    hasFloatingPlaceholder: false,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(5.0),
      borderSide: BorderSide(width: 0.0, style: BorderStyle.none),
    ),
  );

Answer 1

注意：要解决此问题，请使用prefixIconConstraints的InputDecoration属性>> [[自SDK版本1.17.0起下面是文档说的(1.17.0) input_decorater.dart：

BoxConstraints可用于修改prefixIcon的周围。此属性对于使装饰的高度小于48px尤其有用。这可以通过将[isDense]设置为true和将约束的最小高度和宽度设置为小于48px的值。

检查下面的代码：效果很好：

TextField(
    decoration: InputDecoration(
      // choose any icon of your choice here
      prefixIcon: Icon(Icons.person),
      // set the prefix icon constraints
      prefixIconConstraints: BoxConstraints(
        minWidth: 25,
        minHeight: 25,
      ),
    ),
  ),

我希望这会有所帮助。

Answer 2

我的方法是使用Row> Icon + TextField来定制我自己的文本字段组件，只是忘记TextField中有一个prefixIcon。