Appointment Booking App UI Kit

Flutter Setup & Installation Guide

Overview

This is a complete Flutter UI Kit for building appointment booking applications. It includes 40+ pre-built screens, modern design, and clean architecture.

Important: This is a UI Kit template. It includes all UI screens and components but no backend integration. You'll need to connect your own API, authentication, and payment systems.
What's Included:
  • 40+ pre-built screens
  • Complete UI components
  • Demo data for testing
  • Light theme support
  • Responsive layouts
  • All assets (60+ icons, 17 category graphics, demo images)

Prerequisites

Required Software

  • Flutter SDK version 3.0.0 or higher
  • Dart SDK (bundled with Flutter)
  • Android Studio or VS Code with Flutter extensions
  • Xcode (for iOS development on macOS only)
  • CocoaPods (for iOS, install via: sudo gem install cocoapods)

Verify Flutter Installation

Before proceeding, verify your Flutter installation:

flutter doctor

Make sure all required components are installed and configured correctly.

Installation & Setup

1

Extract Files

Extract the downloaded package to your desired location on your computer.

# Example location
cd ~/Projects
unzip appointment-booking-ui-kit-flutter.zip
cd appointment-booking-ui-kit-flutter/Source_Code/appointment_booking_app
2

Install Dependencies

Navigate to the project directory and install all required Flutter packages:

flutter pub get

This will download and install all dependencies listed in pubspec.yaml.

3

iOS Setup (macOS only)

If you're developing for iOS, install CocoaPods dependencies:

cd ios
pod install
cd ..
Note: iOS development requires macOS and Xcode. Skip this step if you're only developing for Android.
4

Run the App

Run the application on your device or emulator:

flutter run

The app will launch with demo data. All screens are accessible and functional for UI demonstration.

5

Verify Installation

Check that everything is set up correctly:

flutter doctor
flutter pub get
flutter analyze

All commands should complete without errors.

Customization Guide

Change App Colors

Primary Colors

Edit lib/core/values/app_colors.dart:

static const kPrimaryColor = Color(0xff133960); // Your primary color
static const primaryColor = Color(0xff1d2a3a); // Secondary color

Customize Button Border Radius

Global Button Border Radius

The buttonBorderRadius constant in lib/core/values/app_values.dart controls the border radius for all buttons throughout the entire project. This allows you to change the button style globally with a single parameter.

File Location: lib/core/values/app_values.dart

abstract class AppValues {
  static const double buttonBorderRadius = 10; // Update this value to change all button radius
  // ... other constants
}
How it works: By changing the buttonBorderRadius value, all buttons in the app will automatically update their border radius. This provides a consistent design across the entire application.

Button Border Radius Examples

Here are visual examples of buttons with different border radius values:

Border Radius: 0 (Sharp/No Radius)

→ Sharp corners, modern minimalist style

Border Radius: 10 (Default - Slightly Rounded)

→ Balanced rounded corners, professional look

Border Radius: 40 (Fully Rounded/Pill Shape)

→ Pill-shaped buttons, modern and friendly
Note: After changing the buttonBorderRadius value, you need to hot restart the app (not just hot reload) to see the changes applied to all buttons.

How to Update Button Border Radius

  1. Open lib/core/values/app_values.dart
  2. Find the line: static const double buttonBorderRadius = 10;
  3. Change the value to your desired radius (e.g., 0, 10, 40)
  4. Save the file
  5. Hot restart your app: flutter run or press R in the terminal

Recommended Values:

  • 0 - Sharp corners (modern, minimalist)
  • 5-10 - Slightly rounded (balanced, professional)
  • 20-40 - Fully rounded (pill-shaped, friendly)

Replace Demo Data

Update Demo Data

Edit lib/demo_data/Demo_data.dart or replace with API calls in controllers:

  • categoriesList - Category data
  • appointmentList - Appointment samples
  • specialistList - Specialist profiles
  • nearbyCentersList - Nearby centers
  • walletHistoryList - Transaction history

