How to test Flutter web code using FWR on Google Cloud IDE

How to test Flutter web code using FWR on Google Cloud IDE

Below is the step to test Flutter web code using Flutter web rebuilder (FWR) on Google Cloud editor. Google Cloud editor has multiple alias names. Some of the names are Google Cloud Shell or IDE.

Step

  • Sign in to Google Cloud Account.

  • Open Google Cloud IDE using the link below.

Link: https://ide.cloud.google.com/
  • Click File > Open menu to open directory / folder.

  • Click Terminal > “New Terminal” menu to open terminal if not opened.

  • Run the below command to configure Google Cloud project using below command.

Command: gcloud config set project <google_cloud_project_id>
  • Click on the “AUTHORIZE” button in the “Authorize Cloud Shell” screen.

  • Validate flutter version.

Command: flutter --version
  • Dart and Flutter SDK downloads and installs if flutter is not found.
Sample output:

Downloading Dart SDK from Flutter engine 
Building flutter tool ...
Flutter 2.10.5  channel stable  https://github.com/flutter/flutter.git
Framework  revision 
Engine  revision 
Tools  Dart 2.16.2  DevTools 2.9.2

  • Create flutter applications.
Command: flutter create <app_name>
  • New directory creates with app_name name and require files.
Sample output:

Downloading Material fonts...
Downloading Gradle Wrapper...
Downloading package sky_engine...
Downloading flutter_patched_sdk tools...
Downloading flutter_patched_sdk_product tools...
Downloading linux-x64 tools...
Downloading linux-x64/font-subset tools...
Creating project demo_app_01...
Running "flutter pub get" in demo_app_01...


All done!
In order to run your application, type:


  $ cd demo_app_01
  $ flutter run


Your application code is in demo_app_01/lib/main.dart.

  • Go into directory
Command: cd <directory_name>
  • Review files in directory and main file content.
Command: edit lib/main.dart
  • File opens in the editor window.

  • Build flutter web application

Command: flutter build web
  • Download FWR (Flutter web rebuilder)
Command: wget https://github.com/synw/fwr/releases/download/0.2.0/fwr
  • FWR file downloads.
Sample output:

Resolving github.com (github.com)... 
Connecting to github.com (github.com)... connected.
HTTP request sent, awaiting response... 302 Found


- 'fwr' saved 

  • Give execute permission to the FWR file.
Command: chmod u+x fwr
  • Run FWR file.
Command: ./fwr
  • Server starts.
Sample output:
 
Running websockets server
Running changes watcher
Running http server


   ____    __
  / __/___/ /  ___
 / _// __/ _ \/ _ \
/___/\__/_//_/\___/ v3.3.10-dev
High performance, minimalist Go web framework
https://echo.labstack.com
____________________________________O/_______
                                    O\
 http server started on [::]:8085
👀 Watching for changes in lib/ and web/

  • Click on the “Web Preview” button (like eye icon) can be found on the top right.

  • Click on the “Change port” menu.

  • “Change Preview Port” windows opens.

  • Give the FWR server port number (like 8085) in the “Port number” text box.

  • Click on the “CHANGE and PREVIEW ” button.

  • New windows open with flutter web applications test link.

Sample test link: https://8085-cs-xyz.cloudshell.dev/#/