techgrains 1.6.4

Developer friendly app library having various commonly used functionality.

TGFramework-Flutter

Purpose of TGFramework is to provide developer friendly library, that can help to improve feature development rather focusing on common structure creation during every mobile app development.

TGFramework includes following areas as part of its framework. Further, in this document, all of them explained with example.

• Common

  • TGLog
    • Levels: Debug, Info, Error, Warn, Tag, All, Off

• Memory

  • TGSession: In memory Session throughout the app
  • TGSharedPreference: Shared Preferences (Android), User Defaults (iOS)
  • TGAccessMatrix: In memory Access Matrix based on Access Key with Roles

• Localization (i18n)

  • TGLocale: Supported, default and current locale holders with locale related supporting features
  • TGLocalization: Localization for each locale loads values from json file
  • TGLocalizationsDelegate: Extended implementation of LocalizationsDelegate which Flutter uses internally

• Util

  • TGFlavor
    • Supports name, baseUrl, logLevel, applyMock, mockMappingsFile & custom params as part of configuration
  • TGDateUtil
    • Format DateTime
    • Parse DateTime
    • Convert DateTime between Timezones
  • TGNetUtil
    • Check Internet Availability
    • Check internet And Api Health
  • TGFileUtil
    • Read Local File
  • TGPlatformUtil
    • Check platform related properties like iOS, Android, Mobile, Package Config, Local Host Name, Operating System etc.
  • TGValidate
    • Validate Email, Alphabets, Numeric, Alphanumeric

• Service

  • TGService
    • TGRequest
      • TGPostRequest, TGGetRequest, TGPutRequest, TGDeleteRequest, TGUploadRequest, TGUploadFileRequest
    • TGResponse
    • TGError
    • Mock

• View

  • TGView
    • Theme
    • Scaffold Container
    • Custom Scroll View using Sliver List
    • Empty Sized Box
    • Row Container
    • Column Container
    • Columns Container
    • Box Container
    • Clear Focus
    • Clear Focus with Gesture
    • Banner
    • Body Color
    • Display Color
    • Divider
    • App Bar Back Button
    • Show Snack Bar
    • Show Alert Dialog
    • Popup Menu Item
    • Loading Indicator
    • Refresh Indicator
  • TGText
    • Render Text

Common

TGLog

Logging mechanism levels

• ALL, TAG, DEBUG, INFO, WARN, ERROR, OFF

By default, Log Level is ALL. If it needs to be changed, set in your app's initState().

[main.dart]
    @override
    void initState() {
        super.initState();
        TGLog.setLogLevel(TGLogLevel.DEBUG);
        ...
    }

copied to clipboard

How to Log which prints output in the console.

[Log]
    TGLog.t("TAG", "Tag log");  // Tag
    TGLog.d("Debug log");       // Debug
    TGLog.i("Info log");        // Info
    TGLog.w("Warning log");     // Warn
    TGLog.e("Error log");       // Error

[Output]
    2020-04-30 12:48:09.955850[TAG] Tag log
    2020-04-30 12:48:09.958239[DEBUG] Debug log
    2020-04-30 12:48:09.958661[INFO] Info log
    2020-04-30 12:48:09.958964[WARN] Warning log
    2020-04-30 12:48:09.959226[ERROR] Error log

copied to clipboard

Memory

TGSession

Single Session instance in memory to hold values in memory as Key-Value pair. No need to inherit or initialize anything.

Where to use:

• Whenever data is common across layers
• Managing data in memory without any disk-io
• When data become invalid after app close

Between Screens: Just straight put things in one screen and use it in another one.

[Profile Screen]
    TGSession.getInstance().set("Designation","Developer");

[Home Screen]
    String designation = TGSession.getInstance().get("Designation");

copied to clipboard

Between service and view layer: Just put in service and have it in view. (Easy to put any object.)

[Service]
    TGSession.getInstance().put("Person",Person);

[Screen] 
    Person person = TGSession.getInstance().get("Person");

copied to clipboard

