Web対応がFlutter本体にマージされたということで移行してみます。
公式の情報は以下のようなものがあります。
FAQ
マイグレーションガイド
環境
upgradeで最新化。
$ flutter upgrade $ flutter --version Flutter 1.9.1+hotfix.2 • channel stable • https://github.com/flutter/flutter.git $ flutter config --enable-web Setting "enable-web" value to "true".
このstableチャンネルだとchromeが認識されなかったので、結局以下のmasterチャンネルを使いました。
$ flutter channel master $ flutter upgrade $ flutter --version Flutter 1.10.2-pre.73 • channel master • https://github.com/flutter/flutter.git
これまでの運用
以下の秘伝のタレのようなシェル(build.sh
)で import
文を書き換えるなどの対応をしていました。
#!/bin/sh echo "prepare" && \ rm -rf web/lib/app && \ cp -r ./lib web/lib/app && \ echo "replace" && \ find web/lib/app/*.dart | xargs sed -i "" -e "s/dart:ui/package:flutter_web_ui\/ui.dart/g" && \ find web/lib/app/*.dart | xargs sed -i "" -e "s/package:flutter\//package:flutter_web\//g" && \ echo "build" && \ cd web && \ webdev build && \ echo "docs" && \ cd .. && \ rm -rf docs cp -r web/build docs
webディレクトリの作り直し
今までのものは消して、create
で作り直します。
$ rm -rf web/ $ rm build.sh $ flutter create .
これだけでOK。
Chromeで動かす
$ flutter run -d chrome
めっちゃおばけが出てきますが、これだけで動きます。お手軽。
👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 Warning: Flutter's support for building web applications is highly experimental. For more information see https://github.com/flutter/flutter/issues/34082. 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻
Build
GitHub Pagesで公開したいのでbuildしてdocsに起きます。
$ flutter build web $ rm -rf docs $ mv build/web docs
この手順で移行したものが以下のページです。
repoはこちら。
何事もなく移行できました。相変わらずFlutterのバージョンアップはスムーズです。