How to Create a Text Input in Flutter

Text inputs are very important components of a mobile app. They allow users to enter text so that they can fill a form or send a message. TextField widget is used to create text inputs in Flutter.

In this Flutter tutorial, let’s go through how to create text input as well as how to retrieve the value from text input.

You have to use the stateful widget as TextField is a controlled widget. It’s better to use TextEditingController with TextField to retrieve the values entered in the inputs.

final myController = TextEditingController();

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

By overriding dispose function you can clean up the controller when the widget is disposed.

Then you just need to pass the created controller to the TextInput widget.

TextField(
              controller: myController,
            ),

I have a text input and a button in the following example. When the button is pressed the retrieved text from the input is shown as Alert Dialog. So, go through the code below for a better understanding of TextField in Flutter.

import 'package:flutter/material.dart';


class TextInputExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Text Input Example',
      home: MyInput(),
    );
  }
}

// Define a custom Form widget.
class MyInput extends StatefulWidget {
  @override
  _MyInputState createState() => _MyInputState();
}

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyInputState extends State<MyInput> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Input Tutorial'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(child: Column(children: <Widget>[TextField(
          controller: myController,
        ),
        RaisedButton(
          child: Text('Retrieve Text'),
          onPressed: (){
            return showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                // Retrieve the text the that user has entered by using the
                // TextEditingController.
                content: Text(myController.text),
              );
            },
          );
          },
        ),]
      ),
      ),
      ),   
    );
  }
}

Following is the output of the Flutter text input example.

Flutter text input example

I hope this Flutter tutorial will help you. Thank you for reading!

7 thoughts on “How to Create a Text Input in Flutter”

  1. Pingback: How to Add Placeholder Text in Flutter Text Input – Flutter For You

  2. Pingback: How to Create Text Input for Password in Flutter – Flutter For You

  3. Pingback: How to Change the Cursor Color of Text Input in Flutter – Flutter For You

  4. Pingback: How to Add Date Picker in Flutter – Flutter For You

  5. Pingback: How to Clear TextField in Flutter – Flutter For You

  6. Pingback: How to Change Keyboard Type of TextField in Flutter – Flutter For You

  7. Pingback: How to Limit Characters of TextField in Flutter – Flutter For You

Leave a Comment

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