Handling user input is a crucial part of any interactive application. In Dart, especially when working with Flutter using Android Studio, capturing and processing user input is both straightforward and efficient. Whether you’re creating a login form, feedback submission, or dynamic UI interaction, Dart provides flexible tools to manage text fields, buttons, and form validation.
Handle User Input in Dart
In this guide, you’ll learn how to:
- Capture user input using
TextField
- Manage input using
TextEditingController
- Validate input fields
- Respond to form submission
We will build a simple Flutter app that accepts a user’s name and email address, then displays it after submission. Make sure your Flutter and Dart environment is properly set up in Android Studio. If not, check out the official Flutter installation guide.
Step 1: Create a New Flutter Project
In Android Studio:
- Go to
File > New > New Flutter Project
.
- Choose Flutter Application, name your project, and click Finish.
Step 2: Main UI Code (main.dart)
import 'package:flutter/material.dart';
import 'user_input_form.dart';
class MyApp extends <a href="https://aliendro.id/create-ui-with-statelesswidget-in-dart/">StatelessWidget</a> {
const MyApp({super.key});
Widget build(BuildContext context) {
title: 'User Input Demo',
primarySwatch: Colors.blue,
home: const UserInputForm(),
import 'package:flutter/material.dart';
import 'user_input_form.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends <a href="https://aliendro.id/create-ui-with-statelesswidget-in-dart/">StatelessWidget</a> {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'User Input Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const UserInputForm(),
);
}
}
import 'package:flutter/material.dart';
import 'user_input_form.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'User Input Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const UserInputForm(),
);
}
}
Step 3: Create User Input Form Class (user_input_form.dart)
import 'package:flutter/material.dart';
class UserInputForm extends <a href="https://aliendro.id/statefulwidget-vs-statelesswidget-in-dart-guide/">StatefulWidget</a> {
const UserInputForm({super.key});
State<UserInputForm> createState() => _UserInputFormState();
class _UserInputFormState extends State<UserInputForm> {
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
String _submittedData = '';
if (_formKey.currentState!.validate()) {
'Name: ${_nameController.text}\nEmail: ${_emailController.text}';
_nameController.dispose();
_emailController.dispose();
Widget build(BuildContext context) {
title: const Text('Handle User Input'),
padding: const EdgeInsets.all(16.0),
controller: _nameController,
decoration: const InputDecoration(labelText: 'Name'),
if (value == null || value.isEmpty) {
return 'Please enter your name';
controller: _emailController,
decoration: const InputDecoration(labelText: 'Email'),
return 'Please enter a valid email';
const SizedBox(height: 20),
child: const Text('Submit'),
const SizedBox(height: 20),
style: const TextStyle(fontSize: 16),
import 'package:flutter/material.dart';
class UserInputForm extends <a href="https://aliendro.id/statefulwidget-vs-statelesswidget-in-dart-guide/">StatefulWidget</a> {
const UserInputForm({super.key});
@override
State<UserInputForm> createState() => _UserInputFormState();
}
class _UserInputFormState extends State<UserInputForm> {
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
String _submittedData = '';
void _submitForm() {
if (_formKey.currentState!.validate()) {
setState(() {
_submittedData =
'Name: ${_nameController.text}\nEmail: ${_emailController.text}';
});
}
}
@override
void dispose() {
_nameController.dispose();
_emailController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Handle User Input'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
controller: _nameController,
decoration: const InputDecoration(labelText: 'Name'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your name';
}
return null;
},
),
TextFormField(
controller: _emailController,
decoration: const InputDecoration(labelText: 'Email'),
validator: (value) {
if (value == null ||
value.isEmpty ||
!value.contains('@')) {
return 'Please enter a valid email';
}
return null;
},
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _submitForm,
child: const Text('Submit'),
),
const SizedBox(height: 20),
Text(
_submittedData,
style: const TextStyle(fontSize: 16),
),
],
),
),
),
);
}
}
import 'package:flutter/material.dart';
class UserInputForm extends StatefulWidget {
const UserInputForm({super.key});
@override
State<UserInputForm> createState() => _UserInputFormState();
}
class _UserInputFormState extends State<UserInputForm> {
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
String _submittedData = '';
void _submitForm() {
if (_formKey.currentState!.validate()) {
setState(() {
_submittedData =
'Name: ${_nameController.text}\nEmail: ${_emailController.text}';
});
}
}
@override
void dispose() {
_nameController.dispose();
_emailController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Handle User Input'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
controller: _nameController,
decoration: const InputDecoration(labelText: 'Name'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your name';
}
return null;
},
),
TextFormField(
controller: _emailController,
decoration: const InputDecoration(labelText: 'Email'),
validator: (value) {
if (value == null ||
value.isEmpty ||
!value.contains('@')) {
return 'Please enter a valid email';
}
return null;
},
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _submitForm,
child: const Text('Submit'),
),
const SizedBox(height: 20),
Text(
_submittedData,
style: const TextStyle(fontSize: 16),
),
],
),
),
),
);
}
}
Explanation
TextFormField
is used to capture user input.
TextEditingController
allows the app to read and modify the contents of the text fields.
- Validation is handled through the
validator
parameter to ensure the fields are not empty.
- After submission, the result is displayed in a
Text
widget.
This example demonstrates the basics of handling user input in Dart with Flutter, structured properly for Android Studio projects. You can enhance this by integrating backend APIs, local storage, or more complex form fields.
Post Views: 26