Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)

like image 417
randomUser786 Avatar asked Apr 30 '19 22:04

randomUser786


People also ask

How do I add icons to hint text Flutter?

“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.

How do you put a border around a TextField in Flutter?

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.


2 Answers

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 and prefix 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:

Image Output

like image 130
ibhavikmakwana Avatar answered Sep 21 '22 18:09

ibhavikmakwana


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

enter image description here

like image 26
Neha Bhardwaj Avatar answered Sep 24 '22 18:09

Neha Bhardwaj