Creating a Login Form in Flutter

By Your Name | Published on March 16, 2025

A login form is a crucial part of any Flutter app. Whether you're building a social media app, e-commerce platform, or admin panel, a secure authentication system is essential. In this guide, we'll build a modern login form using Flutter and Firebase authentication.

Setting Up Your Flutter Project

First, create a new Flutter project and add the required dependencies:


// Create a new Flutter project
flutter create login_app

// Navigate into the project directory
cd login_app

// Add Firebase authentication
flutter pub add firebase_auth firebase_core

Building the Login Form UI

Next, let's create a simple login form using the `TextField` and `ElevatedButton` widgets.


import 'package:flutter/material.dart';

void main() {
  runApp(LoginApp());
}

class LoginApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LoginScreen(),
    );
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Login",
              style: TextStyle(fontSize: 28, color: Colors.white),
            ),
            SizedBox(height: 20),
            TextField(
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.grey[900],
                hintText: "Email",
                hintStyle: TextStyle(color: Colors.grey),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
            SizedBox(height: 15),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.grey[900],
                hintText: "Password",
                hintStyle: TextStyle(color: Colors.grey),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.purple,
              ),
              child: Text("Login", style: TextStyle(color: Colors.white)),
            ),
          ],
        ),
      ),
    );
  }
}

Adding Firebase Authentication

To authenticate users, configure Firebase and add the following authentication logic:


import 'package:firebase_auth/firebase_auth.dart';

Future signIn(String email, String password) async {
  try {
    UserCredential userCredential = await FirebaseAuth.instance
        .signInWithEmailAndPassword(email: email, password: password);
    print("User logged in: ${userCredential.user?.email}");
  } catch (e) {
    print("Error: $e");
  }
}

Conclusion

Now you have a fully functional login form in Flutter! You can expand it by adding Google Sign-In, password reset, and UI improvements. Let us know in the comments if you found this helpful!

Share this article: Twitter LinkedIn Reddit