Simple Flutter Login UI with TextField and Button – Step-by-Step Guide
Learn how to design a clean and functional login screen in Flutter using TextField and ElevatedButton. Follow this beginner-friendly guide with complete code and easy explanations.
Build a Login Page UI using TextField and ElevatedButton in Flutter
Creating a login screen is one of the first things you do when building a mobile app. In this tutorial, we’ll walk step-by-step through building a clean and responsive login UI using Flutter widgets like TextField and ElevatedButton.
🎯 What You Will Learn:
-
How to use
TextFieldto accept user input (email and password) -
How to use
ElevatedButtonto create a login button -
How to structure your login screen using Flutter layout widgets
🚀 Step 1: Create a New Flutter Project
First, open your terminal or IDE and run this command to create a new Flutter app:
flutter create login_ui
Now, navigate into the project folder:
cd login_ui
Open the project in your favorite code editor (like VS Code or Android Studio).
🏗 Step 2: Clean Up the main.dart File
Replace everything in the lib/main.dart file with the following code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Login UI',
home: const LoginPage(),
);
}
}
✅ Explanation:
-
runApp()starts your app. -
MyAppis the root widget of the application. -
MaterialAppprovides the basic design style and routing. -
LoginPagewill be the screen we design next.
🧱 Step 3: Build the LoginPage UI
Now let’s create the login UI. Replace or extend the code in the same file with this:
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
void handleLogin() {
String email = emailController.text;
String password = passwordController.text;
// For now, just print the values
print('Email: $email');
print('Password: $password');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Login'),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Email Field
TextField(
controller: emailController,
decoration: const InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.emailAddress,
),
const SizedBox(height: 16),
// Password Field
TextField(
controller: passwordController,
decoration: const InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
obscureText: true,
),
const SizedBox(height: 24),
// Login Button
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: handleLogin,
child: const Text('Login'),
),
),
],
),
),
);
}
}
📝 Step-by-Step Code Explanation
🔹 1. TextEditingController
-
These are used to control and get the input from
TextField.
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
🔹 2. TextField Widget
-
Used to take input from the user.
-
One
TextFieldfor email, another for password.
TextField(
controller: emailController,
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
)
-
controller: links the field to a variable. -
labelText: label shown inside the field. -
border: gives the field a border outline. -
keyboardType: helps suggest a suitable keyboard (e.g., email).
🔹 3. obscureText: true
-
Used in the password field to hide the input like ****.
🔹 4. ElevatedButton
-
A material-style raised button.
-
Executes the
handleLogin()function when clicked.
ElevatedButton(
onPressed: handleLogin,
child: Text('Login'),
)
🔹 5. handleLogin()
-
Fetches and prints the user input.
void handleLogin() {
String email = emailController.text;
String password = passwordController.text;
print('Email: $email');
print('Password: $password');
}
You can later replace print() with authentication logic.
📱 Final Output
When you run the app, you’ll see a clean login screen with:
-
Email field
-
Password field
-
Login button
On tapping the button, the email and password you enter will be printed in the console.
✅ Bonus Tips
-
You can add input validation to ensure fields are not empty.
-
You can navigate to another screen on successful login.
-
Wrap the
TextFields andElevatedButtoninside aFormwidget for advanced validation.
🔚 Conclusion
You’ve just built a simple login page UI in Flutter using TextField and ElevatedButton. This structure is a great starting point for adding real user authentication and improving your app’s UI.
Keep practicing with more Flutter widgets to create amazing mobile apps!
TOPICS MENTIONED IN THIS ARTICLE
Thank you for visiting! Enjoy exploring our diverse collection of blogs, crafted with passion and insight to inspire and inform. Happy reading!