Flutter Text Field：如何在边框内添加图标答案

【问题标题】：Flutter Text Field: How to add Icon inside the borderFlutter Text Field：如何在边框内添加图标
【发布时间】：2019-09-19 14:53:52
【问题描述】：

我想在搜索栏中添加图标。到目前为止，这是我的代码：

new TextField(
     decoration: new InputDecoration(
     icon: new Icon(Icons.search)
     labelText: "Describe Your Issue...",
     enabledBorder: const OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(20.0)),
     borderSide: const BorderSide(
       color: Colors.grey,
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
      borderSide: BorderSide(color: Colors.blue),
    ),
   ),
  ),

这是上面代码的结果（这不是我想要的）：

【问题讨论】：

你想要像谷歌应用那样的浮动应用栏吗？
ibhavikmakwana 是的

标签： flutter flutter-layout

【解决方案1】：

TextField(
      decoration: InputDecoration(
        filled: true,
        fillColor: Color(0xFFFFFFFF),
        prefixIcon: Icon(Icons.search, color: Colors.pink),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(30),
          ),
        ),
        hintText: ' Search',
      ),
    ),

【讨论】：

【解决方案2】：

使用前缀图标

return TextFormField(
  decoration: InputDecoration(
    hintText: hint,
    labelText: label,
    prefixIcon: Icon(Icons.person),
    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
  ),
);

【讨论】：

【解决方案3】：

如果您需要在文本字段中添加图标，请在其中使用参数 prefixIcon 和 suffixIcon，例如

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.mail),
    suffixIcon: Icon(Icons.search),
  ),
);

【讨论】：

【解决方案4】：

您可以使用 InputDecoration 参数 prefixIcon 或 suffixIcon。

prefixIcon 将在您的 TextField 内的文本之前显示。

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.done),
  ),
);

prefixIcon showcase

或

suffixIcon 将在您的 TextField 内的文本之后显示。

TextField(
  decoration: InputDecoration(
    suffixIcon: Icon(Icons.done),
  ),
);

suffixIcon showcase

ATTN：上面的代码不包括屏幕截图中显示的边框样式:)

【讨论】：

【解决方案5】：

你可以试试这个：

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.grey.withOpacity(0.5),
      width: 1.0,
    ),
    borderRadius: BorderRadius.circular(4.0),
  ),
  margin: EdgeInsets.all(12),
  child: Row(
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(left: 8),
        child: Icon(
          Icons.search,
          color: Colors.grey,
          size: 20,
        ),
      ),
      new Expanded(
        child: TextField(
          keyboardType: TextInputType.text,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "Search by Name",
            hintStyle: TextStyle(color: Colors.grey),
            contentPadding:
                EdgeInsets.symmetric(vertical: 8, horizontal: 8),
            isDense: true,
          ),
          style: TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
        ),
      )
    ],
  ),
)

它将显示为：

【讨论】：

【解决方案6】：

已编辑答案

将答案更新为我的原始答案实际上并未涵盖问题的原始上下文。

您可以在TextField 或TextFormField 中使用prefixIcon 在TextField 中获取一些小部件作为前导。

例子

    TextField(
//    ...,other fields
      decoration: InputDecoration(
        prefixIcon: prefixIcon??Icon(Icons.done),
      ),
    ),

PS：不要混淆prefixIcon和prefix，因为这两个是不同的东西。 https://api.flutter.dev/flutter/material/InputDecoration/prefix.html

另外，如果您想实现浮动应用栏之类的功能，可以参考我的原始答案。

原答案

您可以使用我的 Flutter 包在您的应用程序中实现 Floating AppBar。

您需要在您的 pub 中添加以下包。

rounded_floating_app_bar: ^0.1.0

从命令行运行$ flutter packages get。

现在在你的 Dart 代码中，你可以使用：

import 'package:rounded_floating_app_bar/rounded_floating_app_bar.dart';
...
NestedScrollView(
  headerSliverBuilder: (context, isInnerBoxScroll) {
    return [
      RoundedFloatingAppBar(
        floating: true,
        snap: true,
        title: TextField(
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.search),
            border: InputBorder.none,
          ),
        ),
      ),
    ];
  },
  body: Container(),
),

输出：

【讨论】：

与您接受的解决方案相比，以下使用 prefixIcon 的答案是更好的答案。我会要求您将适当的答案标记为已接受的答案
大家对此感到抱歉，我已经用问题的原始上下文更新了答案。 PS：你总是可以投票给其他答案。

【解决方案7】：

使用 Just adjust in Boarder Radius 中的 prefixIcon

import 'package:flutter/material.dart';

class TextFieldShow extends StatelessWidget {
  TextEditingController _controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Tab demo"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextField(
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.blueAccent,
            ),
            decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                prefixIcon: Icon(Icons.people),
                hintText: "Enter Your Name",
                border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.blueAccent, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)),
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)))),
      ),
    );
  }
}

【讨论】：

【解决方案8】：

试试这个方法（使用prefixIcon），只需调整边框半径

TextField(
          style: TextStyle(fontSize: 25.0),
          decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            prefixIcon: Icon(Icons.search),
            hintText: "Describe your issue",
            border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.red[300], width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)
              ),
            focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.red[300], width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)))

希望对您有所帮助。

【讨论】：