How To Use Flutter Textformfield OnChanged [Easy Flutter Code Example]

In this tutorial, we’ll learn what Flutter textformfield onChanged is and how to properly use it. We’ll be using practical Flutter code example for better understanding.

Introduction: Flutter Textformfield OnChanged

Flutter textformfield onChanged is executed whenever the user input or delete something from the Flutter textformfield. It is called for each input made to the Flutter textformfield. It can be used to store the input in a variable.

Don’t worry, I will implement it using a proper example so you can practically understand the working of Flutter textformfield onChanged.

Implementing Flutter Textformfield OnChanged (Easy Example)

To implement Flutter textformfield onChanged, we’ve to use the onChanged constructor of Flutter textformfield. It takes a function with a string parameter. By using that string we can take the input value and store it in some variable.

TextFormField(
        onChanged: (value) {},
         )

As we can see in the above code, this is how Flutter textformfield onChanged looks like. Let’s now implement our logic. We’ll create a variable string and pass that value(onChanged function parameter) in that string variable. Now whenever the user inputs something, it will be stored in that string variable. We’ll show that on top of the Flutter textformfield for demonstration. Let’s implement it step by step:

Step 1

String inputValue = '';

We’ve created a string variable with input value name and passed it an empty string.

Step 2

 onChanged: (value) {
                setState(() {
                   inputValue = value;
                          });
                    },

Now in the Flutter textformfield onChanged, we’ve passed the value(onChanged function parameter) to string variable. You can use the print and pass the input value variable to it and try to input or delete input and you will see that this variable is successfully storing that value. We’ve used the set state to change/update the state of screen whenever onChanged is called. We’ve used it so we can see the stored text in screen(realtime).

Step 3

 Text(
       inputValue,
       style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
     )

We’ve used Flutter text widget and have passed it the input value string. Now whenever the use entered or remove something for the Flutter textformfield then it will be shown on the screen. Let’s now see whether it works or not, see the below image for this:

We can see in that image that when we enter or delete an input then it is shown in the above Flutter text widget which is what we wanted to implement.

If you want to learn about Flutter textfield customization then click here.

Hope you now have a complete idea of how to use Flutter textformfield onChanged.

The complete source code of Flutter textformfield onChanged implementation is given in the next section.

Custom Flutter Textformfield OnChanged Source Code

flutter textformfield onchanged

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> {
  String inputValue = '';
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    inputValue,
                    style: TextStyle(
                        fontSize: 18,
                        color: Colors.pink,
                        fontWeight: FontWeight.w600),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  TextFormField(
                    onChanged: (value) {
                      setState(() {
                        inputValue = value;
                      });
                    },
                    style: TextStyle(color: Colors.pink),
                    cursorColor: Colors.pink,
                    decoration: InputDecoration(
                        filled: true,
                        fillColor: Colors.pink.withOpacity(.08),
                        prefixIcon: Icon(
                          Icons.email,
                          color: Colors.pink,
                        ),
                        suffixIcon: Icon(
                          Icons.visibility,
                          color: Colors.pink,
                        ),
                        labelText: 'Enter your email',
                        labelStyle:
                            TextStyle(color: Colors.pink.withOpacity(.8)),
                        enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.pink),
                            borderRadius: BorderRadius.circular(30).copyWith(
                                bottomRight: Radius.circular(0),
                                topLeft: Radius.circular(0))),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.pink),
                            borderRadius: BorderRadius.circular(30).copyWith(
                                bottomRight: Radius.circular(0),
                                topLeft: Radius.circular(0)))),
                  )
                ],
              ))),
    ));
  }
}

Conclusion

To conclude this tutorial, hope you now have a detailed practical knowledge of how to properly use Flutter textformfield onChanged. 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.