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) {},
)Step 1
String inputValue = '';
Step 2
onChanged: (value) {
setState(() {
inputValue = value;
});
},Step 3
Text(
inputValue,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
)
Custom Flutter Textformfield OnChanged 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(
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.
