How to Add Icon inside TextField in Flutter

TextField is a very important widget in Flutter. Having an icon inside TextField can help users to identify the content to enter in it. Let’s see how to add an icon inside the TextField in Flutter.

InputDecoration class helps you to style the TextField. Its icon property allows you to add icon in the TextField.

TextField(
          decoration: InputDecoration(icon: Icon(Icons.account_balance)),
          ),

As you see in the following screenshot, the icon is really outside of the TextField.

flutter textfield icon

If you want to place the icon exactly inside the TextInput then use prefixIcon property.

TextField(
          decoration: InputDecoration(prefixIcon: Icon(Icons.account_balance)),
          ),

And you get the output as given below.

flutter textfield icon

Following is the complete flutter example add icon inside TextField.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TextInput Icon Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatefulWidget {
  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  final myController = TextEditingController();

  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TextInput with Icon'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Center(
            child: TextField(
              decoration:
                  InputDecoration(prefixIcon: Icon(Icons.account_balance)),
              // controller: myController,
            ),
          ),
        ));
  }
}

I hope this Flutter tutorial will be helpful for you.

Leave a Comment

Your email address will not be published. Required fields are marked *