Flutter Doctor Appointment App using Firebase (2024) | Flutter App Development

Introduction

In this tutorial, you will learn how to create a Flutter application for doctor appointments using Firebase as the backend. The app will allow users to book appointments, with Firebase Realtime Database for data storage and email/password authentication. This guide will walk you through the necessary steps to set up the project and implement core functionalities, including CRUD operations.

Step 1: Set Up Your Development Environment

• Install Flutter SDK and set up your environment.
• Ensure you have an IDE like Visual Studio Code or Android Studio.
• Install the necessary Flutter and Dart plugins on your IDE.

Step 2: Create a New Flutter Project

• Open your terminal or command prompt.
• Run the following command to create a new Flutter project:

  flutter create doctor_appointment_app
  

• Navigate into your project directory:

  cd doctor_appointment_app
  

Step 3: Add Firebase to Your Project

• Go to the Firebase Console.
• Create a new project and follow the prompts.
• Add an Android app to your Firebase project:
  • Enter your app's package name (found in android/app/src/main/AndroidManifest.xml).
  • Download the google-services.json file and place it in android/app/.
• Update your android/build.gradle and android/app/build.gradle files to include Firebase dependencies.

Step 4: Install Required Packages

• Open pubspec.yaml and add the following dependencies:

  dependencies:
    flutter:
      sdk: flutter
    firebase_core: ^latest_version
    firebase_auth: ^latest_version
    cloud_firestore: ^latest_version
  

• Run the command below to install the packages:

  flutter pub get
  

Step 5: Initialize Firebase in Your App

• Open lib/main.dart and initialize Firebase in the main function:

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

Step 6: Implement Authentication

• Create a new file called auth_service.dart in the lib folder.
• Implement email/password sign-in and registration methods:

  class AuthService {
    final FirebaseAuth _auth = FirebaseAuth.instance;
  
    Future<User?> signInWithEmail(String email, String password) async {
      UserCredential result = await _auth.signInWithEmailAndPassword(email: email, password: password);
      return result.user;
    }
  
    Future<User?> registerWithEmail(String email, String password) async {
      UserCredential result = await _auth.createUserWithEmailAndPassword(email: email, password: password);
      return result.user;
    }
  }
  

Step 7: Create User Interface for Authentication

• Create a new file called auth_screen.dart for login and registration UI.
• Design forms for user input and buttons for login and registration.
• Use TextField for email and password input, and ElevatedButton for actions.

Step 8: Set Up Firestore for Appointments

• Create a new file called appointment_service.dart to manage appointment data.
• Implement methods for adding, updating, and retrieving appointments:

  class AppointmentService {
    final FirebaseFirestore _firestore = FirebaseFirestore.instance;
  
    Future<void> createAppointment(Appointment appointment) async {
      await _firestore.collection('appointments').add(appointment.toMap());
    }
  
    Stream<List<Appointment>> getAppointments() {
      return _firestore.collection('appointments').snapshots().map((snapshot) {
        return snapshot.docs.map((doc) => Appointment.fromMap(doc.data())).toList();
      });
    }
  }
  

Step 9: Create Appointment Model

• Create a file called appointment.dart to define the appointment model:

  class Appointment {
    final String id;
    final String doctorName;
    final String patientName;
    final DateTime date;
  
    Appointment({required this.id, required this.doctorName, required this.patientName, required this.date});
  
    Map<String, dynamic> toMap() => {
      'doctorName': doctorName,
      'patientName': patientName,
      'date': date.toIso8601String(),
    };
  
    static Appointment fromMap(Map<String, dynamic> map) {
      return Appointment(
        id: map['id'],
        doctorName: map['doctorName'],
        patientName: map['patientName'],
        date: DateTime.parse(map['date']),
      );
    }
  }
  

Step 10: Test Your Application

• Run your Flutter application using the following command:

  flutter run
  

• Test the functionalities, including user registration, login, and appointment booking.

Conclusion

You have successfully created a doctor appointment app using Flutter and Firebase. This app includes user authentication and appointment management features. As next steps, consider enhancing the app by adding features such as appointment notifications, user profile management, or integrating additional Firebase services. Happy coding!