Time sensitive key-value setup via future Duration. After validity duration, won't return value through get.

    TGSession.getInstance().set("allowPayment", true, validFor: Duration(minutes: 1));

copied to clipboard

Thinking to manage piled up objects in session?

    TGSession.getInstance().remove("Person");

copied to clipboard

Custom TGSession Listener

Use TGSessionListener with custom implementation to listen whenever any key has been set/removed to/from TGSession.

TGSharedPreference

Access local disk storage mechanism through TGSharedPreference. Its uses Shared Preferences for Android, User Defaults for iOS internally. No need to inherit or initialize anything.

    await TGSharedPreferences.getInstance().set("Designation", "Developer"); // Set
    await TGSharedPreferences.getInstance().get("Designation"); // Get

copied to clipboard

Time sensitive key-value setup via future Duration. After validity duration, won't return value through get.

    await TGSharedPreferences.getInstance().set("allowPayment", true, validFor: Duration(minutes: 1));

copied to clipboard

Custom TGSharedPreferences Listener

Use TGSharedPreferencesListener with custom implementation to listen whenever any key has been set/removed to/from TGSharedPreferences.

TGAccessMatrix

In memory Access Matrix based on Access Key with Roles. No need to put business logic based on Roles in various parts of the application. Centralised common structure of access gives full flexibility to manage with multiple roles from api.

Create access matrix for each role and add them into TGAccessMatrix

    TGAccessMatrixVO employeeAccess = TGAccessMatrixVO(key: "Profile", roleId: 1, read: true, update: true, delete: false, create: false);
    TGAccessMatrixVO editorAccess = TGAccessMatrixVO(key: "Profile", roleId: 2, read: true, update: true, delete: false, create: false);

    TGAccessMatrix.getInstance().addAll([employeeAccess, editorAccess]);

copied to clipboard

Apply roles whenever user login (or scope of change in roles)

    TGAccessMatrix.getInstance().applyRoles([1,2]);

copied to clipboard

Use access matrix from anywhere (Uses default applied roles from above)

    TGAccessMatrix.getInstance().hasRead("Profile");
    TGAccessMatrix.getInstance().hasUpdate("Profile");
    TGAccessMatrix.getInstance().hasDelete("Profile");
    TGAccessMatrix.getInstance().hasCreate("Profile");

copied to clipboard

How to override default roles by providing roleIds explicitly

    TGAccessMatrix.getInstance().hasRead("Profile", roleIds: [3]);
    TGAccessMatrix.getInstance().hasUpdate("Profile", roleIds: [3]);
    TGAccessMatrix.getInstance().hasDelete("Profile", roleIds: [3]);
    TGAccessMatrix.getInstance().hasCreate("Profile", roleIds: [3]);

copied to clipboard

Localization (i18n)

TGLocale

Supported, default and current locale holders with a locale related supporting features

TGLocalization

Localization for each locale loads values from json file

TGLocalizationsDelegate

Extended implementation of LocalizationsDelegate which Flutter uses internally

Configuration dependencies in pubspec.yaml

[pubspec.yaml]
    dependencies:
      flutter:
        sdk: flutter
      flutter_localizations:
        sdk: flutter

  assets:
    - assets/locale/

copied to clipboard

Put locale files at "assets/locale/"

[assets/locale/en_US.json]
    {
      "button.login": "Login"
    }

copied to clipboard

Setup locale in your main dart

[main.dart]
    @override
    void initState() {
      TGLocale.init(
        defaultLocale:
          const Locale("en", "US"), // en_US.json
        otherLocales: [
          const Locale("gu", "IN"), // gu_IN.json
          const Locale("hi", "IN")  // hi_IN.json
        ],
        customPath: "/data/user/0/com.test.test/files/" // Locale folder custom path if provided else load files from 'assets/locale/'
      );
    }

    MaterialApp(
    ...
      theme: TGView.theme(),
      supportedLocales: TGLocale.supportedLocales,
      locale: TGLocale.currentLocale,
      localizationsDelegates: [TGLocalizationsDelegate(), GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate],
      localeResolutionCallback: (locale, supportedLocales) => TGLocale.localeResolutionCallback(locale, supportedLocales),
    ...
    )

