In this tutorial, we’ll learn how to properly use Flutter textfield controller by using a practical Flutter code example.
Introduction: Flutter Textfield Controller
It can be used to store the the data that the user input using Flutter textfield. In our example, we’ll use Flutter textfield 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 Textfield Controller (Easy Example Code)
Follow below steps to understand the working of controller in textfield widget.
Step 1: Specify a Text Editing Controller
TextEditingController textController=TextEditingController();
Step 2: Disposing the Controller
@override
void dispose() {
textController.dispose();
super.dispose();
}Step 3: Implementing Controller in Flutter Textfield
TextField(
controller: textController,
onChanged: (value) {
setState(() {});
},
)Step 4: Define a Simple Flutter Text Widget
Text(textController.text)
Flutter Textfield 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,
),
TextField(
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 textfield 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.
