Flutter Create TextField with Icon

Flutter has given us every option to customize the TextField widget in any way possible. To add Icon at in TextField widget before text we have a property prefixIcon. It allow us to call flutter own inbuilt icons and we can call Google icons here also. Here is the list of Icons comes inbuild in flutter.

Flutter Create TextField with Icon

1. Define without focus and with focus border style for TextField.

static const border = OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
    borderSide: BorderSide(color: Colors.grey, width: 2),
  );

  static const focusBorder = OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
      borderSide: BorderSide(color: Colors.cyan, width: 2));

2. Creating TextField widget and define prefixIcon property and call icon from Icon library. You can find list of all Icons HERE.

Container(
	// width: 320,
	margin: const EdgeInsets.all(18.0),
	child: const TextField(
	  autocorrect: true,
	  decoration: InputDecoration(
		hintText: 'Type Name Here...',
		prefixIcon: Icon(Icons.account_circle_sharp),
		hintStyle: TextStyle(color: Colors.grey),
		filled: true,
		fillColor: Colors.white,
		enabledBorder: border,
		focusedBorder: focusBorder,
	  ),
	))

Screenshot of TextField without focus:

Screenshot of TextField with Focus:

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const border = OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
    borderSide: BorderSide(color: Colors.grey, width: 2),
  );

  static const focusBorder = OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
      borderSide: BorderSide(color: Colors.cyan, width: 2));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Container(
                    // width: 320,
                    margin: const EdgeInsets.all(18.0),
                    child: const TextField(
                      autocorrect: true,
                      decoration: InputDecoration(
                        hintText: 'Type Name Here...',
                        prefixIcon: Icon(Icons.account_circle_sharp),
                        hintStyle: TextStyle(color: Colors.grey),
                        filled: true,
                        fillColor: Colors.white,
                        enabledBorder: border,
                        focusedBorder: focusBorder,
                      ),
                    )))));
  }
}