codestage_architecture 1.1.0

Codestage intern Flutter architecture

Features

This package contains the architectural structure of the Codestage's flutter apps. It contains various classes, functionals and utils to structure and organise your project. This package contains:

• Some structural classes (containing the main color scheme and the dimensions map)
• Some class types that a view should extend (the component type, the listing and the enhanced enum type)
• Multiple enums containing the error check for form validation, string manipulation utils, secure store implementation, system localisation, etc.

Those are described as follows bellow

How to use the package

Structural approach

In general, the project should be organised on features to be implemented, such as onboarding, authorisation flows, user dashboard, settings, functionals, etc. For each feature, which acts as a module, you should have a service and a listing class which extends the CdsService and CdsListing type. Going forward with the explanation a a Flutter page / component / statefull widget should extend the class component, as per example.

class WidgetClassInterfaceComponent extends CdsComponent<Service, Listing> {
  void someFunction() {
    super.listings?.listing1();
    super.service?.api();
  }
}

class Service extends CdsService {
  Service() : super(baseUrl: 'https://alpha-vantage.p.rapidapi.com');

  Future<http.Response> api() {
    super.configureServiceForRequest([], 'query');
    return super.request(CrudOperationType.getAll);
  }
}

class Listing extends CdsListing {
  Widget listing1() {
    return const Text('Hello');
  }

  Widget listing2() {
    return const Text('Hello');
  }

  Widget listing3() {
    return const Text('Hello');
  }
}

The CdsComponent needs 2 parameters:

• A service which should extend the CdsService
• A listing which should extend the CdsListing type.

In this way, you can access the service directly by calling dart super.service?.functionToCall() or a listing by calling super.listings?.listing1().

The utils contained

1. The color scheme of the app should be a class that is accessible everywhere, by using a static invocation type. The CdsAppColorScheme implements 3 variables:

• mainColor, which is the app's main color
• secondaryColor, which is the app's secondary color
• otherColors, which is a map containing a collection of keys (color name) and their corresponding values, the colors.

In order to achieve this, a solution like this is valid. Extend the class and create a static reference controller. They can then be accessed as in the example.

class AppColors extends CdsAppColorScheme {
  AppColors({required super.mainColor, required super.secondaryColor, required super.otherColors});

  static AppColors scheme = AppColors(
      mainColor: const Color.fromARGB(255, 255, 162, 0),
      secondaryColor: const Color.fromARGB(255, 0, 0, 0),
      otherColors: {
        'grey': const Color.fromARGB(255, 255, 0, 0),
        'blue': const Color.fromARGB(255, 0, 75, 255)
      });
}

void someFunction() {
  Color textColor = AppColors.scheme.otherColors['grey']!;
  Color mainTextColor = AppColors.scheme.mainColor;
}

2. The app dimensions and everything related to it.

The CdsDimensions class contains a simple map of string keys (representing the property name) and a dynamic value where anything can be placed.

The example is self-explanatory:

class Dimensions extends CdsDimensions {
  Dimensions({required super.dimensionsMap});

  static Dimensions dimensions = Dimensions(dimensionsMap: {'size': '40', 'number': 40});
}

void someFunction() {
  Double height = Dimensions.dimensions.dimensionsMap['size']!;
}

3. The ErrorChecker

When using forms to validate some content, a general class of error checker is required. Therefore, We have created a class named FieldValidationOutput, which contains a message to display in case of an error and a boolean variable for any other boolean checks. The following example is illustrating its use.

class ErrorChecker {
  static ErrorValidationError validateName(String name) {
    if (name
        .trim()
        .isEmpty) {
      return ErrorValidationError(message: 'Please complete this fields', isValid: false);
    }

    return ErrorValidationError(message: null, isValid: true);
  }
}

class ErrorValidationError extends FieldValidationOutput {
  ErrorValidationError({required super.message, required super.isValid});
}

4. A secure way to store data

Tokens and other sensitive information can be stored using the CdsKeyChainStorageInterface which is an interface for the SecureStorage interface created by flutter dev

This class enriches the first one by adding functional calls to its main methods. Therefore, you can find there the read, write, delete and deleteAll functions.

In your project, you can setup a SecureStorage class which extends the CdsKeychainStorageInterface and create a simple static constructor, as seen in the example. You can then interact at any point with the storage by using the SecureStorage.storage.FUNCTION_TO_CALL call.ß

class SecureStorage extends CdsKeychainStorageInterface {
  SecureStorage();

  static SecureStorage storage = SecureStorage();
}

Additional information

Copyright Codestage.ro | TasteDaBomb