flutter_web packageで動かしていたプロジェクトをflutterに移行する

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のバージョンアップはスムーズです。