---
title: 'Burgan Kuwait'
disqus: hackmd
---

Flutter Project Documentation
===
Burgan Kuwait is a modern banking project. The project will transform banking experience of the customers by offering digital solutions. From the technical perspective, Flutter is the SDK for the development of the project which targets android, iOS and web platorms. Dart is the development language of it.

There are many systems in the project to develop highly scalable and maintainable software product.

## Table of Contents

[TOC]

Navigation System
---
Navigation is one of the core functionalities of the project. In this project, we need flexible navigation system that can be controlled remotely(by a SignalR event) when needed.

* Functionalities / Capabilities
* Dynamic routing by using query parameters and path parameters in page transactions
* Navigation tree can be controlled at runtime by [navigation type](https://hackmd.io/l4L9re6GQHKBXKKspMnKqA) parameters in navigation events (coming from SignalR)
* Redirection for unauthorized access

* NeoNavigationHelper class implementation:

@singleton
class NeoNavigationHelper extends INeoNavigationHelper {
  @override
  Future<void> navigate({
    required BuildContext context,
    required NeoNavigationType navigationType,
    required String navigationPath,
  }) async {
    final splitResultList = navigationPath.split(_Constants.queryParameterDeliminator);
    final path = splitResultList.firstOrNull ?? _Constants.defaultPath;
    final queryParameters = Uri.tryParse(navigationPath)?.queryParameters ?? {};
    switch (navigationType) {
      case NeoNavigationType.popUntil:
        Navigator.popUntil(context, (route) => route.settings.name == path);
        break;

      case NeoNavigationType.push:
        unawaited(Navigator.pushNamed(context, path, arguments: queryParameters));
        break;

      case NeoNavigationType.pushReplacement:
        unawaited(Navigator.pushReplacementNamed(context, path, arguments: queryParameters));
        break;

      case NeoNavigationType.pushAsRoot:
        Navigator.popUntil(context, (route) => route.isFirst);
        unawaited(Navigator.pushReplacementNamed(context, path, arguments: queryParameters));
        break;

      case NeoNavigationType.popup:
        // TODO: Display page as popup
        break;

      case NeoNavigationType.bottomSheet:
        // TODO: Display bottomSheet
        break;
    }
  }
}

> Read more about GoRoute's type-safe routing system here: https://pub.dev/documentation/go_router/latest/topics/Type-safe%20routes-topic.html

Dynamic Component Rendering System
---
In this project, components of the screens should be dynamic and configurable by services. That is why we need to apply [Micro-Frontend Architecture](https://hackmd.io/ljPC5SHEQ7SUYix58txL0A) to manage this kind of complexity easier.

:::info
*Micro Frontends term is came up in ThoughtWorks Technology Radar at the end of 2016 for the first time* ([Reference](https://micro-frontends.org/))
:::

Event Handling System
---
There are two type of events in the project:
1. User Interaction Based Events:
In the project, we use BLoC pattern to handle state managements and user interaction events. For example; when user has entered their login credentials and pressed the login button, we have triggered LoginEvent and updated the UI with state flows(loading, success/error etc.). These type of events are user interaction based events.

2. Network Based Events (SignalR):
There is another type of event which is coming from the network layer. For example, when user has filled registeration form and pressed the continue button for the next step, we called an API and API opened a websocket channel which fires events to decide what should be the next state at this point. So that, we may have navigation events coming from the websocket and we need to listen to these events in our components. What is why we created a [WidgetEventBus](https://hackmd.io/OIAfESf2Tymaj6qPTppzrw).

:::info
*Note that network based events can be mapped to user interaction based events at the BLoC layer*
:::