How To Use Flutter Textformfield Controller

In this tutorial, we’ll learn how to properly use Flutter textformfield controller by using a practical Flutter code example.

Introduction: Flutter Textformfield Controller

It can be used to store the the data that the user input using Flutter textformfield. In our example, we’ll use Flutter textformfield controller to show the input of user in Flutter text widget. So when the user input something, it’ll be shown in that text widget in real-time.

So let’s get right into its practical implementation.

Implementing Flutter Textformfield Controller (Easy Example Code)

Follow below steps to understand the working of controller in textformfield widget.

Step 1: Specify a Text Editing Controller

TextEditingController textController=TextEditingController();

Now we’ve a controller that will be used to store and show data.

Step 2: Dispose this Controller

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

Don’t forget to dispose the controller after its used or else memory leaks will occur.

Step 3: Implement Controller in Flutter Textformfield

TextFormField(
            controller: textController,
            onChanged: (value) {
              setState(() {});
            },
          )

We’ve implemented a simple Flutter textformfield widget and have passed the specified text controller to the controller constructor of textformfield class. We’ve also used set state inside the function passed to onChanged constructor. Reason is that whenever the user add/remove an input, then this onChanged got will be triggered which will set the state.

Step 4: Define a Simple Flutter Text Widget

Text(textController.text)

We’ve a simple text widget with controller text. We’ve used Flutter column widget to show both the text widget and Flutter textformfield in a vertical line. Also we’ve used a Flutter sizedBox widget to create a distance between the text and textformfield. The complete source code will be provided in the below section.

Let’s now give this textformfield an input and see if Flutter textformfield controller is properly working or not.

As you can see in the above image that Flutter textformfield controller is working just fine.

So this is how you can easily implement controller in textformfield widget. Do comment if you still have any questions regarding the usage of controller in Flutter textformfield widget. I’ll be more than happy to answer all.

The complete source code is available in the below section.

Flutter Textformfield Controller Implementation Source Code

flutter textformfield controller

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(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  TextEditingController textController = TextEditingController();
  @override
  void dispose() {
    textController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 30),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(textController.text),
          SizedBox(
            height: 30,
          ),
          TextFormField(
            controller: textController,
            onChanged: (value) {
              setState(() {});
            },
          ),
        ],
      ),
    ))));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to implement Flutter textformfield controller. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.

How To Use Flutter Textformfield Controller – Easy Flutter Example Code