Building a Flutter Mobile App with Firebase: A Step-by-Step Guide

Building a Flutter mobile application from scratch and connecting it with Firebase is an exciting and rewarding project for developers of all levels. In this tutorial, we will walk you through the process of creating a Flutter mobile application from scratch, setting up a Firebase project, and connecting the two.

Before we begin, ensure that you have Flutter installed on your computer. If you don't have it installed, follow the instructions on the Flutter website to download and set it up.

Step 1: Set up the Flutter project

To start, we need to create a new Flutter project. Open up a terminal and type the following command:

This command will create a new Flutter project named my_app. Once the project is created, navigate to the my_app directory using the cd command.

Step 2: Add the Firebase dependencies

Next, we need to add the Firebase dependencies to our project. Open the pubspec.yaml file and add the following dependencies:

These dependencies will allow us to use Firebase in our project.

Step 3: Set up Firebase

Now, we need to set up Firebase for our project. Follow these steps to set up Firebase:

1. Go to the Firebase Console and sign in with your Google account.

2. Click on the "Add Project" button and follow the prompts to create a new Firebase project.

3. Once the project is created, click on the "Web" button to create a new web app.

4. Enter a name for the app and click on the "Register App" button.

5. Copy the Firebase configuration code that is provided.

Step 4: Configure the Firebase project in Flutter

Now that we have set up Firebase, we need to configure our Flutter project to use it. Open the main.dart file and add the following code:

This code initializes Firebase for our app.

Step 5: Create the login screen

Next, we need to create a login screen for our app. Create a new file named login_screen.dart and add the following code:

This code creates a basic login screen with a centered text widget.

Step 6: Create the registration screen

Next, we need to create a registration screen for our app. Create a new file named registration_screen.dart and add the following code:

This code creates a basic registration screen with a centered text widget.

Step 7: Add navigation between screens

Now that we have our login and registration screens, we need to add navigation between them. Open the main.dart file and replace the MyApp widget with the following code:

This code sets up our app to navigate between the login and registration screens.

Step 8: Connect with Firebase Authentication

Open the login_screen.dart file and add the following code to the build method:

final emailController = TextEditingController();
final passwordController = TextEditingController();

void signInWithEmailAndPassword(BuildContext context) async {
  try {
    UserCredential userCredential =
        await FirebaseAuth.instance.signInWithEmailAndPassword(
      email: emailController.text,
      password: passwordController.text,
    );
    print(userCredential.user);
  } on FirebaseAuthException catch (e) {
    if (e.code == 'user-not-found') {
      print('No user found for that email.');
    } else if (e.code == 'wrong-password') {
      print('Wrong password provided for that user.');
    }
  }
}

return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextFormField(
          controller: emailController,
          decoration: InputDecoration(hintText: 'Email'),
        ),
        TextFormField(
          controller: passwordController,
          decoration: InputDecoration(hintText: 'Password'),
          obscureText: true,
        ),
        ElevatedButton(
          onPressed: () => signInWithEmailAndPassword(context),
          child: Text('Sign In'),
        ),
        TextButton(
          onPressed: () =>
              Navigator.pushNamed(context, '/register'),
          child: Text('Create an account'),
        ),
      ],
    ),
  ),
);

Step 9: Connect with Firebase Firestore

Open the registration_screen.dart file and add the following code to the build method:

final nameController = TextEditingController();
final emailController = TextEditingController();
final passwordController = TextEditingController();

void registerWithEmailAndPassword(BuildContext context) async {
  try {
    UserCredential userCredential =
        await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: emailController.text,
      password: passwordController.text,
    );
    await FirebaseFirestore.instance
        .collection('users')
        .doc(userCredential.user.uid)
        .set({
      'name': nameController.text,
      'email': emailController.text,
    });
    print(userCredential.user);
  } on FirebaseAuthException catch (e) {
    if (e.code == 'weak-password') {
      print('The password provided is too weak.');
    } else if (e.code == 'email-already-in-use') {
      print('The account already exists for that email.');
    }
  } catch (e) {
    print(e);
  }
}

return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextFormField(
          controller: nameController,
          decoration: InputDecoration(hintText: 'Name'),
        ),
        TextFormField(
          controller: emailController,
          decoration: InputDecoration(hintText: 'Email'),
        ),
        TextFormField(
          controller: passwordController,
          decoration: InputDecoration(hintText: 'Password'),
          obscureText: true,
        ),
        ElevatedButton(
          onPressed: () => registerWithEmailAndPassword(context),
          child: Text('Register'),
        ),
      ],
    ),
  ),
);

This code sets up the registration screen with aform for entering a name, email, and password. When the "Register" button is pressed, it uses the Firebase Authentication and Firestore APIs to create a new user and add their information to the database.

Congratulations!!