Flutter & Firebase App Tutorial — Part 1 Get Started

5 min readOct 17, 2021

Create a flutter authenticate app in 10 mins by using firebase as the back-end. This Flutter tutorial is for beginners to build an app step by step with Firebase authenticate feature.

Flutter tutorial for beginners step by step using Firebase — Lumei Digital (the UI is designed by Mitesh Chodvadiya)

Nowadays, many apps need to run on multiple platforms, like iOS, Android, and the web.

That’s why Google made Flutter — the UI toolkit to build beautiful native apps from a single code base without compromising on quality, speed, or performance.

Undoubtedly, authentication is important in any organization and cannot be overlooked. Today, we will create an app with a security and authorization mechanism in place to let your users have seamless access to the applications on any device, protect intellectual property, maintain business efficiency, and satisfy customer experience by using the cloud authorization solution.

Your support would be awesome❤️

Please help me get 100 followers.

Flutter & Firebase App Tutorial by Lumei Digital

Setup the environment
Create a Flutter App in Visual Studio Code
Setup Firebase
Add packages to your project

Step 1: Set up the environment

Step 1.1 To create a flutter app, you can use Visual Studio Code, Android Studio, or any IDEs you are familiar with. Also, you will use Git to install flutter.

Android Studio- https://developer.android.com/studio
Visual Studio Code- https://code.visualstudio.com/download
Git- https://git-scm.com/downloads

Clone the Flutter repo into your computer by Lumei Digital

Step 1.2 Go to Flutter Installation to download the Flutter SDK

You install Flutter SDK to your computer by using Git to clone the Flutter repo and then put the Flutter repo on your computer. For example, I clone the Flutter repo into D:\Dev\flutter.

D:\Dev\flutter>git clone https://github.com/flutter/flutter.git -b stable

Any folders in your computer are fine but please do not clont the Flutter into any directory that requires elevatged privileges like C:\Program Files\

Step 1.3 Run flutter doctor

Go to the flutter folder that you clone into, and then click “flutter_console” to run diagnostic and make sure it’s installed correctly.

D:\Dev\flutter>flutter doctor

✅ the 1st green tick means that Flutter is installed.

This helps to check your environment and displays a report of the status of your Flutter installation.

Valid the flutter installation by Lumei Digital

Step 1.4 Edit environment variables to use the Flutter command anywhere on your computer

Instead of using “flutter_console”, you add your flutter directory into the environment variables so you can use flutter everywhere. For example, the flutter that I install on my computer is in the D:\Dev\flutter\bin, and I added “D:\Dev\flutter\bin” to the Path of the User Variables so I can use the “flutter — -version” in the command prompt to check the Flutter version.

Add flutter into environment variables by Lumei Digital

Step 2: Create a Flutter App in VS Code

Create a Flutter App in VS Code by Lumei Digital

Step 2.1 Install Extensions Flutter and Dart

Step 2.2 Create a new project

1️⃣ Open the Command Palette (Ctrl+Shift+P (Cmd+Shift+P on macOS)).

2️⃣ Select the Flutter: New Application Project command and press Enter.

3️⃣ Enter your desired Project name.

4️⃣ Select a Project location.

Please visit here to learn more commands on VS Code.

Select and run your emulator from Visual Studio Code. Open all commands with Cmd-Shift-P and type Emulator or click the Emulator icon in the top right.

Step 3: Setup Firebase

Firebase is a service made by Google and it acts as a back-end to our applications offering different things including cloud hosting, cloud messaging, authentication, and a real-time database.

Change Android ApplicationId by Lumei Digital

Step 3.1 Change the applicationId

Go to android\app\build.gradle and change the applictionId to something unique like your name or website. For example: “com.lumeidigital.firebase_application”

Step 3.2 Visit Firebase and create a free account

Step 3.3 Add project on Firebase. Enter the project name “FlutterFirebase”

Step 3.4 Click “Android” icon on your project to add Firebase to your Android app

Add Firebase to your Android app by Lumei Digital

▶️ Android package name is the ApplicationId “com.lumeidigital.firebase_application”

▶️ Download “google-services.json” and place it under folder “android\app”

▶️ Add classpath ‘com.google.gms:google-services:4.3.10’ inside the dependencies in the android\build.gradle

▶️ Add apply plugin: ‘com.google.gms.google-services’ in the android\app\build.gradle

Step 4: Add packages

Visit pub dev to install 5 packages:

▶️firebase_auth

▶️cloud_firestore

▶️firebase_core

▶️provider

▶️flutter_spinkit

Add “firebase_auth: ^3.1.4”, “firebase_core: ^1.8.0” and “cloud_firestore: ^2.5.4” within the dependencies section in the pubspec.yaml

▶️Run this command:

flutter pub add firebase_auth
flutter pub add cloud_firestore
flutter pub add firebase_core
flutter pub add provider
flutter pub add flutter_spinkit

Now, try to run the application to see if everything is fine on your app on the emulator.

Next, we are gonna create the base folder structure in your Flutter Firebase Auth.

Your support would be awesome❤️

Please help me get 100 followers.

👉 The source code is updated on Github

Flutter & Firebase App Tutorial — Part 1 Get Started

More Tutorials:

Your support would be awesome❤️

Table of Contents

Step 1: Set up the environment

Step 1.2 Go to Flutter Installation to download the Flutter SDK

Step 1.3 Run flutter doctor

Step 1.4 Edit environment variables to use the Flutter command anywhere on your computer

Step 2: Create a Flutter App in VS Code

Step 3: Setup Firebase

Step 4: Add packages

More Tutorials:

Your support would be awesome❤️

Written by Jumei Lin