Introduction
Creating a robust Flutter login screen is often the first step in building mobile apps that require user authentication. In this tutorial, you’ll learn how to design and implement a simple yet effective Flutter login UI. We’ll cover project setup, layout structure, user input handling, and basic styling. Whether you’re building a prototype or integrating Firebase authentication later, this guide will give you a solid foundation for your Flutter login screen or Flutter login UI needs.
Project Setup
Start by creating a new Flutter project with your terminal:
flutter create login_demo
Open lib/main.dart, remove the default counter app code, and set up a basic MaterialApp:
import 'package:flutter/material.dart';
import 'login_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: LoginScreen(),
);
}
}Create a new file lib/login_screen.dart for the login screen implementation.
Designing the Login Screen UI
In login_screen.dart, define a StatefulWidget to manage form state and controllers:
import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
@override
void dispose() {
emailController.dispose();
passwordController.dispose();
super.dispose();
}Inside _LoginScreenState, implement the build method to assemble the UI:
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Welcome Back', style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
SizedBox(height: 32),
TextField(
controller: emailController,
decoration: InputDecoration(labelText: 'Email', border: OutlineInputBorder()),
keyboardType: TextInputType.emailAddress,
),
SizedBox(height: 16),
TextField(
controller: passwordController,
decoration: InputDecoration(labelText: 'Password', border: OutlineInputBorder()),
obscureText: true,
),
SizedBox(height: 24),
ElevatedButton(
onPressed: _handleLogin,
child: Text('Login'),
style: ElevatedButton.styleFrom(minimumSize: Size(double.infinity, 48)),
),
],
),
),
),
);
}This snippet lays out a clean login screen in Flutter with two text fields and a button.
Handling User Input
The _handleLogin method retrieves user input and performs basic validation:
void _handleLogin() {
final email = emailController.text.trim();
final password = passwordController.text;
if (email.isEmpty || password.isEmpty) {
_showError('Please fill in all fields');
return;
}
print('Email: $email, Password: $password');
}
void _showError(String message) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(message), backgroundColor: Colors.redAccent),
);
}
}
This code demonstrates how to access the text controllers and display feedback using SnackBar. Later, you can replace the print statement with real authentication logic.
Styling and Theming
To make your Flutter login screen visually appealing, leverage Flutter’s theming system:
• Define custom colors in ThemeData (e.g., primaryColor, accentColor).
• Use InputDecorationTheme to style all text fields consistently.
• Configure ElevatedButtonThemeData for button shapes and padding.
Example ThemeData adjustments in main.dart:
theme: ThemeData(
primaryColor: Colors.indigo,
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.indigo,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
),
),Applying these themes ensures a cohesive Flutter login page design.
Vibe Studio
Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.
Conclusion
You’ve now built a straightforward Flutter login screen UI that captures user input, offers basic validation, and applies consistent styling through theming. This pattern can be extended with Firebase Authentication, form validation packages, or advanced UI widgets. Mastering the basics of the login screen in Flutter sets you up for more complex app workflows, such as registration flows or social login integrations.
