QuickStart Flutter Getx | Firebase – Login and Register with Getx Android & ios

Introduction

In this tutorial, we will learn how to build a simple login and register system using Flutter, Getx, and Firebase. Getx is a state management library for Flutter that helps to manage the state of the application in a more efficient and organized way. Firebase is a cloud-based backend platform that provides services for authentication, real-time database, storage, and more.

The goal of this tutorial is to provide a step-by-step guide on how to build a login and register system using Getx and Firebase. By the end of this tutorial, you will have a fully functional app that allows users to register and log in to your app.

Step 1: Setting up the Project

To start, let's create a new Flutter project using the command:

flutter create quickstart_flutter_getx_firebase_login_register

Open the project in your preferred code editor and create a new directory named getx and another named firebase in the project root.

Step 2: Adding Getx to the Project

Getx is available on pub.dev, so we need to add it to our project's pubspec.yaml file. Add the following line to the dependencies section:

dependencies:
  getx: ^4.3.2

Then, run the command:

flutter pub get

to get the package.

Step 3: Creating the Login and Register Screens

Create a new file named login.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:quickstart_flutter_getx_firebase_login_register/firebase/authentication.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter an email';
                  }
                  return null;
                },
                controller: _emailController,
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter a password';
                  }
                  return null;
                },
                controller: _passwordController,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState.validate()) {
                    _formKey.currentState.save();
                    Authentication.login(
                      _emailController.text,
                      _passwordController.text,
                    ).then((value) {
                      if (value!= null) {
                        Get.snackbar('Login Successful', 'You are logged in');
                        Get.offAllNamed('/home');
                      } else {
                        Get.snackbar('Login Failed', 'Invalid credentials');
                      }
                    });
                  }
                },
                child: Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This is the login screen that has two text fields for email and password. When the user clicks the login button, it calls the login function from the Authentication class to authenticate the user.

Step 4: Creating the Register Screen

Create a new file named register.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:quickstart_flutter_getx_firebase_login_register/firebase/authentication.dart';

class RegisterScreen extends StatefulWidget {
  @override
  _RegisterScreenState createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Register'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter an email';
                  }
                  return null;
                },
                controller: _emailController,
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter a password';
                  }
                  return null;
                },
                controller: _passwordController,
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Confirm Password'),
                obscureText: true,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter a password';
                  } else if (value!= _passwordController.text) {
                    return 'Passwords do not match';
                  }
                  return null;
                },
                controller: _confirmPasswordController,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState.validate()) {
                    _formKey.currentState.save();
                    Authentication.register(
                      _emailController.text,
                      _passwordController.text,
                    ).then((value) {
                      if (value!= null) {
                        Get.snackbar('Registration Successful', 'You are registered');
                        Get.offAllNamed('/login');
                      } else {
                        Get.snackbar('Registration Failed', 'Invalid email or password');
                      }
                    });
                  }
                },
                child: Text('Register'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This is the register screen that has three text fields for email, password, and confirm password. When the user clicks the register button, it calls the register function from the Authentication class to create a new user.

Step 5: Adding Firebase Authentication

Create a new file named authentication.dart and add the following code:

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:quickstart_flutter_getx_firebase_login_register/firebase/init.dart';

class Authentication {
  static Future<void> login(String email, String password) async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: email,
        password: password,
      );
    } catch (e) {
      print('Error logging in: $e');
    }
  }

  static Future<void> register(String email, String password) async {
    try {
      await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: email,
        password: password,
      );
    } catch (e) {
      print('Error registering: $e');
    }
  }
}

This file contains the login and register functions that call the corresponding functions from the Firebase Authentication SDK.

Step 6: Setting up Firebase

Create a new file named firebase/init.dart and add the following code:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';

Future<void> initFirebase() async {
  await Firebase.initializeApp();
}

This file initializes the Firebase app and waits for the initialization to complete.

Step 7: Using Getx

Create a new file named getx/app_bindings.dart and add the following code:

import 'package:get/get.dart';
import 'package:quickstart_flutter_getx_firebase_login_register/firebase/init.dart';
import 'package:quickstart_flutter_getx_firebase_login_register/screens/login.dart';
import 'package:quickstart_flutter_getx_firebase_login_register/screens/register.dart';

class AppBindings implements Bindings {
  @override
  void dependencies() {
    Get.put(LoginScreen());
    Get.put(RegisterScreen());
    initFirebase();
  }
}

This file sets up the bindings for the Getx library and initializes the Firebase app.

Step 8: Running the App

Run the app by executing the command:

flutter run

This will launch the app on your emulator or physical device.

Step 9: Testing the App

Test the app by navigating to the login and register screens. You should be able to log in and register successfully.