CODEWITHSUNDEEP
flutterflutter-layout
randomUser786
randomUser786

Reputation: 1655

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)

Upvotes: 102

Views: 204063

Answers (8)

Shahzeb Naqvi
Shahzeb Naqvi

Reputation: 410

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

Upvotes: 13

Sana'a Al-ahdal
Sana'a Al-ahdal

Reputation: 1780

use prefixicon

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

Upvotes: 9

Niroop Nife
Niroop Nife

Reputation: 376

If you need to ad an icon in the Textfield use the arguments prefixIcon and suffixIcon inside it, like

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

Upvotes: 4

alfredo-fredo
alfredo-fredo

Reputation: 652

You can use the InputDecoration argument prefixIcon, or suffixIcon.

prefixIcon will show before the text inside your TextField.

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

prefixIcon showcase

OR

suffixIcon will show after the text inside your TextField.

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

suffixIcon showcase

ATTN: Code above does not include the border styling that is shown on the screenshots :)

Upvotes: 8

Jay Dhamsaniya
Jay Dhamsaniya

Reputation: 1881

You can try this:

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

It will be displayed as: Flutter Text Field: How to add Icon inside the border

Upvotes: 4

ibhavikmakwana
ibhavikmakwana

Reputation: 10091

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

Upvotes: 203

Neha Bhardwaj
Neha Bhardwaj

Reputation: 1393

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

Upvotes: 35

Hosar
Hosar

Reputation: 5292

Try this way (using prefixIcon), just adjust the border radius 

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

Hope this help.

Upvotes: 14

Related Questions