未熟学生エンジニアのブログ

TetsuFeの個人開発ブログ

TetsuFeはテツエフイー と読みます。FlutterやWeb周り全般、チーム開発について語るブログ

Flutter for web プロジェクトを作成し github pages で公開するまで

作成: 2019/8/26

環境

flutter for webとは

https://github.com/flutter/flutter_web

モバイルアプリ向けクロスプラットフォームフレームワーク Flutterを使ってwebページを作れるフレームワーク(?)です。 Hamming birdと言われていたものと同じものです。

詳しくは以下の記事などを参照ください。

rightcode.co.jp

ntaoo.hatenablog.com

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

f:id:swiftfe:20190826115327p:plain

サーバー起動

$ 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です

f:id:swiftfe:20190826115905p:plain

トラブルシューティング

$ 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を使って貼り付けてアクセスします

f:id:swiftfe:20190826124214p:plain

なぜか読み込みが結構遅いです・・

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にチェックをいれる

f:id:swiftfe:20190826123244p:plain

今回は 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/ となります。)