Modify Screens

Screen Structure

Each screen is in lib/screens/[feature]/:

  • [feature]_screen.dart - UI layout
  • [feature]_controller.dart - Business logic
  • widgets/ - Feature-specific widgets

Add Your Backend

Backend Integration Steps

  1. Create API service in lib/network/ (structure provided)
  2. Update controllers to call your APIs
  3. Replace demo data with real API responses
  4. Implement authentication logic
  5. Add payment gateway integration

Update App Icon & Name

Android

  • Replace icons in android/app/src/main/res/mipmap-*/
  • Update app name in android/app/src/main/AndroidManifest.xml: 
    <application
    android:label="Your App Name"
    ...

iOS

  • Update icons in ios/Runner/Assets.xcassets/AppIcon.appiconset/
  • Update app name in ios/Runner/Info.plist: 
    <key>CFBundleName</key>
<string>Your App Name</string>

Update App Package Name

Android Package Name

Update in android/app/build.gradle.kts:

android {
    namespace = "com.yourcompany.appointmentbooking"
    ...
}

iOS Bundle Identifier

Update in ios/Runner.xcodeproj/project.pbxproj or Xcode:

PRODUCT_BUNDLE_IDENTIFIER = com.yourcompany.appointmentbooking

File Structure

appointment_booking_app/
├── android/ # Android platform files
│ ├── app/ # Android app configuration
│ │ ├── src/ # Source files
│ │ └── build.gradle.kts # Build configuration
│ └── build.gradle.kts # Project build file
├── ios/ # iOS platform files
│ ├── Runner/ # iOS app files
│ └── Podfile # CocoaPods dependencies
├── lib/ # Main application code
│ ├── bindings/ # Dependency injection
│ ├── core/ # Core utilities
│ │ ├── dialogs/ # Reusable dialogs
│ │ ├── utils/ # Helper functions
│ │ ├── values/ # Colors, themes, images
│ │ └── widgets/ # Reusable widgets
│ ├── data/ # Data models
│ ├── demo_data/ # Demo data
│ ├── localization/ # Localization files
│ ├── routes/ # Routing configuration
│ └── screens/ # UI screens (40+)
│ └── [feature]/ # Feature-based organization
├── assets/ # Images, icons, fonts
│ ├── categories/ # Category icons (17)
│ ├── icons/ # UI icons (60+)
│ └── images/ # Demo images
├── pubspec.yaml # Dependencies
├── README.md # Documentation
└── SETUP_GUIDE.html # This file

Device Compatibility

Supported Platforms

  • Android: All devices running Android 5.0 (API 21) and above
  • iOS: iPhone and iPad running iOS 11.0 and above
  • Tablets: Optimized for both phones and tablets
  • Screen Sizes: Responsive design works on all screen sizes

Minimum Requirements

  • Android: API Level 21 (Android 5.0 Lollipop)
  • iOS: iOS 11.0 or later
  • RAM: 2GB minimum (recommended 4GB+)
  • Storage: 50MB for app installation

Deployment

Android Deployment

1

Step 1: Generate Keystore

Create a keystore file for signing your app:

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Save the keystore file securely and note down the password and alias.

2

Step 2: Configure Signing

Create android/key.properties file:

storePassword=your_keystore_password
keyPassword=your_key_password
keyAlias=upload
storeFile=/path/to/upload-keystore.jks
3

Step 3: Update build.gradle

Update android/app/build.gradle.kts to use the keystore:

android {
    ...
    signingConfigs {
        create("release") {
            val keystorePropertiesFile = rootProject.file("key.properties")
            val keystoreProperties = Properties()
            keystoreProperties.load(FileInputStream(keystorePropertiesFile))
            keyAlias = keystoreProperties["keyAlias"] as String
            keyPassword = keystoreProperties["keyPassword"] as String
            storeFile = file(keystoreProperties["storeFile"] as String)
            storePassword = keystoreProperties["storePassword"] as String
        }
    }
    buildTypes {
        getByName("release") {
            signingConfig = signingConfigs.getByName("release")
            isMinifyEnabled = true
            proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro")
        }
    }
}
4

