Getting started with Mephisto Bundle UI Kit!

Transform your app development with the Ultimate App Bundle, featuring customizable UI toolkits for Gym, Booking, Digital Wallet, KYC, and Authentication apps. Each toolkit includes multiple screens and components tailored to their purpose, with full control over borders, colors, fonts, and seamless light/dark theme switching. Build intuitive fitness dashboards, sleek booking flows, secure wallet interfaces, streamlined KYC systems, and modern authentication flows—all with polished designs to enhance user experience and functionality.



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 bundle, 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 github repo: 
    1git clone git@github.com:A7ALABS/mephisto.git mephisto
  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 bundle 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 7 apps. Featuring customizable UI toolkits for Gym, Booking, Digital Wallet, KYC, and Authentication apps.
  2. Support for light and dark themes.
  3. Basic customization options for colors, fonts, and shapes.