Flutter for Web で実際にサンプルプログラムを動かしてみる！

2020.08.13

Flutter とは？

Flutter とは、Dart という Google が開発している言語でアプリを開発し、1つのコードで、Android と iOS の両方で動作するネイティブアプリが作成できるという特徴を持っていました。

モバイル向けのクロスプラットフォーム開発ツールとして、「Xamarin」「Cordova」「React Native」 などと比較されることが多いです。

また、2019/5/7「Google I/O 2019」にて Flutter Web が発表されました！

Flutter はさらに野心的に、 Windows、Mac、Fuchsia ( Google が開発中の OS )、Raspberry Pi でも動作するように開発が進められ、さらに今回の発表で Web のサポートも加わりました。

つまり、Flutter はモバイル、Web、組み込み、そしてデスクトップとマルチプラットフォーム対応のUIフレームワークになりつつあります。

ミツオカ

Flutterについてもっと詳しく知りたい方は下の記事をお読みください！

にゃんこ師匠

Flutter for Web は、 HTML、CSS、JavaScript といった標準的なWeb技術を利用して、Flutter をレンダリングする実装です。

Flutter for Web を利用することで、Dart で書かれた既存の Flutter コードを、任意のWebサーバーで配信して、クライアントで実行できます。

Flutter は、現在テクニカルプレビューとして、GitHub リポジトリ (flutter/flutter_web)が提供されています。

Flutter Web のアーキテクチャは、上の図のようになっています。

緑のエリアが Flutter 、黄色が Web 技術です。

緑の領域は Flutter が受け持っているためモバイルとWebで共有可能となります。

DOM、Canvas、CSS を組み合わせることで Flutter を描画し、高品質・高機能なユーザーエクスペリエンスを実現します。

Flutter for Web を実現するために、コア描画レイヤを Dart で実装されました。

そして、Flutter コアと Flutter のアプリケーションコードが Dart の JavaScript コンパイラによって、JavaScript にコンパイルされます。

生成したJavaScript は minifiled された1つのコードとして提供されます。

Flutter for Web が発表されたとはいえ、あくまでテクニカルプレビューです。

性能評価としては利用可能かもしれませんが、今後も大幅に変更が予想され、本番環境に導入するのは危険が伴うでしょう。

Flutter for Web は Flutter リポジトリからフォークした状態で開発されています。
順次、web code は Flutter のコアリポジトリに取り込まれつつあります。
Flutter widget API はモバイル版と同じですが、パッケージは一時的に分割して提供されます
既存の Flutter アプリケーションを Web プレビュー向けに再パッケージは可能ですが、いくつか注意点があり、GitHub リポジトリで詳細を確認できます。