１人 Flutter Advent Calendar 2019：#4 Flutter for Web

現状はまだ正式サポートじゃないです。
ただ、動かすことは可能なので、試してみます。

dev channelに変更してWebアプリを作成します。
作成の仕方はhttps://flutter.dev/docs/get-started/web とか見るのが早いのでやってみてください。コマンド何個か打つだけですし。
簡単に作成出来ます。

https://github.com/matsuhiro/flutter_for_web_test
サンプルおいておきます。

これを実行すると画面幅が十分ならば以下のようになります。

ただ、ブラウザってすごく小さくすることもできます。そうすると

こんなかんじになって、上の段は横幅が小さくなると右端の四角が隠れていると思います。

別にWebに限ったことではないですが、こういうことが起こるのでPositionedDirectionalとかは基本的に使わないほうが良いかなと思います。
Webの場合はユーザーが画面幅を自由に変えられるので、こういった問題が起こりやすいかなと思います。
Flutterのコードで横幅がXXXpx以下だったらこのレイアウト。とか、画面幅ごとにレイアウトの場所の定義テーブルみたいなのを持つのはあまりやりたくは無いですからね。。。

SnackBarもちゃんとブラウザで表示されて、UIに関して言えば、それなりに動くなーという印象です。

しかし、公式にもありますが、
https://flutter.dev/docs/development/platform-integration/web
dart:ioがつかえなかったりとまだまだな感じです。

なんとなくですけど、１年位で商用で利用できるようになることはないかなーという印象です。


Webとは直接関係ないですが、dev channelでは、以下のことがあったのでついでに記載しておきます。

stable channelはAndroid support libraryを利用していますが、dev channelはAndroidXです。
そのため、既存のProjectでflutter create .とか実行するとAndroidXに対応していないとかでメッセージが出ると思います。

他にはPluginの呼び出しをrunAppの前に行うと

https://gist.github.com/matsuhiro/1ccbc9a6a5527b2c490ed31b79ffd1eb

このようなエラーが表示されます。
dev channelだけです。

Pluginの機能を呼び出す前にWidgetsFlutterBinding.ensureInitialized()を実行せよと言っているわけです。
呼び出せばいいだけといえばいいだけですが、onRunApp的なinterfaceがFlutter側にあっても良いのかなとかは思いました。
アプリの起動シーケンスの中で、Native側の初期化をしたいとはあると思うので。

サンプルを試すときは
https://github.com/matsuhiro/flutter_for_web_test/blob/master/lib/main.dart#L6
コメントアウト消してください。