Flutter for web プロジェクトを作成し github pages で公開するまで
作成: 2019/8/26
環境
- macOS Mojave 10.14.6
flutter for webとは
https://github.com/flutter/flutter_web
モバイルアプリ向けクロスプラットフォームフレームワーク Flutterを使ってwebページを作れるフレームワーク(?)です。 Hamming birdと言われていたものと同じものです。
詳しくは以下の記事などを参照ください。
flutter for web のプロジェクト作成
事前準備
>=2.3.0-dev.0.1 <3.0.0
が必要なので、Dart 2.4.1をインストールしましょう。
$ brew install dart # brew upgrade dart
プロジェクト作成には今回は WebStorm を使いました。
WebStormに Dart pluginを入れてください。
プロジェクト作成
Create a new project > Dart > Flutter web App
サーバー起動
$ flutter pub global activate webdev
ホットリロードを有効にしてサーバーを起動します
$ webdev serve --hot-reload Creating build script, took 7010ms [INFO] Setting up file watchers completed, took 10ms [INFO] Waiting for all file watchers to be ready completed, took 201ms [INFO] Building new asset graph completed, took 1.0s [INFO] Checking for unexpected pre-existing outputs. completed, took 1ms [INFO] Running build completed, took 25.8s [INFO] Caching finalized dependency graph completed, took 184ms [INFO] Succeeded after 26.0s with 571 outputs (3248 actions) Serving `web` on http://localhost:8080
localhost:8080 でサーバーがたちあがります。ここにブラウザからアクセスすればOKです
トラブルシューティング
$ webdev serve --hot-reload webdev could not run for this project. The `build_web_compilers` version – 2.2.3 – is not within the allowed constraint – >=0.3.6 <2.0.0.
エラーに記載のバージョンが同じものを探そうとすると、以下のようなサイト(何語?)を参考にしないといけないあたり、Flutter for webの未熟さ具合が感じられます。
https://www.petanikode.com/flutter-web/
pubspec.yaml を編集します
dev_dependencies: build_web_compilers: ^1.0.0
Downloading build_web_compilers 1.2.2. がはいります
iOS simulatorでアクセス
Safariを起動し、普通に検索バーでpasteを使って貼り付けてアクセスします
なぜか読み込みが結構遅いです・・
githubpagesで公開
$ webdev build
.gitignoreを修正し、buildをコメントアウトして、buildをコミットします。
そのままコミットしてgithubにpushしましょう
$ git init $ git add -A $ git commit -m "init" $ git remote add origin <githubのリポジトリ> $ git push -u origin master
githubリポジトリのsettings > github pages で 「Source」のmasterにチェックをいれる
今回は flutter_hokuma_novel というリポジトリ名にしたので、
https://tetsufe.github.io/flutter_hokuma_novel/build/ にアクセスすれば、flutter for webで作ったページが表示されます!(webdev build によって build/ 以下にindex.htmlがあるので、/build/ をURLに含めるのを忘れないようにしましょう。)
(例えば、あなたのユーザ名が xxx で、リポジトリ名が yyy なら、https://xxx.github.io/yyyl/build/ となります。)