Flutter Textfield Widget : A Complete Implementation

Flutter Textfield allows you to create a text field inside the flutter. Using it users can enter text, numbers, and anything either with a hardware keyboard or with an on-screen keyboard. In flutter, you can create a text field using TextField class. You can easily manipulate using the various properties inside the TextField() constructor. In this entire tutorial, you will know how to implement Flutter Textfield in a simple method.

How to create a Flutter Textfield

You can create a Textfield using the Flutter Textfield() class. And you can accept the changes using various properties like onChanged(), onSubmit(), and many others. Let’s create a simple text field and accepts some changes from it.

Run the full code.

import 'package:flutter/material.dart';

class FlutterTextFieldApp extends StatefulWidget {
  const FlutterTextFieldApp({Key? key}) : super(key: key);

  @override
  _FlutterTextFieldAppState createState() => _FlutterTextFieldAppState();
}

class _FlutterTextFieldAppState extends State {
  late TextEditingController _controller;
  late String? text = "";

  @override
  void initState() {
    _controller = TextEditingController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter Text Field Widget")),
        body: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                text!,
                style: TextStyle(fontSize: 20, color: Colors.red),
              ),
              TextField(
                  controller: _controller,
                  onSubmitted: (value) {
                    setState(() {
                      text = value;
                    });
                  })
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(FlutterTextFieldApp());
}

Explanation of the code

Here I have created a Stateful widget and created two variables that I will use inside the text field widget. The first is the controller and the other is text. Before using these variables in any widget you have to first initialize it. Here I am initializing the controller inside the initState() method and text variable as null. The main purpose of the above code is that when you type anything inside the text field then you will see it on the screen. When you will run the above code then you will get the following output.

Output

How to manipulate TextField Widget

There are many attributes for manipulating TextField Widget. In this section, you will learn all attributes that you can use inside the TextField() class for making a beautiful TextField Widget. Let’s know each of them.

1.controller

The controller is a must for the text field without it you cannot know what is edited in the text or not. You have to first define and initialize TextEditingController inside the initState() before using this attribute.

Use the following lines of code as the initState() .

 @override
  void initState() {
    _controller = TextEditingController();
    super.initState();
  }

2. cursorColor

This attribute lets you change the color of the cursor. For example, I want to change its color to red then I will use cursorColor: Colors.red.

cursorColor: Colors.red,

3. cursorHeight

If you want to change the height of the cursor then you can use this attribute. For example, I want to change the height of the cursor to 30.

cursorHeight: 30

4. cursorWidth

In the same way, you can change the width of the cursor. Let’s change the width of  the cursor to 10

cursorWidth: 10,

5. onChanged

This attribute allows you to call a method that accepts all the changes happening in the text field. For example, I am changing the text value of the predefined text using the setState() method. Use the following lines of code for it.

onChanged: (value) {
                    setState(() {
                      text = value;
                    });
                  }

Conclusion

Flutter Textfield is a widely used widget to take input from the user. These are the attributes for manipulating the text field widget in a flutter. I hope you have liked this tutorial. If you have any query then you can contact us for more information.

Source:

Flutter Documentation