Getting started with Mephisto Wallet app!

Create a modern and secure digital wallet experience with the Digital Wallet App UI Toolkit. Featuring 7 screens and 15+ components, this toolkit provides a fully customizable design for wallets, transactions, and balance screens. With a wide range of personalization options, you can modify the borders, colors, and fonts, and even seamlessly switch between light and dark modes to cater to your users' preferences. Whether you're designing for payments, transaction history, or profile settings, the Digital Wallet UI Toolkit provides the perfect foundation for an intuitive and customizable financial app interface.



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