Clinica - Doctor Appointment UI Kit for Flutter

Clinica is a patient app UI kit for booking doctors and clinics, built in Flutter for iOS and Android. It runs on mock data out of the box, so you can open it, explore every screen, and then connect your own backend by replacing one set of classes.

It covers the whole patient journey: onboarding and sign-in, search and filters, specialties, clinics on a map, doctor profiles and reviews, a six-step booking flow (consult type, date, time, patient, review, payment), appointments with reschedule and cancel, chat, video-call screens, prescriptions, documents, lab results with a trend chart, notifications, favorites, family members, and settings. The main screens have loading, empty, error, and offline states.

Screens read from eight repository interfaces through Riverpod providers. Mock implementations with realistic, clearly fictional data are bound in one file; replace them with your own API classes and no screen needs to change. The documentation walks through the swap step by step.

The design system has light and dark themes, three brand presets, and a palette file for your own colors. English and Arabic are included with a full right-to-left layout, and you can add languages with .arb files. Currency, date format, 12/24-hour time, first weekday, and distance unit are settings. Portraits, clinic images, the map, and illustrations are drawn in code, so there are no stock images to license.

Not included: a backend, real payments, real chat or video calling, push notifications, a maps SDK, a doctor app, or an admin panel. The kit contains no medical content or advice.

Features

- 69 screens and 13 loading, empty, error, and offline states

- Six-step booking flow: consult type, date, time, patient, review, payment, plus confirmation and a declined-payment path

- Appointments (upcoming, completed, cancelled) with reschedule, cancel, and write a review

- Chat with attachments, video lobby, in-call and call-ended screens

- Prescriptions, documents, and lab results with a trend chart

- Search, filters, specialties, clinics list and map, doctor profiles and reviews

- Guests can browse; booking, messages, and records ask to sign in and return to the same screen

- Light and dark themes, three brand presets, and a palette file for your own colors

- English and Arabic with full right-to-left layout; add languages with .arb files

- Configurable currency, date format, 12/24-hour time, first weekday, and distance unit

- Eight repository interfaces with mock implementations, bound in one file (Riverpod)

- Illustrations, portraits, clinic images, and map drawn in code: no stock images to license

- Component gallery and state preview screens

- Unit and widget tests, HTML documentation

Requirements

Flutter 3.44 or later (Dart 3.12). Xcode 16 or later for iOS (deployment target iOS 13). Android Studio with an Android SDK for Android. Packages: flutter_riverpod, go_router, flutter_svg, intl. No API keys or accounts are needed to run the demo.

Instructions

1. Unzip the download and open a terminal in ClinicaUIKit/clinic_kit.

2. Run "flutter pub get", then "flutter run" with an iOS simulator or Android emulator selected.

3. The app opens on onboarding. Tap Skip to browse as a guest, or "I already have an account" and then Sign in (the demo credentials are filled in).

4. To connect your backend, implement the interfaces in lib/data/repositories/repositories.dart and bind your classes in lib/data/providers.dart. No screen changes are needed.

5. To rebrand, change the brand colors in lib/core/theme/palette.dart and the app name in the iOS Info.plist and Android manifest.

6. Documentation/index.html covers setup, architecture, the mock-to-API guide, theming, localization, deep links, testing, and asset licenses.