(Part 1) Flutter Doctor Appointment App using Firebase (2024) | Splash Screen & Firebase Auth User

Introduction

In this tutorial, we will create a Doctor Appointment App using Flutter and Firebase. This is part one of a series focused on building a complete application that allows users to book doctor appointments. We will specifically cover setting up the splash screen and implementing Firebase Authentication using email and password. This guide is perfect for developers looking to enhance their Flutter skills with practical applications.

Step 1: Set Up Your Development Environment

Before we begin coding, ensure you have the following prerequisites:

• Flutter SDK: Download and install the Flutter SDK from the official website.
• Firebase Account: Create a Firebase account and set up a new project in the Firebase Console.
• Android Studio: Install Android Studio for Flutter development, ensuring you have the Flutter and Dart plugins.

Practical Tips

• Make sure to configure your environment variables to include the Flutter SDK.
• Check if your Flutter installation is working fine by running flutter doctor in your terminal.

Step 2: Create a New Flutter Project

1. Open Android Studio.
2. Select "New Flutter Project".
3. Choose "Flutter Application" and click "Next".
4. Set the project name (e.g., doctor_appointment_app) and configure the project location.
5. Click "Finish" to create your new project.

Step 3: Integrate Firebase into Your Flutter Project

1. Open your Firebase project in the Firebase Console.
2. Click on "Add app" and select "Android".
3. Enter your app's package name (found in android/app/src/main/AndroidManifest.xml).
4. Download the google-services.json file and place it in the android/app directory of your Flutter project.
5. Update your android/build.gradle file:

   buildscript {
       dependencies {
           classpath 'com.google.gms:google-services:4.3.10'
       }
   }
   

6. Update your android/app/build.gradle file:

   apply plugin: 'com.google.gms.google-services'
   

Common Pitfalls

• Ensure you have added the correct package name; any discrepancies will cause issues.
• If you encounter errors, double-check the placement of the google-services.json file.

Step 4: Add Firebase Authentication Package

1. Open your pubspec.yaml file.
2. Add the following dependencies:

   dependencies:
     firebase_core: ^2.10.0
     firebase_auth: ^4.3.0
   

3. Run flutter pub get to install the new packages.

Step 5: Initialize Firebase in Your App

1. In lib/main.dart, initialize Firebase by modifying the main function:

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp();
     runApp(MyApp());
   }
   

Step 6: Create a Splash Screen

1. Create a new file called splash_screen.dart in the lib directory.
2. Implement the splash screen UI:

   import 'package:flutter/material.dart';
   
   class SplashScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: Text('Welcome to Doctor Appointment App'),
         ),
       );
     }
   }
   

3. Navigate to the splash screen in main.dart:

   routes: {
     '/': (context) => SplashScreen(),
   }
   

Step 7: Implement Firebase Authentication

1. Create a new file called auth_service.dart for handling authentication.
2. Add methods for signing up and signing in:

   import 'package:firebase_auth/firebase_auth.dart';
   
   class AuthService {
     final FirebaseAuth _auth = FirebaseAuth.instance;
   
     Future<User?> signInWithEmail(String email, String password) async {
       try {
         UserCredential userCredential = await _auth.signInWithEmailAndPassword(email: email, password: password);
         return userCredential.user;
       } catch (e) {
         print(e);
         return null;
       }
     }
   
     Future<User?> signUpWithEmail(String email, String password) async {
       try {
         UserCredential userCredential = await _auth.createUserWithEmailAndPassword(email: email, password: password);
         return userCredential.user;
       } catch (e) {
         print(e);
         return null;
       }
     }
   }
   

Conclusion

In this first part of the Flutter Doctor Appointment App tutorial, we have set up the development environment, integrated Firebase, created a splash screen, and implemented Firebase Authentication. In the next part, we will delve deeper into CRUD operations and user interface enhancements.

Next Steps

• Explore Firebase Realtime Database for storing appointment data.
• Design user interfaces for booking appointments and user profiles.
• Continue building on this foundation to create a fully functional doctor appointment application.