copied to clipboard

How to get text from locale

[Without arguments]
    TGLocale.text("button.login"); // Having "button.login": "Login"

[With arguments]
    TGLocale.text("message.hello", args: ["Amit Patel"]); // Having "message.hello": "Welcome {0} to our team!"

copied to clipboard

How to change locale

[set locale]
    setLocale("en_US");
    ...
    setLocale(String localeCode) {
      setState(() {
        TGLocale.currentLocale = TGLocale.findLocaleByCode(localeCode );
      });
    }
    // -- OR -- //
    setLocale(Locale locale) {
      setState(() {
        TGLocale.currentLocale = locale;
      });
    }

copied to clipboard

Helper methods just in case needed anywhere

[Find locale by code]
    Locale locale = TGLocale.findLocaleByCode("en_US");

[Generate code by locale]
    Locale locale = Locale("en", "US");
    String localeCode = TGLocale.generateCode(locale); // returns "en_US"

copied to clipboard

Util

TGFlavor

Initialize

  TGFlavor.init("assets/config/flavors.json");

copied to clipboard

flavors.json

[
  {
    "name": "dev",
    "baseUrl": "https://dev.api.tgportal.com",
    "logLevel": "DEBUG",
    "applyMock": true,
    "mockMappingsFile": "assets/mocks/_mappings.json",
    "params": {
      "key": "dev value"
    }
  },
  {
    "name": "stage",
    "baseUrl": "https://stage.api.tgportal.com",
    "logLevel": "INFO",
    "applyMock": false,
    "params": {
      "key": "stage value"
    }
  },
  {
    "name": "prod",
    "baseUrl": "https://api.tgportal.com",
    "logLevel": "ERROR",
    "applyMock": false,
    "params": {
      "key": "prod value"
    }
  }
]

copied to clipboard

Access

    TGFlavor.name();
    TGFlavor.baseUrl();
    TGFlavor.logLevel();
    TGFlavor.applyMock();
    TGFlavor.mockMappingsFile();
    TGFlavor.param("key");

copied to clipboard

Run app with flavor name

  flutter run --dart-define=flavor=dev

copied to clipboard

Custom flavor params on top of flavors.json

[Splash]
    TGFlavor.setParam("secretKey", "key");
    
[Other Screen]
    String secretKey = TGFlavor.param("secretKey");
    
[Remove Param]
    TGFlavor.removeParam("secretKey");

copied to clipboard

TGDateUtil

Format

[Default Pattern]
    TGDateUtil.formatDate(date); //"2020-05-16"
    TGDateUtil.formatDateTime(dateTime); //"2020-05-16 12:47:52"

[Custom Pattern]
    TGDateUtil.formatDate(date, datePattern: "dd/MM/yyyy"); //"16/05/2020"
    TGDateUtil.formatDateTime(dateTime, dateTimePattern: "dd/MM/yyyy HH:mm:ss"); //"16/05/2020 12:47:52"

copied to clipboard

Parse

[Default Pattern]
    DateTime date = TGDateUtil.parseDate("2020-05-16");
    DateTime dateTime = TGDateUtil.parseDateTime("2020-05-16 12:47:52");

[Custom Pattern]
    DateTime date = TGDateUtil.parseDate("16/05/2020", datePattern: "dd/MM/yyyy");
    DateTime dateTime = TGDateUtil.parseDateTime("16/05/2020T12:47:52", dateTimePattern: "dd/MM/yyyyTHH:mm:ss");

copied to clipboard

Convert date Between Timezones

[String input]
    String dateTime = TGDateUtil.convertTimezoneWithString("16/05/2020 12:47:52", TGTimeZone.IST_INDIA, TGTimeZone.CST_CHINA, dateTimePattern: 
    "dd/MM/yyyyTHH:mm:ss");

