coderqh

Medora — Flutter Doctor Appointment UI Kit

Doctor booking from specialty to slot: profiles with priced services, a day-and-time picker and a health records screen.

Medora — Flutter Doctor Appointment UI Kit

Screenshots from the shipped build; the CodeCanyon page has the full set.

Medora follows a patient from the first search to the follow-up. They browse specialties and top doctors, open a profile with rating, years of experience, bio and a menu of priced services such as video consults, clinic visits, home visits and tests, then pick a day and a time from a slot grid. After checkout the booking moves along a status timeline, sits under upcoming or history in My Appointments, and past visits stay available in Health Records.

The design is calm on purpose: medical blue with a caring teal accent, a cool off-white background, navy ink and Lexend with Inter. It reads as clinical and trustworthy rather than retail. All tokens are centralized and both theme palettes share one file, so matching a clinic brand means editing one set of values, and the light and dark themes follow along.

Features

  • Doctor profiles with rating, experience, bio, reviews and a priced service menu
  • Appointment slot picker laid out as a day row and time grid
  • Health Records screen for revisiting past visits and outcomes
  • My Appointments split into upcoming and history, with rebooking
  • Booking cart with a single-doctor guard and a status timeline after checkout
  • Checkout with address, chosen slot, payment methods and a working demo coupon
  • Demo data of 8 doctors across 8 specialties with 56 priced services
  • Light and dark themes with a runtime toggle, both palettes in one file
  • Loading skeletons and empty states on every list

What it looks like

9 images
Medora medical-blue palette, typography and components — Medora
Medora medical-blue palette, typography and components
Home and doctor screens in light and dark theme — Medora
Home and doctor screens in light and dark theme
Specialties, doctor list and doctor profile with services — Medora
Specialties, doctor list and doctor profile with services
Appointment slot picker and booking checkout — Medora
Appointment slot picker and booking checkout
Booking confirmed and appointment status timeline — Medora
Booking confirmed and appointment status timeline
My Appointments list and Health Records — Medora
My Appointments list and Health Records
Patient profile, addresses and account screens — Medora
Patient profile, addresses and account screens
Doctor search with filters and settings — Medora
Doctor search with filters and settings
Every Medora screen on one overview sheet — Medora
Every Medora screen on one overview sheet

Who it is for

  • You are building a clinic, telehealth or practitioner booking app and want the patient flow finished first.
  • You build healthcare apps for clients and need a demo that reads as professional, not as a shop template.
  • You want a GetX project where appointments, slots and records already have their own screens and models.

In the box

from the shipped zip
  • Full Flutter source in medical_ui_kit/, no obfuscation and no licence server
  • Offline HTML documentation: setup, re-theming, app name and bundle id, troubleshooting
  • 4 Dart test files in the app

Run it after download

the app
# unzip the download, then
$ cd medical_ui_kit
$ flutter pub get
$ flutter run

Setup, including any keys or services the app talks to, is covered step by step in the bundled documentation.

Spec

measured
Screen widgets23
Dart files91
Tests in the package4
Dart SDK^3.7.0
Back endNone bundled; the service layer is where yours goes
PlatformsiOS + Android, one codebase

Counted from medora-v1.0.zip, the file uploaded to CodeCanyon. Screen widgets are the view, screen and page classes in the source, so the number can differ slightly from a count of routes.

Questions

Something else? Ask on the item's CodeCanyon page; the author answers there.

How do I plug in real doctors and availability?

The doctors, services and slots come from one demo data file through mock services that return Futures. Replace those service bodies with calls to your scheduling API and the screens keep their behavior.

Can I show real doctor photos?

Yes. One thumbnail widget renders every doctor image; set an imageUrl and the whole app uses it.

Can I rebrand it for a specific clinic?

Colors, fonts, spacing and radii are centralized tokens with both theme palettes in one file, so a clinic brand is a single round of edits.

More UI kits and booking apps

same author
See Medora on CodeCanyon →

Sold on Envato's CodeCanyon marketplace, which handles payment, VAT, invoices and the download.