Step 4: Build Release APK

Build the release APK:

flutter build apk --release

The APK will be generated at: build/app/outputs/flutter-apk/app-release.apk

5

Step 5: Build App Bundle (for Play Store)

Build the App Bundle for Google Play Store:

flutter build appbundle --release

The AAB will be generated at: build/app/outputs/bundle/release/app-release.aab

iOS Deployment

1

Step 1: Configure Xcode

  1. Open ios/Runner.xcworkspace in Xcode
  2. Select the Runner target
  3. Go to "Signing & Capabilities"
  4. Select your development team
  5. Update Bundle Identifier if needed
2

Step 2: Update Version

Update version in pubspec.yaml:

version: 1.0.0+1

Format: version: MAJOR.MINOR.PATCH+BUILD_NUMBER

3

Step 3: Build iOS App

Build the iOS app:

flutter build ios --release
4

Step 4: Archive in Xcode

  1. Open ios/Runner.xcworkspace in Xcode
  2. Select "Any iOS Device" or a connected device
  3. Go to Product → Archive
  4. Wait for the archive to complete
  5. Click "Distribute App"
  6. Follow the App Store Connect wizard

Pre-Deployment Checklist

Before deploying, ensure:
  • App name is updated in AndroidManifest.xml and Info.plist
  • App icon is replaced with your branding
  • Package name/Bundle ID is unique
  • Version number is updated
  • All demo data is replaced or removed
  • API endpoints are configured (if backend is ready)
  • Permissions are properly declared
  • Privacy policy URL is added (if required)
  • App is tested on multiple devices
  • Release build is tested thoroughly

Google Play Store Submission

Requirements

  • Google Play Developer account ($25 one-time fee)
  • App Bundle (.aab file)
  • App screenshots (phone and tablet)
  • App icon (512x512px)
  • Feature graphic (1024x500px)
  • Privacy policy URL (if app collects user data)
  • App description and metadata

Apple App Store Submission

Requirements

  • Apple Developer account ($99/year)
  • App archive (.ipa file)
  • App screenshots (various device sizes)
  • App icon (1024x1024px)
  • Privacy policy URL (required)
  • App description and metadata
  • Age rating information

Troubleshooting

Common Issues & Solutions

Issue: "flutter: command not found"

Solution: Add Flutter to your PATH environment variable.

  • Windows: Add Flutter bin directory to System PATH
  • macOS/Linux: Add to ~/.bashrc or ~/.zshrc: 
    export PATH="$PATH:/path/to/flutter/bin"

Issue: "Error: CocoaPods not installed" (iOS)

Solution: Install CocoaPods:

sudo gem install cocoapods

Issue: Build errors or dependency conflicts

Solution: Clean and rebuild:

flutter clean
flutter pub get
flutter run

Issue: "No devices found"

Solution:

  • For Android: Start an emulator from Android Studio or connect a device via USB
  • For iOS: Start a simulator from Xcode or connect an iOS device
  • Verify with: flutter devices

Issue: Missing assets or images not showing

Solution: Ensure assets are properly declared in pubspec.yaml and run:

flutter pub get
flutter clean
flutter run

Issue: Gradle build failed (Android)

Solution:

  • Update Android SDK and build tools
  • Check android/build.gradle.kts for correct versions
  • Run: cd android && ./gradlew clean

Issue: Pod install failed (iOS)

Solution:

  • Update CocoaPods: sudo gem install cocoapods
  • Clean pods: cd ios && rm -rf Pods Podfile.lock
  • Reinstall: pod install

Additional Resources

Frequently Asked Questions (FAQs)

Q1: How do I install Flutter on my system?

▼