[Datetime input]
    DateTime dateTimeParsed = TGDateUtil.parseDateTime("16/05/2020 12:47:52", dateTimePattern: "dd/MM/yyyy HH:mm:ss");
    DateTime dateTime = TGDateUtil.convertTimezoneWithDateTime(dateTimeParsed, TGTimeZone.IST_INDIA, TGTimeZone.CST_CHINA, dateTimePattern: 
    "dd/MM/yyyy HH:mm:ss");

copied to clipboard

TGNetUtil

Check internet availability

    if(await TGNetUtil.isInternetAvailable()) {
        ...
    }

copied to clipboard

TGFileUtil

Read File as String

    String content = await TGFileUtil.readFileAsString("assets/files/company.txt");

copied to clipboard

TGPlatformUtil

Check isApp, isDesktop, isWeb, isIOS, isAndroid, operatingSystem etc

    bool isApp = TGPlatformUtil.isApp();
    bool isDesktop = TGPlatformUtil.isDesktop();
    bool isWeb = TGPlatformUtil.isWeb();
    bool isAndroid = TGPlatformUtil.isAndroid();
    bool isIOS = TGPlatformUtil.isIOS();
    String operatingSystem = TGPlatformUtil.operatingSystem();

copied to clipboard

TGValidate

Validators like email, alphabets, numeric, alphanumeric.

[Has Value]
    TGValidate.hasValue(anything);

[Email]
    TGValidate.email("[e-mail]");

[Alphabets]
    TGValidate.alphabets("AbcPqrXyz");

[Numeric]
    TGValidate.numeric("1234567890");

[Alphanumeric]
    TGValidate.alphanumeric("abc123");

copied to clipboard

Service

TGService

HTTP wrapper implementation having Request and Response as objects. JSon is Api standard so converting json string response into provided response object. In case of error, also converting json error string response into provided error object.

Initialize

    await TGService.init(
      baseUrl: "https://api.company.com/v1",
      headers: defaultHeaders(),
      applyMock: true,
      mockMappingsFile: "assets/mocks/_mappings.json",
      badCertificateCallbackEnabled: false,
      connectionTimeoutInSeconds: 30
    );

    Map<String, String> defaultHeaders() {
      Map<String, String> headers = {};
      headers['Content-Type'] = 'application/json';
      return headers;
    }

copied to clipboard

All the attributes provided during TGService.init(...) remains same across the entire lifecycle of TGService and all the requests. (Stored as static attributes which will be used for all the requests - TGRequest.)

HTTP Request (Example: Login)

    TGPostRequest request = LoginRequest(
      email: _email,
      password: _password
    );

    new TGService<LoginResponse, ServiceError>(() => new LoginResponse(), () => new ServiceError())
      .post(
        request: request,
        onSuccess: (response) => _onSuccess(response),
        onError: (error) => _onError(error)
    );

copied to clipboard

Custom headers can also be set to the specific request as well. It will override default headers which were being set in TGService.init before.

    TGPostRequest request = ...
    request.customHeaders = {
      'Content-Encoding': 'gzip'
    };

copied to clipboard

Request, Response & Error (Example: Login)

Request extends type of request TGGetRequest, TGPostRequest, TGPutRequest, TGDeleteRequest, TGUploadRequest, TGUploadFileRequest

[login-request.dart]
    class LoginRequest extends TGPostRequest {
      String email;
      String password;
    
      LoginRequest({this.email, this.password});
    
      Map<String, dynamic> toJson() => {
        'email': email,
        'password': password,
      };
    
      @override
      String getUri() {
        return "/login";
      }
    
      String body() {
        return json.encode(toJson());
      }
    }

copied to clipboard

Response extends standard TGResponse

