Flutter Interact キーノート 発表内容のまとめ

ntaoo
12 min readDec 11, 2019

--

Flutter Interactのキーノートを視聴したので、そのまとめを共有します。一通りトピックを網羅できているはずです。

Google Fonts for Flutter

Google FontsをFlutterで利用できるパッケージが紹介されました。すでにpub.devで公開されています。

開発時には、このフォントの変更をするとHot Reloadingで瞬時にUIに反映されて確認できます。

多様なスクリーンのデバイスへの対応

FlutterとMaterial Designのデスクトップサイズのスクリーンへの対応が強調されました。

デスクトップ以外にも、車載スクリーン、スマートデバイスなどの、多様なスクリーンのデバイスへの対応をあらためて表明しています。Ambient Computingと表現しています。

実験中の新機能として、UIビジュアルをWYSIWIGで構築してFlutterのソースコードと同期し、Hot Reloadingでデバイスに反映するデモがされました。

まだまだ未成熟としながら、大いなる可能性がある機能です。

A portable UI framework for an ambient computing world.

Flutterは、Mobile SDKからはじまり, Watch, Tablet, TV, Webなど、あらゆる環境に対応するポータブルなマルチプラットフォームUIフレームワークへ進化することをあらためて強調しています。

GitHubのOctoverseでは、Dartがもっとも急速に成長している言語であることが示されました。

モバイル、デスクトップ、そしてWebが、主要な3つのプラットフォームだとしています。

Flutter 1.12の安定版をリリース

iOSのダークモードのサポート、Cupertino Widgetsの追加、AndroidXがデフォルトになったこと、Upgraded add-to-appのサポート、Google Fonts packageが追加され、あたらしいFlutter Galleryが公開されました。

事例紹介

事例紹介に移り、Stadia, ebay motors, spliceの3つのアプリがFlutterで構築されたことが紹介されています。(Stadiaは、Googleのあの話題のクラウドゲーミングプラットフォームですね)

Flutter on desktop と webの進捗状況

FlutterのDesktopとWebへの対応の進捗が発表されました。Flutter on desktopのmacOS版がα版に達したことが発表。一方、Flutter on the webはβ版に達したとのこと。

また、Flutter Webに対応したアプリとして、rive.appが紹介されました。

flareがriveとリブランディングされたそうです。

rive.appは、リアルタイムアニメーションをアプリに追加するツールのようです。

Dart言語の改善

Flutterでのクライアントサイド開発の体験を良くするために、Dart言語にさまざまな改善が加えられつづけています。

Flutter tooling

DartPad

Flutter Webサポートが追加され、ブラウザーでFlutterを試すことができるようになりました。

また、WebページにFlutterを埋め込むことで、ブラウザでCode Labで学習できたり、Galleryを確認することができます。

Hot UI

Android Studioですでに利用可能になっているそうです。UIプレビューがIDEに表示され、そこでGUIで値を更新すると、それがコードに同期され、即座にHot Reloadingで開発機にも反映されます。

Dart DevTool がリニューアル

Dart DevToolがリニューアルされました。とくに、Layout Explorerは、インタラクティブにレイアウティングの問題をデバッグできるので、Flutterの生産性がますます高まります。

今後も、あらたな種類のデバッギングツールを増やしていくそうです。

VSCodeでもAndroidとiOSの同時デバッギングが可能に

VSCodeで7つのデバイスを同期して、ブレークポイントを打つなどして7つ同時にデバッギングするデモがされました。この環境はFlutter Octopusというそうです(笑い)。

Flutterで活動するArtistの紹介

Flutterが環境を吸収してくれ、Hot Reloadingで即時フィードバックをくれるので、インタラクティブにコンテンツを作るのに適しているそうです。

サードパーティツールの紹介

supernova.io

オーサリングツールから瞬時にFlutterのコードを生成するサードパーティツールの宣伝。これでデザインチームからエンジニアリングチームに成果物を渡すときにデザインのニュアンスが失われるフラストレーションが無くなるとのこと。

gskinner X Flutter

2019年にFlutterと出会い、Flutterのその能力と可能性を見せつけるために作ったサイトのようです。

Adobe XD Flutter Plugin

Adobe XDのFlutter Pluginです。作成したアセットがFlutter Widgetのソースコードに自動変換されるデモがされました。

ソースコードとして生成されるので、Dartのコンストラクターを通じて変更可能なパラメーター化がされています。これはすごいですね。

Adobe XD上でアセットの色を変えるなどの編集して、再エクスポートすれば、即時にそれがDartのソースコードに反映され、Hot Reloadingでデバイスに変更が反映されました。

さらに、複雑なレイアウトについても同様に、Adobe XDからエクスポートすれば実際のピクセルパーフェクトなFlutter Widgetになり、Hot ReloadingでLayoutが反映されるそうです。

このレイアウトのソースコードは、デモでは示されませんでした。興味のある方は、以下のリンクからこのプラグインの使用をリクエストできます。

感想

A portable UI framework for an ambient computing world.

上記の標語が示すとおり、あらゆる環境で実行可能なポータブルUIフレームワークとして、Flutterの適用範囲を拡大しようという意思があらためて示されました。

それにともない、UI構築の生産性がますます高まる施策が発表されました。

特に、UIオーサリングツールがFlutterと統合されるならば、デザインとエンジニアリングのプロセスが分断されずに、中間成果物がでることもなく、Flutter単体であらゆる環境を抽象化して開発できる真のIDEと言える存在になるのかもしれません。(誤解を恐れずに言えば、これはひとつのSmalltalk, Dynabook思想の実践に見えます。)これが成功すれば、既存のFigmaやSketchなどのツールの存在価値にますます疑問符がつくかもしれませんね。

FlutterでWebの既存の技術要素であるHTML, CSS, JavaScriptを完全に隠蔽してしまえるのは、Flutter WebはExtensible Webの基盤に乗ったひとつの巨大な成果物である、という視点で見るととても面白いですね。WebAssembly対応もDartで進めるようです。すでに`dart:wasm` URIが生えています。DartとFlutterでWeb開発が完結して、HTML, CSS, JavaScriptはその存在をよく知らないという世代が、もしかしたらこれからでてきそうですね。それはWebにとって良いことだと真剣に思います。

関連リンク

--

--