Getting started with Mephisto Booking app!

The Booking App UI Toolkit is the ultimate solution for creating a sleek and user-friendly booking experience. With 10 screens and over 20 components, this toolkit is perfect for building everything from hotel reservations to event bookings. Customize each screen with fine-tuned control over borders, colors, fonts, and a dynamic toggle between light and dark themes. Whether it’s a booking flow, payment interface, or booking details page, this toolkit provides all the flexibility you need to craft a polished and user-centric app that enhances the booking experience for your users.



Prerequisites

Before you start, ensure the following:

  1. You have Flutter installed on your system. If not, install Flutter.
  2. You are familiar with the basics of Flutter development.
  3. Your Flutter project is set up and ready.
  4. Flutter SDK version 3.x or higher.
  5. A basic understanding of Flutter.

Installation

To setup the Mephisto booking app, you need to perform these 3 easy steps.



  1. Create a ssh key pair, add your ssh private key to your ssh client and submit the public ssh key while making the purchase:
1ssh-keygen
2ssh-add ~/.ssh/<ssh_key_name>
3
  1. After the purchase, clone mephisto booking app github repo: 
    1git clone git@github.com:A7ALABS/mephisto-booking-app.git mephisto-booking-app
  2. Update your pubspec.yaml dependencies:

1 flutter pub get


Note: You will have to submit the public ssh key while making the purchase, this gives you access to the mephisto booking app that's hosted on github.



Customization

Reading and Updating Theme
1isLightTheme = !ref.read(isDarkThemeProvider);
2ref.read(isDarkThemeProvider.notifier).update((state) => state == true ? false : true);
3

Note: Use watch() instead of read() if you want to listen to changes.

Reading and Updating Font
1font = ref.read(fontFamilyProvider.notifier); //read
2font = ref.read(fontFamilyProvider.notifier).update((state) => 'Nunito'); //update
3
Reading and Updating Color
1ref.read(accentColorProvider.notifier); // read
2ref.read(accentColorProvider.notifier).update((state) => Colors.red); //update
3
Reading and Updating Border Radius
1ref.read(borderRadiusProvider.notifier) //read
2ref.read(borderRadiusProvider.notifier).update((state) => 0) //update
3
Customizing Components

Every component is highly customizable using properties like color, padding, borderRadius, and more. For example:

1MephistoTextHeadingBold1(
2    text: "Log into your account",
3    textAlign: TextAlign.center,
4    textColor: Colors.blue,
5);
6
Adding custom font
Step 1: Configure Fonts in pubspec.yaml

Start by defining your font in the pubspec.yaml file of your Flutter project. Add the font family under the fonts section like this:

1  fonts:
2    - family: Lato
3      fonts:
4        - asset: fonts/Lato/Lato-Black.ttf
5        - asset: fonts/Lato/Lato-BlackItalic.ttf
6        - asset: fonts/Lato/Lato-Bold.ttf
7        - asset: fonts/Lato/Lato-BoldItalic.ttf
8        - asset: fonts/Lato/Lato-Italic.ttf
9        - asset: fonts/Lato/Lato-Light.ttf
10        - asset: fonts/Lato/Lato-LightItalic.ttf
11        - asset: fonts/Lato/Lato-Regular.ttf
12        - asset: fonts/Lato/Lato-Thin.ttf
13        - asset: fonts/Lato/Lato-ThinItalic.ttf
14
Notes:
  1. Place the font files in the specified folder (e.g., assets/fonts/Lato/).
  2. Ensure the folder is correctly referenced in the pubspec.yaml file.
  3. Run flutter pub get to update the dependencies.
Step 2: Update the fontFamilyProvider

Simply pass your font in the MephistoThemeProvider:

1    return MephistoThemeProvider(
2      fontFamily: 'Lato', // your font here
3      // ...rest of the configs
4    );
5
Notes:
  1. To read and update the fontFamilyProvider, you will need to import flutter_riverpod ('package:flutter_riverpod/flutter_riverpod.dart')
  2. You will need to make the widget using the ref as ConsumerWidget.

Documentation and Support

For detailed api reference, visit Mephisto API Reference. For support, click here or join our discord community.




Changelog:

Version 1.0.0
  1. Initial release with complete booking flow
  2. Support for light and dark themes.
  3. Basic customization options for colors, fonts, and shapes.