[login-response.dart]
    class LoginResponse extends TGResponse {
      String userId;
      String accessToken;
      String refreshToken;
      String email;
      String name;
    
      LoginResponse();
    
      LoginResponse.fromJson(dynamic json) {
        fromJson(json);
      }
    
      @override
      fromJson(dynamic json) {
        userId = json['userId'];
        accessToken = json['accessToken'];
        refreshToken = json['refreshToken'];
        name = json['name'];
        email = json['email'];
      }
    }

copied to clipboard

Error represents common service error attributes which can be used common across all the services which extends TGError

[service-error.dart]
    class ServiceError extends TGError {
      int timestamp;
      int errorCode;
      String message;
      List details;
    
      ServiceError({
        this.timestamp,
        this.errorCode,
        this.message,
        this.details,
      });
    
      @override
      ServiceError fromJson(dynamic json) {
        return ServiceError(
          timestamp: json['timestamp'],
          errorCode: json['errorCode'],
          message: json['message'],
          details: json['details'],
        );
      }
    }

copied to clipboard

Mock Service (Example: Login)

Mapping file holds all the success and error files for each combination of request uri and method. Framework decides based on httpStatus code weather to take success or error file.

One can simply bypass the entry by making applyMock as false which triggers live service call instead of relying on mock.

[assets/mocks/_mappings.json]
    [
      {
        "uri": "/login",
        "method": "POST",
        "applyMock": true,
        "httpStatus": 200,
        "successFile": "assets/mocks/login_success.json",
        "errorFile": "assets/mocks/login_error.json"
      }
    ]

[assets/mocks/login_success.json]
    {
      "userId": "Kmh76tYuH92BvkYt498Gv6FcL0Ut",
      "accessToken": "Mh9TgfE26Df9vp76Hjk4eDf67GvdS",
      "refreshToken": "K8gHr4I8tHklM9Hkt6EfDoPkn84dA",
      "email": "[e-mail]",
      "name": "Vishal Patel"
    }

[assets/mocks/login_error.json]
    {
      "timestamp": 1234567890,
      "errorCode": 2003,
      "message": "Invalid password",
      "details": [
        "Password must be 6 characters long"
      ],
    }

copied to clipboard

View

TGView

Common view object creation and helper.

Theme

[main.dart] 
    @override
    void initState() {
        super.initState();
        TGView.loadDark();
        ...
    }

[Usage 1: Passing in MaterialApp()]
    child: MaterialApp(
        ...
        theme: TGView.theme(),
        initialRoute: ...
    ),

[Usage 2: Give particular color from Theme]
    IconButton(
        ...
        color: TGView.theme().primaryColor,
        onPressed: ...
    );

copied to clipboard

Options to load theme different ways

    TGView.loadLightTheme(); // Default Light
    TGView.loadDarkTheme(); // Default Dark
    TGView.loadTheme(...); // ThemeData

copied to clipboard

Refer Theme references directly

    TGView.textTheme()... for TextTheme
    TGView.appBarTheme()... for AppBarTheme
    TGView.tabBarTheme()... for TabBarThemeData
    TGView.platform()... for TargetPlatform

copied to clipboard

Scaffold Container

Provide custom background and list of widgets to render.

[Without Background]
    List<Widget> widgets = ...; // Initialise
    Scaffold scaffold = TGView.scaffoldContainer(widgets);

[With Background]
    List<Widget> widgets = ...; // Initialise
    Container background = ...; // Initialise
    Scaffold scaffold = TGView.scaffoldContainer(widgets, backgroundContainer: background);

copied to clipboard

Custom Scroll View having Sliver List

Custom Scroll View

    Container container = TGView.sliverScrollView();

copied to clipboard

Empty Sized Box

To create empty box by providing height, width or both.

    TGView.emptySizedBox(height: 50);

copied to clipboard

Row Container

    // Some icon and text as left and right aligned widgets for example
    TGView.rowContainer (
    left: [
       Icon(Icons.done_outline, color: TGView.theme().accentColor),
       TGView.emptySizedBox(width: 10),
       Text("Completed", style: TGView.textTheme().bodyText2)
     ], center: [
       Icon(Icons.keyboard_arrow_left, color: TGView.theme().hintColor)
     ],
     ], right: [
       Icon(Icons.keyboard_arrow_right, color: TGView.theme().dividerColor)
     ]
    );

