In this blog I will creating a forms in flutter apps. Here are The majority of mobile applications require forms. Forms let you collect structured user input whether you’re creating a registration form, login page, or user feedback collection tool. It has never been simpler to create responsive and interactive forms. We’ll go over the process of creating forms in Flutter apps in 2025 in detail in this tutorial.
Table of Contents
Why we use forms in flutter apps :
When managing and group of several input fields (such as TextFormField) together in Flutter, particularly when handling validation and storing user input, we utilize the Form widget.
This is why Form is helpful:
Validation makes simple: You can use a FormState to validate all fields at once using formKey.currentState!.validate(), rather than validating each field individually.
Data management: By utilizing formKey.currentState!.save(), the form can gather and store data from several fields simultaneously.
Global key control: You can fully control the form’s state (validate, reset, and save) from outside the widget tree by utilizing a GlobalKey.
Cleaner code: This prevents your validation logic and input handling from being dispersed throughout several widgets.
Example of forms in flutter apps :
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
final TextEditingController emailPhoneController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
final PasswordVisibility passwordCtrl = Get.put(PasswordVisibility());
final List<Map<String, String>> dummyUsers = [
{"email": "admin@gmail.com", "password": "admin"},
{"email": "user1@gmail.com", "password": "123456"},
{"email": "user2@gmail.com", "password": "password"},
{"email": "9876543210", "password": "phonepass"}, // phone login
];
@override
void dispose() {
emailPhoneController.dispose();
passwordController.dispose();
super.dispose();
}
void _dummyLogin() {
if (_formKey.currentState?.validate() ?? false) {
Get.focusScope?.unfocus();
final emailOrPhone = emailPhoneController.text.trim();
final password = passwordController.text.trim();
/// check inside dummy list
final user = dummyUsers.firstWhereOrNull((u) =>
u["email"] == emailOrPhone && u["password"] == password);
if (user != null) {
CustomSnackbar.showSuccess(
title: "Login", message: "Welcome ${user["email"]}");
Get.offAll(() => const DashboardPage());
} else {
CustomSnackbar.showError(
title: "Login Failed",
message: "Invalid email/phone or password",
);
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
centerTitle: true,
title: CustomTextWidget(
text: "Base Programmer",
fontsize: 24,
color: AppColors.textColor,
fontWeight: FontWeight.bold,
),
),
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: CustomTextWidget(
text: "Login",
fontsize: 30,
color: AppColors.textColor,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const CustomLabelText(
text: "Enter Email / Phone",
isRequired: true,
),
const SizedBox(height: 5),
CustomTextFormField(
hintText: 'Enter Email or Phone',
controller: emailPhoneController,
validator: (value) {
if (value == null || value.isEmpty) {
return "Required";
}
return null;
},
),
const CustomLabelText(text: "Password", isRequired: true),
const SizedBox(height: 5),
Obx(
() => CustomTextFormField(
hintText: 'Enter Password',
controller: passwordController,
obscureText: !passwordCtrl.isPasswordVisible.value,
suffixIcon: passwordCtrl.isPasswordVisible.value
? Icons.visibility
: Icons.visibility_off,
onSuffixTap: () {
passwordCtrl.toggleVisibility();
},
validator: (value) {
if (value == null || value.isEmpty) {
return "Password required";
}
return null;
},
),
),
const SizedBox(height: 20),
CustomButton(
text: "Login",
textSize: 14,
backgroundColor: AppColors.btnBgColor,
height: 62,
width: double.infinity,
onPressed: _dummyLogin,
),
],
),
),
],
),
),
),
),
);
}
}
Conclusion:
A well-organized and efficient means of handling user input, particularly when working with many fields, is using Forms in Flutter. It is simple to validate, save, and clear each field with a single FormState by encapsulating input widgets in a Form. It makes code cleaner and more logical in addition to centralizing where the validation is occurring. Forms provide complete control of their state assisted through a GlobalKey<FormState>, in turn facilitating easy data flow management within an application. On balance, the use of forms increases scalability, assures a superior user experience through the prevention of invalid input, and renders a codebase more maintainable.
Read officials Documentation : Click Here