Textfield In Flutter App Detailed Explanation With Example

In this tutorial, we will explore the Flutter textfield widget. We’ll delve into what it is, its purpose, and how it can be used in a Flutter app. We’ll go through multiple code examples to better understand this widget.

What is Flutter Textfield Widget?

The text field is used to input values from users in the flutter app. The input is in the form of a string. Some examples include the login screen where the user is required to input an email or password or the registration screen where a new user is added based on the data that is inputted using the text fields.

Let’s now directly jump into the textfield implementation.

Flutter Text Field Implementation

Scaffold(
        body: Center(
          child: TextField(),
        ),
      )

We have used the textfield class and as we can see above the textfield is shown on the screen with a bottom border, by default, it will not show any text so we have inputted a text from the keyboard and as you can see the textfield in flutter is successfully implemented.

Input Text Style

style: TextStyle(
        color: Colors.blue.shade900, 
        fontSize: 20
                )

We can use the style constructor of the textfield to style the user-inputted text. For demonstration, we have given a blue color to the text and a font size of 20. Click here to learn more about how to style a text.

Remember, it will only style the text that will be inputted by the user. You can see in the image that the inputted text is blue.

Input Decoration

 TextField(
        decoration: InputDecoration(),
          )

Using the decoration constructor of the textfield, we can now decorate our textfield by using the input decoration class. Let’s now try to use every constructor of the input decoration class.

Flutter Textfield Hint Text

decoration: InputDecoration(
              hintText: 'Enter something'
                           )

Using the hint text constructor of the input decoration class, we can give a hint message to the user about what to fill in that specific field or any text we want, whenever the user starts inputting value in that textfield then that hint text disappears, and if the user removes all the inputted value then this hint text will again be visible.

Flutter Textfield Hint Style

 hintStyle: TextStyle(color: Colors.grey, fontSize: 15)

We can use the hint style constructor of the input decoration class to style our hint text. As you can see above, we have specified the hint text color to grey and the font size to 15. You can change other properties like font weight, style, etc.

Flutter Textfield Fill Color and Filled

fillColor: Colors.blue.shade200,
filled: true,

To give a background color to our textfield, we have to use the fill color constructor of the input decoration class. But keep in mind that, even if you specify some color in the fill constructor, you won’t see the specified color in the background of the textfield.

For that, you must use the filled constructor as well, which takes a Boolean(true, false) value. So, to see the fill color that you specify, you must set the filled constructor to true. Now, if you look at the image, you will see a flutter textfield filled with a blue color. We have made the hint text color white just for demonstration purposes.

Note

We have wrapped our textfield with a padding widget and have specified some horizontal padding.

Flutter Textfield Prefix Icon

 prefixIcon: Icon(Icons.email)

As we can see, we can use the prefix icon constructor of the input decoration class, to specify an icon before the inputted text. As you can see in the image above, but keep in mind that, the prefix icon takes a widget, so we can pass any other widget as well.

Flutter Textfield Prefix Icon Constraints

prefixIconConstraints:
     BoxConstraints(maxHeight: 30, maxWidth: 30)

The prefix icon constraints constructor is used to specify the extent of the prefix icon, we have specified the max height to 30 and the max width to 30 as well. We have used a colored container, just to demonstrate visually the extent of the prefix icon. You can use any other widget and specify its max width and height or min-width or height. Play with the values, until you get your desired height or width.

Flutter Textfield Suffix Icon and Constraints

  suffixIcon: Icon(Icons.visibility_off),
  suffixIconConstraints:
        BoxConstraints(maxHeight: 30, maxWidth: 30)

flutter text field suffix icon constraints

As you can see in the image, the suffix icon comes at the end of the text field, it works the same as the prefix, it also takes a widget and it has also a constructor named suffix icon constraints through which we can change its height and width extent.

Flutter Textfield Prefix

prefix: Icon(
             Icons.email,
             color: Colors.grey,
              size: 14,
                  )

It is different from the prefix icon, the constructor prefix takes a widget and is only visible when the user taps on the text field or starts typing. When the text field is focused, we can see the prefix. As you can see in the image above, the small email icon after the prefix icon is the prefix.

Flutter Textfield Border

 border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(50),
                      borderSide: BorderSide(color: Colors.grey)
                           )

To give the text field a border, we have to use the border constructor of the input decoration class, we have passed the outline input border class to the border constructor. If you pass InputBorder.none then all of the borders will be removed including the bottom border as well.

We have used the border-radius constructor to make the edges rounded and the border side constructor of the outline input border to make the border color grey, we can use the width constructor of the border side class to make the border thick or thin by passing greater or less value to it.

Flutter Textfield Auto Focus

autofocus: true

By using the autofocus constructor and specifying it to true will make it automatically focus on this text field e.g. if you navigate to this page then this text field will be automatically focused with an automatic keyboard popup.

Custom Flutter Textfield Widget Source Code

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Text Field',

      debugShowCheckedModeBanner: false,

      home: HomePage(),

    );

  }

}

class HomePage extends StatefulWidget {

  const HomePage({Key? key}) : super(key: key);

  @override

  State<HomePage> createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  @override

  Widget build(BuildContext context) {

    return SafeArea(

      child: Scaffold(

        body: Center(

          child: Padding(

            padding: EdgeInsets.symmetric(horizontal: 20),

            child: TextField(

              autofocus: true,

              style: TextStyle(color: Colors.blue.shade900, fontSize: 20),

              decoration: InputDecoration(

                  border: OutlineInputBorder(

                      borderRadius: BorderRadius.circular(50),

                      borderSide: BorderSide(color: Colors.grey)),

                  prefixIcon: Icon(Icons.email),

                  suffixIcon: Icon(Icons.visibility_off),

                  hintText: 'Enter your email',

                  hintStyle: TextStyle(color: Colors.grey, fontSize: 15)),

            ),

          ),

        ),

      ),

    );

  }

}

Conclusion

As a final point, we hope that you have gained a comprehensive and practical understanding of how to effectively customize the Flutter textField widget. We look forward to receiving your valuable feedback.

We’d be super delighted to see you visit our other articles on Flutter app development and Python programming. Thank you for reading this one.