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();
Step 2: Dispose this Controller
@override
void dispose() {
textController.dispose();
super.dispose();
}Step 3: Implement Controller in Flutter Textformfield
TextFormField(
controller: textController,
onChanged: (value) {
setState(() {});
},
)Step 4: Define a Simple Flutter Text Widget
Text(textController.text)
Flutter Textformfield Controller Implementation 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> {
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.