A: To install Flutter:

  1. Download Flutter SDK from flutter.dev
  2. Extract the zip file to your desired location (e.g., C:\src\flutter on Windows or ~/development/flutter on macOS/Linux)
  3. Add Flutter to your PATH:
    • Windows: Add C:\src\flutter\bin to System Environment Variables
    • macOS/Linux: Add to ~/.bashrc or ~/.zshrc: export PATH="$PATH:/path/to/flutter/bin"
  4. Run flutter doctor to verify installation and check for missing dependencies
  5. Install any missing dependencies as suggested by flutter doctor

Q2: What should I do if "flutter pub get" fails?

▼

A: If flutter pub get fails, try these steps:

  1. Check your internet connection
  2. Run flutter clean to clear cached files
  3. Update Flutter: flutter upgrade
  4. Delete pubspec.lock and run flutter pub get again
  5. Check pubspec.yaml for syntax errors
  6. Verify your Flutter version is compatible: flutter --version
  7. If using a proxy, configure it: flutter config --no-analytics or set HTTP_PROXY environment variable

Q3: How do I set up Android Studio for Flutter development?

▼

A: To set up Android Studio:

  1. Download and install Android Studio
  2. Open Android Studio and go through the setup wizard
  3. Install Android SDK (API 21 or higher) via SDK Manager
  4. Install Flutter and Dart plugins:
    • Go to File → Settings → Plugins (Windows/Linux) or Android Studio → Preferences → Plugins (macOS)
    • Search for "Flutter" and install it (Dart plugin will be installed automatically)
  5. Restart Android Studio
  6. Create an Android Virtual Device (AVD) via Tools → Device Manager
  7. Verify setup: flutter doctor

Q4: How do I set up Xcode for iOS development?

▼

A: For iOS development on macOS:

  1. Install Xcode from the Mac App Store
  2. Open Xcode and accept the license agreement
  3. Install additional components when prompted
  4. Install CocoaPods: sudo gem install cocoapods
  5. Open Terminal and run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  6. Run flutter doctor to verify Xcode installation
  7. If you see errors, run: sudo xcodebuild -license accept

Q5: What does "No devices found" error mean and how do I fix it?

▼

A: This error means Flutter can't detect any device to run the app. Solutions:

  • For Android:
    • Start an Android emulator from Android Studio (Tools → Device Manager → Start)
    • Or connect a physical device via USB and enable USB debugging
    • Verify with: flutter devices
  • For iOS:
    • Start an iOS simulator from Xcode (Xcode → Open Developer Tool → Simulator)
    • Or connect an iPhone/iPad via USB
    • Verify with: flutter devices
  • General: Make sure you have at least one device/emulator running before executing flutter run

Q6: How do I fix "Gradle build failed" errors?

▼

A: To fix Gradle build failures:

  1. Update Android SDK and build tools in Android Studio
  2. Check android/build.gradle.kts for correct Gradle version
  3. Clean Gradle cache: cd android && ./gradlew clean
  4. Delete android/.gradle folder and rebuild
  5. Update Gradle wrapper: Edit android/gradle/wrapper/gradle-wrapper.properties
  6. Check for Java/JDK compatibility issues
  7. Run flutter clean and flutter pub get
  8. If using proxy, configure Gradle proxy settings in ~/.gradle/gradle.properties

Q7: How do I fix CocoaPods installation errors on macOS?

▼

A: To fix CocoaPods issues:

  1. Update Ruby: brew install ruby (if using Homebrew)
  2. Update CocoaPods: sudo gem install cocoapods
  3. If permission errors occur, use: sudo gem install -n /usr/local/bin cocoapods
  4. Clean pods: cd ios && rm -rf Pods Podfile.lock
  5. Reinstall pods: pod install --repo-update
  6. If still failing, try: pod deintegrate && pod install
  7. Check Xcode command line tools: xcode-select --print-path

Q8: Why are my assets/images not showing in the app?

▼

