# Flutter Web Instructions

### Server Setting
Internet Information Services Setup(IIS)

Flutter web

Purpose 2
Connection Configuration 3
Query parameters from APP to WEB 4
Create page 7
API 8
Switch User 9
Pass selected user to APP 11
Navigation Handling 12
Deployment 13

Purpose

Flutter web is a mini-program that works within the old and new platforms. We have implemented EDDA and corporate action.

With Flutter web, we can deploy the mini-program to the client without running the build command every time, simply copy the folder and change the domain inside the configuration file.

Connection Configuration

For local testing, update the connection in lib/config/siteConfig.json

For server-side, update the connection in assets/lib/config/siteConfig.json

Query parameters from APP to WEB

The url should be like this:

https://mobile.ayers.com.hk:8443/miniProgram/#/edda?paraMap={"a_language":"gb","model_swtoken":"x86_64","device_id":"0f5fbc0-0854-48be-acdf-fce14fdf3b32_146607695776","platform":"iOS_14.5","model":"iPhone","user_code":"MOBILEA","version":"1.0.0.4979","client_session_id":"b46fe103-6e82-459a-a481-33ad8f7f105d_1647574562911","is_user_auth":"Y"}&clientList=[{"code":"corp1","isSelected":"N","name":"corp1","type":"C"},{"code":"corp2","isSelected":"Y","name":"corp2","type":"C"}]

paraMap
Used to combine with required parameters
** “is_user_auth” & “user_code” for user_auth only

clientList
Useful information in client_auth
code: client account code
name: client account name
type: client account type
isSelected: indicate the client account is selected or not
Y: selected
N: unselected

Flutter APP

Convert map to string in UserModel.dart and Repository.dart

UserModel.dart

Repository.dart

Add the string to the URL and use it as the initial URL request

EddaWebPage.dart

B. iOS

Add required parameters to the dictionary and convert it to the string in Flutter_webController.m

** Remember to encode the string !!!

Add the string to the URL

C. Flutter Web

Parse query string to map

UserModel.dart

Repository.dart

Create page
Add a route name

Route.dart

API

Call API in initState instead of using Cubit

Update the boolean to change the loading state
Request and response handling are the same as Flutter app

Switch User
Add “refreshCallback” function in createAccountButton

Use “lastAccountChangedTime” to rebuild the web. If the time is changed, it will trigger the tab bar rebuild

UserModel.dart

** Remember to update the time when changing user

Pass selected user to APP

Flutter web

When clicking the back button, it jumps to the exit page (route name: exit). Then, the web passes /exit?selectedClientAcc=MOBILEA to app.

Flutter app

If the app receives the “exit” route, it will compare the selectedClientAcc to client code in the client account list. If the client code exists, it will trigger updateUser.

EddaWebPage.dart

Navigation Handling
Since the route name in the navigator contains query parameters, it does not match with the name we pass into the popUntil function, so the function always returns false. Therefore, we need to split the route to get the name without the query parameter and use this name for comparison.

You can use a wrapper function in Nav.dart to handle this case.

Deployment
Run command:
flutter build web --release --web-renderer=html --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

Copy the files inside build/web to the server

Here is the sample in the testing server (Mobile App Upload server)

Remark1:
(25 Mar 2022) updated the miniProgram file name to:
C:\AyersGTSv2_Mobile_MINI_PARA\miniProgram_MOB
url:
https://uat-para.ayers.com.hk/miniProgram_MOB/#/edda/home

and also renamed in upload server:
https://mobile.ayers.com.hk:8443/AyersGTSv2_Mobile_MINI/miniProgram_MOB/#/edda/home