Flutter Add Image Icon Inside TextField Text Input Android iOS Example

TextField widget of Flutter has its own prefixIcon property which is used to automatically set Image Icon at starting of Text Input widget. Icon properties is automatically set by flutter library and there is no need to add padding or margin to the icon. By default the Icon has 48 Pixels wide in widget. In our current tutorial we are using Flutter’s own Icon library to import the icon because flutter already gives us hundred of PNG and SVG icons. So in this tutorial we would Flutter Add Image Icon Inside TextField Text Input Android iOS Example.

Contents in this project Flutter Add Image Icon Inside TextField Text Input Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create our void main runApp() method and here we would call our main MyApp class.

3. Create our main MyApp class extends with State less widget.

4. Create Widget Build area in MyApp class and now we would make Scaffold widget and inside the Scaffold widget body area we would define the Center widget.

5. Now we would make a Container widget and Root parent and as Child we would create the TextField widget. We are using prefixIcon: Icon(Icons.email) to set the Email icon from Icon library. You can call here your own icon as per your requirement.

1. width : Width of TextField Text Input widget on screen.
2. padding : Used to set padding.
3. autocorrect : To enable Auto correction in TextField widget.
4. hintText : Used to set the Hint text inside TextField widget.
5. prefixIcon : Used to set the Icon at starting of TextField widget.
6. enabledBorder : To set default border style around TextField widget.
7. focusedBorder : To change the border style on TextField selection.

6. Complete source code for main.dart file:

Screenshots: