What is Controller in Flutter

What is Controller

As per the name controller so our basic idea is something is controlled by this property but what? So, the answer is If you have an editable text widget then you need to store the value of that text somewhere. The simplest way is by setting a TextEditingController as the controller of a TextField. The value of the textField is updated with the use of this controller. 

How to use the controller with the example:-

We are taking an example to Retrieve the value of a text field that is entered by the user and that value is shown us in the snackbar Let's start with the following steps:

1. Create a TextEditingController

To retrieve the text from the text field entered by the user, we create a TextEditingController and set it to a TextField or TextFormField. TextFormField is also working as TextField which we are discussing more in further blog with detail.

	final _userNameController = TextEditingController();
	final _passwordController = TextEditingController();

view raw main.dart hosted with ❤ by GitHub

Note: you need to call dispose of the method of the TextEditingController when you have finished using it and not further needed. This ensures that you discard any resources used by the object.

	@override
	void dispose() {
	_userNameController.dispose();
	_passwordController.dispose();
	super.dispose();
	}

view raw main.dart hosted with ❤ by GitHub

2. Set the TextEditingController to a TextField property controller

Now that you have a TextEditingController, wire it up to a text field using the controller property:

	TextField(
	controller: _userNameController,
	);
	TextField(
	controller: _passwordController,
	);

view raw main.dart hosted with ❤ by GitHub

3. Display the current value of the textField in snackbar

After Setting up the TextEditingController to the text field, With the use of the text() method which is provided by the TextEditingController, you can retrieve any kind of value that the user has entered into the textField.

The following code displays the current value of the textField and shows it in Snackbar when the user onPressed on the ElevatedButton button.

	ElevatedButton(
	onPressed: () {
	print(
	'UserName: ${_userNameController.text} \n Password: ${_passwordController.text}');
	ScaffoldMessenger.of(context).showSnackBar(SnackBar(
	content: Text(
	'UserName: ${_userNameController.text} \nPassword: ${_passwordController.text}'),
	));
	},
	child: Text(
	"Login",
	style: TextStyle(fontSize: 25),
	),
	)

view raw main.dart hosted with ❤ by GitHub

So, here I have shared the screens in which you can see the text field for the username & password and the login button for retrieving data from the text field.

This is the screen where we are retrieving text from the text field onPressed of the login button and show the data in Snackbar.

Below example code contains all the properties as per discussion :

	import 'package:flutter/material.dart';
	void main() {
	runApp(MyApp());
	}
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Flutter Demo',
	theme: ThemeData(
	primarySwatch: Colors.purple,
	accentColor: Colors.orange,
	),
	home: MyHomePage(),
	);
	}
	}
	class MyHomePage extends StatefulWidget {
	@override
	_MyHomePageState createState() => _MyHomePageState();
	}
	class _MyHomePageState extends State<MyHomePage> {
	final _userNameController = TextEditingController();
	final _passwordController = TextEditingController();
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text("Example Controller and FocusNode"),
	),
	body: Container(
	margin: EdgeInsets.all(20),
	child: Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[
	TextField(
	decoration: InputDecoration(
	hintText: 'Enter Username',
	),
	textAlign: TextAlign.justify,
	keyboardType: TextInputType.name,
	textInputAction: TextInputAction.next,
	controller: _userNameController,
	),
	SizedBox(
	height: 30,
	),
	TextField(
	decoration: InputDecoration(
	hintText: 'Enter Password',
	),
	textAlign: TextAlign.justify,
	keyboardType: TextInputType.text,
	obscureText: true,
	obscuringCharacter: "*",
	textInputAction: TextInputAction.done,
	controller: _passwordController,
	),
	SizedBox(
	height: 30,
	),
	ElevatedButton(
	onPressed: () {
	print(
	'UserName: ${_userNameController.text} \n Password: ${_passwordController.text}');
	ScaffoldMessenger.of(context).showSnackBar(SnackBar(
	content: Text(
	'UserName: ${_userNameController.text} \nPassword: ${_passwordController.text}'),
	));
	},
	child: Text(
	"Login",
	style: TextStyle(fontSize: 25),
	),
	)
	],
	),
	),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub