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

September 14, 2019

Web対応がFlutter本体にマージされたということで移行してみます。
公式の情報は以下のようなものがあります。

FAQ

https://flutter.dev/docs/development/platform-integration/web

マイグレーションガイド

https://github.com/flutter/flutter/wiki/Upgrading-from-package

環境

upgradeで最新化。

1
2
3
4
5
6

$ 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チャンネルを使いました。

1
2
3
4

$ flutter channel master
$ flutter upgrade
$ flutter --version
Flutter 1.10.2-pre.73 • channel master • https://github.com/flutter/flutter.git

これまでの運用

以下の秘伝のタレのようなシェル（build.sh）で import 文を書き換えるなどの対応をしていました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#!/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 で作り直します。

1
2
3

$ rm -rf web/
$ rm build.sh
$ flutter create .

これだけでOK。

Chromeで動かす

1

$ flutter run -d chrome

めっちゃおばけが出てきますが、これだけで動きます。お手軽。

1
2
3
4

👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 👻 
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に起きます。

1
2
3

$ flutter build web
$ rm -rf docs
$ mv build/web docs

この手順で移行したものが以下のページです。

https://tnantoka.github.io/moyo/

repoはこちら。

https://github.com/tnantoka/moyo

何事もなく移行できました。相変わらずFlutterのバージョンアップはスムーズです。

CATALOG
    LINKS