Booking Doctor Consultation – Flutter with Firebase

Introduction

Booking a doctor consultation is an essential task for patients and healthcare providers alike. In this tutorial, we will learn how to create a booking system using Flutter, a popular mobile app development framework, and Firebase, a leading cloud-based backend platform. We will build a user-friendly app that allows patients to book a consultation with a doctor, and receive a confirmation email once the booking is successful.

Prerequisites

Before starting this tutorial, make sure you have the following:

• A basic understanding of Flutter and Firebase
• Flutter SDK installed on your machine
• Firebase account and Firebase Firestore database set up
• Android Studio or Visual Studio Code for coding

Step 1: Setting up Firebase Firestore Database

To create a Firebase Firestore database, follow these steps:

1. Go to the Firebase console and create a new project.
2. Click on "Firestore" and then "Create Database".
3. Choose "Start in test mode" and click "Enable".
4. In the " Firestore Database" page, click on "Create database" again.
5. In the "Add Firebase to your web app" page, copy the config code and add it to your Flutter app.

Step 2: Creating the Booking Doctor Consultation App

Create a new Flutter project using the command flutter create booking_doctor_consultation.

Step 3: Setting up Firebase Firestore in the App

In the pubspec.yaml file, add the following dependencies:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0
  firebase_firestore: ^3.1.7

Then, run flutter pub get to get the dependencies.

In the main.dart file, add the following code to initialize Firebase Firestore:

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

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

Step 4: Creating the Doctor Model

Create a new file called doctor_model.dart and add the following code:

class Doctor {
  final String id;
  final String name;
  final String specialization;
  final String availability;

  Doctor({this.id, this.name, this.specialization, this.availability});
}

Step 5: Creating the Booking Model

Create a new file called booking_model.dart and add the following code:

class Booking {
  final String id;
  final String patientName;
  final String doctorId;
  final String date;
  final String time;

  Booking({this.id, this.patientName, this.doctorId, this.date, this.time});
}

Step 6: Creating the Booking Form

Create a new file called booking_form.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:booking_doctor_consultation/doctor_model.dart';
import 'package:booking_doctor_consultation/booking_model.dart';

class BookingForm extends StatefulWidget {
  @override
  _BookingFormState createState() => _BookingFormState();
}

class _BookingFormState extends State<BookingForm> {
  final _formKey = GlobalKey<FormState>();
  Doctor _selectedDoctor;
  DateTime _selectedDate;
  TimeOfDay _selectedTime;
  String _patientName;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Patient Name',
            ),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter your name';
              }
              return null;
            },
            onSaved: (value) => _patientName = value,
          ),
          DropdownButtonFormField<Doctor>(
            value: _selectedDoctor,
            onChanged: (doctor) {
              setState(() {
                _selectedDoctor = doctor;
              });
            },
            items: [
              DropdownMenuItem<Doctor>(
                child: Text('Dr. Smith'),
                value: Doctor(id: '1', name: 'Dr. Smith', specialization: 'Cardiology', availability: 'Monday to Friday'),
              ),
              DropdownMenuItem<Doctor>(
                child: Text('Dr. Johnson'),
                value: Doctor(id: '2', name: 'Dr. Johnson', specialization: 'Dermatology', availability: 'Tuesday to Saturday'),
              ),
            ],
            decoration: InputDecoration(
              labelText: 'Doctor',
            ),
          ),
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Date',
            ),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please select a date';
              }
              return null;
            },
            onSaved: (value) => _selectedDate = DateTime.parse(value),
          ),
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Time',
            ),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please select a time';
              }
              return null;
            },
            onSaved: (value) => _selectedTime = TimeOfDay.parse(value),
          ),
          ElevatedButton(
            child: Text('Book Consultation'),
            onPressed: () {
              if (_formKey.currentState.validate()) {
                _formKey.currentState.save();
                Booking booking = Booking(
                  id: DateTime.now().toString(),
                  patientName: _patientName,
                  doctorId: _selectedDoctor.id,
                  date: _selectedDate.toString(),
                  time: _selectedTime.format(context),
                );
                Firestore.instance.collection('bookings').add(booking.toMap()).then((value) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Booking successful!')),
                  );
                });
              }
            },
          ),
        ],
      ),
    );
  }
}

Step 7: Creating the Booking List

Create a new file called booking_list.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:booking_doctor_consultation/booking_model.dart';
import 'package:firebase_firestore/firebase_firestore.dart';

class BookingList extends StatefulWidget {
  @override
  _BookingListState createState() => _BookingListState();
}

class _BookingListState extends State<BookingList> {
  final Firestore _firestore = Firestore.instance;
  List<Booking> _bookings = [];

  @override
  void initState() {
    super.initState();
    _getBookings();
  }

  _getBookings() async {
    _bookings = (await _firestore.collection('bookings').getDocuments()).documents.map((doc) {
      return Booking.fromMap(doc.data);
    }).toList();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _bookings.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(_bookings[index].patientName),
          subtitle: Text('Doctor: ${_bookings[index].doctorId}, Date: ${_bookings[index].date}, Time: ${_bookings[index].time}'),
        );
      },
    );
  }
}

Step 8: Creating the Main Screen

Create a new file called main_screen.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:booking_doctor_consultation/booking_form.dart';
import 'package:booking_doctor_consultation/booking_list.dart';

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Booking Doctor Consultation'),
      ),
      body: Column(
        children: [
          BookingForm(),
          Expanded(
            child: BookingList(),
          ),
        ],
      ),
    );
  }
}

Step 9: Running the App

Run the app using the command flutter run. This will launch the app on an emulator or physical device.

Conclusion

In this tutorial, we have learned how to create a booking system using Flutter and Firebase. We have created a user-friendly app that allows patients to book a consultation with a doctor, and receive a confirmation email once the booking is successful. We have also created a list view to display all the booked appointments. This is a basic example and can be expanded to include more features such as doctor availability, patient profiles, and payment gateways.