Getting started with Mephisto KYC app!

Introducing the KYC App UI Toolkit, designed to streamline user identification processes with a highly customizable and secure user interface. This toolkit includes 7 screens and over 10 components, with added functionality for fingerprint and face authentication, making it ideal for KYC (Know Your Customer) applications. Whether you're creating a login screen, identity verification interface, or settings page, you can personalize every aspect—borders, colors, fonts, and switch between light and dark themes. The toolkit ensures a seamless, secure, and aesthetically pleasing experience for users, elevating your KYC process to the next level.



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 kyc 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 kyc app github repo: 
    1git clone git@github.com:A7ALABS/mephisto-kyc-app.git mephisto-kyc-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 kyc 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 KYC process flow.
  2. Support for light and dark themes.
  3. Basic customization options for colors, fonts, and shapes.