Flutter文本框：如何在边框内添加图标

Question

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

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),
    ),
   ),
  ),

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

- randomUser786

---

你想要一个类似于谷歌应用程序的浮动式应用栏吗？ - ibhavikmakwana

ibhavikmakwana 是的 - randomUser786

Answer 1

修改后的答案

我更新了答案，因为原先的回答并没有涵盖问题的原始背景。

你可以在 TextField 或者 TextFormField 中使用 prefixIcon 来得到一些小部件作为你 TextField 的前导。

例如：

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

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

如果你想实现类似浮动应用栏的效果，可以参考我的原始答案。

原始答案：

你可以使用我的Flutter包在你的应用程序中实现浮动应用栏。

你需要在你的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(),
),

输出：

- ibhavikmakwana

---

以下答案使用prefixIcon作为更好的解决方案，相比您接受的解决方案。我请求您将适当的答案标记为已接受的答案。 - Chetan

大家好，很抱歉，我已经更新了答案并附上了问题的原始上下文。顺便说一句，您可以随时为其他答案点赞。 - ibhavikmakwana

Answer 2

在边界半径中使用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)))),
      ),
    );
  }
}

- Neha Bhardwaj

Answer 3

试试这种方式（使用 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)))

希望这有所帮助。

- Hosar

Answer 4

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',
      ),
    ),

- Shahzeb Naqvi

Answer 5

使用前缀图标

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

- Sana'a Al-ahdal

Answer 6

您可以使用InputDecoration的prefixIcon或suffixIcon参数。 prefixIcon会显示在TextField中文本之前。

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

前缀图标演示

OR

在您的文本字段中，后置图标会显示在文本后。

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

后缀图标展示

注意：上面的代码未包含屏幕截图中显示的边框样式 :)

- alfredo-fredo

Answer 7

如果你需要在文本字段中添加图标，可以使用 prefixIcon 和 suffixIcon 参数，并将其放置在其中，例如：

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

- Niroop Nife

---

要将图标放在右侧，"suffixIcon" 对我很有效！感谢！ - iHarshil

Answer 8

您可以尝试这个：

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,
          ),
        ),
      )
    ],
  ),
)

将显示为：

- Jay Dhamsaniya