用 Flutter 幾行程式搞定一個 app

如果熟悉 Javascript 與 HTML 語法, 透過 Flutter 平台, 用內建的 flutter_webview_plugin 幾行程式就能完成一個 android app, 甚至 iOS app 也應該很容易, Flutter 是用 dart 語言所開發的跨平台程式架構, 而 dart 語法跟 Javascript 長的很像, 輕鬆就能上手:
1. 使用 vscode 開啟 Flutter 新專案取名為 webview
2. 在目錄結構新增一個新目錄(document root)例如 www, 把 *.html, *.js, *.css ...等等所要用到的檔案複製到該目錄, 假設 html 主檔案是 index.html
3. 修改 pubspec.yaml 檔案, 加入 flutter_webview_plugin 並啟用 flutter_assets, 把它取名為 www/
4. 修改主程式 main.dart, 不到 10 行程式碼, 讓 WebviewScaffold 去載入 html 主檔案 index.html, 一個 app 就啟動了.
5. 就這樣, 連線到手機開啟開發者模式, 允許 debug 上傳 app, 把 app 上載到手機上執行.
p.s.
1. 修改的 pubspec.yaml 內容:
   name: webview
   description: A new Flutter project.
   version: 1.0.0+1
   environment:
        sdk: "> =2.1.0 <3.0.0"

   dependencies:
        flutter:
            sdk: flutter
        cupertino_icons: ^0.1.2
        flutter_webview_plugin: ^0.3.0+2

   dev_dependencies:
        flutter_test:
             sdk: flutter

   flutter:
       uses-material-design: true
       assets:
             -  www/

2. 修改 main.dart 的內容, 開啟 lib/main.dart 主程式, 以下內容全數複製貼過去:
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
void main() {  runApp(MyApp()); }
class MyApp  extends StatelessWidget {
  static String assets = "file:///android_asset/flutter_assets/www";
  @override build(BuildContext context) => MaterialApp( theme:ThemeData.dark(),
    routes: {
       '/': (_) => WebviewScaffold(url:"$assets/index.html", withZoom: true, withLocalStorage: true, withJavascript: true, allowFileURLs: true)
    }
  );
}

3. 修改 launch.json 內容, 在 vscode 拉下 Debug-> Start Debugging 或是用快速鍵 Ctrl-F5 上傳到手機上, 如果想將 app 改成 release 版, 順便減肥, 要拉下 Debug-> Open Configurations 修改 launch.json 檔案, 添加 flutterMode:
{
    "configurations": [
        {
            "name": "Flutter",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release"
        }
    ]
}
4. 如果發生 WeView 找不到檔案 index.html, 可能是 Fullter 將 assets 包成 app 後所在目錄位置出錯, 可以用解壓縮程式 zip, 打開 webview/build/app/outputs/apk/release/app-release.apk, 看看到底是把 assets 目錄放在那個目錄底下, 藉此去修正程式類型 MyApp 中所定義的靜態字串 static String assets = "pathTo/www" 就能解決.