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):
“how to put a icon in hint text field flutter” Code Answer'sFlutter has WidgetSpan() to add a widget inside the RichText(). You can treat the child of WidgetSpan like the usual widget.
Step 1: Locate the file where you have placed the TextField widget. Step 2: Inside the TextField widget, add the decoration parameter and assign the InputDecoration widget. Step 3: Inside the InputDecoration widget, add the enabledBorder parameter and assign the OutlineInputBorder widget.
Edited Answer
Updating answer as my original answer doesn't actually cover the original context of the question.
You can use the prefixIcon
in the TextField
or in the TextFormField
to get some widget as a leading in your TextField
.
Example
TextField( // ...,other fields decoration: InputDecoration( prefixIcon: prefixIcon??Icon(Icons.done), ), ),
PS: Do not get confuse between
prefixIcon
andprefix
as this two are different things. https://api.flutter.dev/flutter/material/InputDecoration/prefix.html
Also if you want to achieve something like floating app bar then you can refer to my original answer.
Original answer
You can use my Flutter package to implement Floating AppBar in your application.
You need to add below package in your pub.
rounded_floating_app_bar: ^0.1.0
run $ flutter packages get
from the command line.
Now in your Dart code, you can use:
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(), ),
Output:
Use the prefixIcon in Just adjust in Boarder Radius
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)))), ), ); } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With