In this course, we will learn how to create a login app using Flutter and integrate it with Google’s Firebase backend. By the end of the course, you will have created a basic app that allows users to log in with their email and password. Firebase is a tool that provides various features, including authentication, data storage, and hosting, for applications. Many developers use this service to develop apps quickly and easily.
1. Preparation
First, we need to prepare to use Flutter and Firebase. Please check the following requirements:
- Programming environment: Flutter SDK must be installed.
- You need to create a Firebase account.
- Prepare an IDE (e.g., Visual Studio Code or Android Studio).
- You need to set up a project in the Firebase console to use Firebase Authentication.
2. Create a Flutter Project
First, we create a new Flutter project. In the terminal, enter the following command:
flutter create login_appNow, let’s navigate to the created directory and open the project:
cd login_app3. Set Up Firebase
3.1 Create a New Project in Firebase Console
1. Log in to the Firebase console. Firebase Console
2. Click “Add Project” to create a new project.
3. Complete the project’s name and initial settings.
3.2 Activate Firebase Authentication
1. From the dashboard of the newly created project, select “Authentication” from the menu.
2. Go to the “Sign-in Method” tab and enable “Email/Password” login.
3.3 Register the Android App
1. Click the Android icon on the dashboard to register the Android app.
2. Enter the package name; you do not need to input the SHA-1 key for testing purposes.
3. Click the “Register” button.
4. Download the google-services.json file and add it to the android/app directory.
3.4 Install Firebase CLI
The Firebase CLI tool makes it easy to perform Firebase-related tasks. Install Firebase CLI with the following command:
npm install -g firebase-tools4. Integrate Flutter with Firebase
4.1 Modify pubspec.yaml File
Open the pubspec.yaml file in your Flutter project, and add the following packages:
dependencies:
flutter:
sdk: flutter
firebase_core: latest_version
firebase_auth: latest_version
After adding the packages, install them with the following command:
flutter pub get4.2 Initialize Firebase
Initialize Firebase in the main.dart file. To initialize the Firebase app, add the following code:
import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
5. Implement Login UI
Now it’s time to implement the login screen. We will use StatefulWidget to create a basic login screen.
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State {
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
String? _errorMessage;
Future _login() async {
try {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: _emailController.text.trim(),
password: _passwordController.text.trim(),
);
// Handle after successful login
} on FirebaseAuthException catch (e) {
setState(() {
_errorMessage = e.message;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Login')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _emailController,
decoration: InputDecoration(labelText: 'Email'),
),
TextField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _login,
child: Text('Login'),
),
if (_errorMessage != null)
Text(
_errorMessage!,
style: TextStyle(color: Colors.red),
),
],
),
),
);
}
}
6. Test the App
Once you have completed the above code, try running the app. You can use the Android Emulator provided by Flutter or a physical device. Enter the following command in the terminal to run the app:
flutter run7. Additional Features
In addition to the login feature, you can add the following functionalities for better user convenience:
- Sign-up feature
- Password reset feature
- Social login feature (Google, Facebook, etc.)
8. Conclusion
In this course, we learned how to create a login app integrated with Firebase using Flutter. Firebase is a useful backend solution that provides various features such as databases and storage, allowing for the implementation of a wider range of functionalities. We hope your login app works great!