Flutter Text Field: How to add Icon inside the border

The Search Bar to Replicate

I would like to add the icon in the search bar. Here is my code so far:

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

This is the result of the code above (this is not what i want):

Output of my code (this is not what i want)

144129 次浏览
小开

尝试这种方式(使用 前缀图标) ，只是调整边界半径

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

希望这个能帮上忙。

小开

使用前缀图标在刚刚调整的边界半径

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

enter image description here

小开
最佳答案

编辑答案

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

您可以使用 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 包在您的应用程序中实现 浮动应用程序栏。

您需要添加下面的包在您的酒吧。

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

产出:

Image Output

小开

使用前缀

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

你可以试试这个:

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

它将显示如下: Flutter Text Field: How to add Icon inside the border

小开

如果需要在 Textfield 中添加图标，请使用其中的参数 前缀图标和 后缀图标，如

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

您可以使用 InputDecoration 参数 prefixIcon 或后缀 Icon。

PrefixIcon 将在 TextField 中显示 之前文本。

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

前缀图标展示

或者

后缀图标 将在 TextField 中显示 之后文本。

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

后缀图标展示

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

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

提交答案