A: If assets aren't displaying:

  1. Verify assets are declared in pubspec.yaml under the flutter: section: 
    flutter:
  assets:
    - assets/images/
    - assets/icons/
    - assets/categories/
  2. Check file paths are correct (case-sensitive on Linux/macOS)
  3. Run flutter clean and flutter pub get
  4. Restart the app completely (hot reload won't pick up new assets)
  5. Verify asset file names don't contain special characters or spaces
  6. Check that asset files exist in the specified directories

Q9: How do I change the app package name/Bundle ID?

▼

A: To change package identifiers:

  • Android:
    1. Update android/app/build.gradle.kts: namespace = "com.yourcompany.appname"
    2. Update package name in android/app/src/main/AndroidManifest.xml
    3. Rename package folders in android/app/src/main/kotlin/ to match new package name
  • iOS:
    1. Open ios/Runner.xcworkspace in Xcode
    2. Select Runner target → General tab
    3. Update Bundle Identifier to com.yourcompany.appname

Q10: How do I build a release version of the app?

▼

A: To build release versions:

  • Android APK: flutter build apk --release
  • Android App Bundle: flutter build appbundle --release
  • iOS:
    1. Run flutter build ios --release
    2. Open ios/Runner.xcworkspace in Xcode
    3. Select Product → Archive
    4. Follow the distribution wizard

Note: Make sure to configure signing certificates before building release versions.

Q11: How do I integrate my backend API with this UI Kit?

▼

A: To integrate your backend:

  1. Add HTTP package to pubspec.yaml: http: ^1.0.0 or dio: ^5.0.0
  2. Create API service class in lib/network/ directory
  3. Update controllers in lib/screens/[feature]/[feature]_controller.dart to call your API
  4. Replace demo data in lib/demo_data/Demo_data.dart with API responses
  5. Implement error handling and loading states
  6. Add authentication tokens/headers to API requests
  7. Test API integration thoroughly before deployment

Q12: What should I do if the app crashes on startup?

▼

A: If the app crashes on startup:

  1. Check console/logs for error messages
  2. Run flutter clean and rebuild
  3. Verify all dependencies are installed: flutter pub get
  4. Check for null safety issues in your code
  5. Verify all required assets exist and are properly declared
  6. Check main.dart for initialization errors
  7. Review platform-specific configurations (AndroidManifest.xml, Info.plist)
  8. Try running on a different device/emulator

Q13: How do I update Flutter to the latest version?

▼

A: To update Flutter:

  1. Run flutter upgrade in terminal
  2. If upgrade fails, manually download the latest Flutter SDK and replace your current installation
  3. Run flutter doctor to verify the update
  4. Update your project dependencies: flutter pub upgrade
  5. Check for breaking changes in the Flutter release notes

Q14: Can I use this UI Kit for commercial projects?

▼

A: Yes, this UI Kit is designed for commercial use. However:

  • Review the license file included with the package
  • Ensure you have proper licenses for any third-party assets or fonts
  • Customize the design to match your brand identity
  • Replace all demo data with your actual content
  • Test thoroughly before deploying to production

Q15: How do I customize colors and themes?

▼

A: To customize the app theme:

  1. Open lib/core/values/app_colors.dart
  2. Update color constants with your brand colors
  3. Modify theme settings in lib/main.dart if needed
  4. Hot restart the app to see changes (hot reload may not apply theme changes)
  5. Test on both light and dark backgrounds if applicable

Contact Us

Need help or have questions? We're here to assist you!

Website

Visit our website for more information, updates, and resources:

www.murait.com

Email Support

For technical support, questions, or feedback, please contact us at:

hello@murait.com

We typically respond within 24-48 hours during business days.

Support Information:
  • For installation and setup issues, please check the Installation & Setup section first
  • For common errors, refer to the Troubleshooting section
  • For detailed questions, see the FAQs section above
  • When contacting support, please include:
    • Your Flutter version (flutter --version)
    • Your operating system
    • Error messages or screenshots
    • Steps you've already tried