copied to clipboard

Column Container

    // Some icon and text as children widgets for example
    TGView.columnContainer (
      children: [
       Icon(Icons.done_outline, color: TGView.theme().accentColor),
       TGView.emptySizedBox(height: 10),
       Text("Completed", style: TGView.textTheme().bodyText2)
     ]
   );

copied to clipboard

Columns Container

Supports N number of columns.

    // Some icon and text as children widgets for example
    TGView.columnsContainer (
    TGView.columnsContainer (
      children: [
        [
          Icon(Icons.done),
          Text("First Column", style: TGView.textTheme().bodyText2)
        ],
        [
          Icon(Icons.done_outline),
          Text("Second Column", style: TGView.textTheme().bodyText2)
        ],
     ]
   );

copied to clipboard

Box Container

    // Some icon and text as children widgets for example
    TGView.boxContainer(
      margin: EdgeInsets.all(0),
      bgColor: Colors.grey,
      color: TGView.theme().dividerColor,
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
      children: [
        Icon(Icons.done_outline, color: TGView.theme().accentColor),
        TGView.emptySizedBox(height: 10),
        Text("Completed", style: TGView.textTheme().bodyText2)
      ]
    );

copied to clipboard

Clear Focus Gesture

    GestureDetector gestureDetector = TGView.clearFocusGesture(context, child);
    // ... Utilize gestureDetector in appropriate heirarchy of widgets

copied to clipboard

Banner

    GestureDetector gestureDetector = TGView.banner(
      child, // Material App in most of the cases
      message: "Banner",
      bannerColor: Colors.orange,
      textColor: Colors.white,
      bannerLocation: BannerLocation.startEnd,
    );

copied to clipboard

Clear Focus (Hide Keyboard)

    TGView.clearFocus(context); 

copied to clipboard

Body Color

    TGView.bodyColor();

copied to clipboard

Display Color

    TGView.displayColor();

copied to clipboard

Divider

    TGView.divider();

copied to clipboard

App Bar Back Button

    // With standrd icon
    TGView.appBarBackButton(context: context);

    // With custom icon
    TGView.appBarBackButton(context: context, icon: Icons.arrow_back_ios);

copied to clipboard

Show Snack Bar

    // By default it picks theme's accent color as background color.
    TGView.showSnackBar(context: context, message: "Email has been sent successfully!", backgroundColor: Colors.green, duration: Duration(seconds: 2)); 

copied to clipboard

Show Alert Dialog

    TGView.showAlertDialog(context: context, actions: actions, onDismiss: onDismiss, content: content, titleRowWidgets: titleRowWidgets, barrierColor: barrierColor, 
      backgroundColor: backgroundColor,
      barrierDismissible : barrierDismissible,
      insetPadding: insetPadding,
    );

copied to clipboard

Popup Menu Item

    TGView.popupMenuItem(icon: Icons.expand_more, value: 1, text: "Expand All");

copied to clipboard

Loading Indicator

    TGView.loadingIndicator(Colors.blue);

copied to clipboard

Refresh Indicator

    TGView.refreshIndicator(widgets: widgets, onRefresh: onRefresh);

copied to clipboard

TGText

Text related implementation based on various styles of TextTheme

Render Text

    TGText.bodyMedium("Thanking You!");
    TGText.bodySmall("Thanking You!", color: TGView.colorScheme().primary);
    TGText.bodySmall("Thanking You!", color: TGView.colorScheme().primary, fontWeight: FontWeight.bold, textAlign: TextAlign.center);
    TGText.bodySmall("Thanking You!", color: TGView.colorScheme().primary, textAlign: TextAlign.center);
    TGText.bodySmall("Thanking You!", color: TGView.colorScheme().primary, textAlign: TextAlign.center, maxLine: 2, overflow: TextOverflow.ellipsis);

copied to clipboard