日本時間2019年12月12日深夜〜早朝にFlutter Interactというイベントが開催されました。

去年は日本時間で12月5日に同様のイベントがFlutter Liveという名前で開催されたので、今後毎年12月に同様のイベントが恒例化する可能性が高いと思います。

ちなみに、Google I/Oが毎年5月のGW明けくらいに開催されるのも恒例ですが、ここでもFlutterの大きめの発表がなされることが恒例化しつつあり、つまり約半年置きにFlutterの大きな発表で盛り上がる、という良い感じのペースが続きそうです👀

どんな発表があったか

次の2分20秒とコンパクトにまとめられた動画をまず観ることをお勧めします。

1. Flutter 1.12リリース (Webがベータ版に)
2. DarPad.dev にてFlutter正式サポート
3. Supernova
4. Rive(旧Flare)
5. Adobe XD to Flutter プラグイン

全体的なまとめ記事としては以下にとてもよくまとまっています。

動画でとりあえず一通り観たい場合はまずこの2本は必見です。

残りは Flutter Inteact ‘19全体のYouTubeプレイリスト から興味に応じてつまみ食い程度でも良いかなと思います(僕は全部目を通す予定ですが)。

ちなみに去年のFlutter Liveは？

去年のFlutter Liveのまとめ動画はこちらで、11分とちょっと長めです。

去年のトピックは以下あたりですね。

1. Flutter 1.0(正式版)リリース
2. Flare(現Rive)
3. Square
4. Codemagic
5. Hummingbird(現Flutter on the web)
6. Flutterデスクトップ対応(発表スライドもFlutter製)

去年〜今年の1年を眺めると、僕はざっくり次の印象を受けています。

• Flutter本体は順調に進化を続けている
• Web/デスクトップ対応も進んでいる
• FlareはRiveと名前を変えながらもFlutterでリッチなアニメーションを組みたいときの定番ツールとなってきた
• Flutterの持つ高いポテンシャルを活かせるデザイン・コードの架け橋となるようなツールの開発が盛り上がってきている

それでは、以下、今年の発表内容をざっくり紹介しながら自分の感想など述べていきます。

Flutter 1.12リリース

以下の公式ブログ記事によくまとまっていて必読です。

ざっくり抜粋すると次のようになります。

• iOS ダークモード対応
• Cupertino Widgetの拡充・改善(CupertinoContextMenu ・CupertinoSlidingSegmentedControlなど)
• Add-to-App(既存ネイティブアプリ上でFlutterを部分導入)の正式サポート
• Dart 2.7へアップデート
• AndroidXがデフォルトに
• Google Fonts パッケージ登場
• Flutter Galleryがリニューアル
• Webサポートがベータ版に
• デスクトップのうちmacOSサポートがアルファ版に
• Hot UI
• Layout Explorer
• 複数デバイス同時デバッグ(VS Codeのみ)
• Flutter Favorite プログラムが開始

より詳細は以下のリリースノートに大量に載っています。うっかり便利Widgetを見逃して意図せず車輪の再発明などしないようにできる限りチェックしておきましょう✅

ボリュームは過去最大です👀

ちなみに、リリースノートは以前はGitHubのwikiで管理していましたが、今回のリリースから公式ドキュメントに移って過去のも引っ越しされています。

Changelogは引き続きwikiで管理されています。

大体次のような線引きで棲み分けされているように感じます。

• 一般向け: 公式サイト
• よりコアな情報・安定版になる前の情報: GitHubのwiki

[コラム] Flutterのバージョン番号について

マイナーバージョンが 12 となっていて、今月の12月と一緒でちょっと覚えやすい気がしますが、これはあまり偶然でもないのです。

Flutterでは次のchannelが用意されていて、開発者がメリット・デメリットを自分なりに判断して好みのchannleを選ぶ方式になっています(僕はdev推しです)。

• master: 最新・不安定
• dev: テスト済みの最新バージョンが出来次第流れてくる
• beta: 毎月devから最良の状態のものへ追従(Bad-Builds が流れてこないようにケアされている)
• stable: 四半期ごと目安くらいに安定版がリリースされる(致命的な不具合についてはhotfixリリースも追加でされます)

セットアップ直後のデフォルトは最も無難な stable で、またこれが正式リリースとしてアナウンスされます。今回1.12としてアナウンスされたのも、すでに開発済みの過去の対応から良さそうなコミットを見つけてさらに必要に応じて重要度の高い問題対応を hotfix として限定的にcherry pickするなどして仕上げられたものです。

beta は上述の通り、毎月リリースで、これに応じてマイナーバージョンが上がっていくため、1年前の1.0から12個の積み重ねがあって1.12となりました(多少のズレはちょくちょくありますが、1.x系はどれも概ねx月にタグ付けされてきました)。

そのため、 stable 以外のchannelで開発していて日々改善・追加機能などを追っている場合、今回のFlutter自体の発表は当然目新しいものはないです。Flutterは完全OSSなので、サプライズなどのためによほど無理して隠されたりしない限りはIssue・プルリク・コミットなど読めば全て把握可能です。

ちなみに、 stable 以外での開発はそこまで危険(高リスク)なことでもないと思っていて、例えばGroupon・Alibaba・EyeEmなどこれまで大手サービスが採用していたAdd-to-Appは、これまではstable では使えない機能で、つまりこれらのサービスはおそらく dev か beta チャンネルを採用していたことになります。

ちなみに、このAdd-to-appに関しては、前述の通り今回のv1.12 にて stable でも使えるようになりました。

Flutterの各種アップデートから個人的に注目したものを取り上げて紹介

TK 以下、記事の初回投稿時点では間に合わず雑なメモ程度ですが、数日以内に追記します。

Google Fontsパッケージ

Hot UI

• https://youtu.be/ukLBCRBlIkk?t=1835 あたりからデモが観られる

Layout Explorer

• https://youtu.be/ukLBCRBlIkk?t=2045 あたりからデモが観られる

リニューアルされたFlutter Gallery 2.0

Flutter開発チーム内部で実験的に開発中のUIツール

Dartの進化

Flutter同梱のDartが2.7になりました。

拡張メソッド対応が書かれていますが、2.6でプレビュー対応されてそれがほとんどそのまま2.7で正式対応扱いに昇格しただけのはずなので、拡張メソッド対応は2.6のイメージを持っている人が多いと思います。待ち望んでいる人が多かったであろう機能なので、このタイミングで改めてアピールしているという側面もあると思います。

以前地味にリリースされているのを見つけて個人的に喜んでた characters パッケージ ですが、それも拡張メソッドの活用事例ということもあり紹介されています。

さらにNull安全がプレビュー版としてリリースされていて、それ用のPlaygroundまであります。ただ、これは2.6でプレビュー対応されてほとんど間を置かずに正式リリースされた拡張メソッドとは違い、正式対応には今後数ヶ月はかかるとのことです。

analysis_options.yaml に以下の指定をすると試せますが、今やってもいろいろ煩わしさが増えるだけで実用は厳しそうな気がします。

analyzer:
  enable-experiment:     
    - non-nullable

また、pub.dev にて、パッケージに「いいね」を付けられるようになったことが紹介されていて、それ以外にもいろいろ表示改善がされて使いやすくなっています。

今年のDartは更新が活発だったので、この機会にそれらもざっとおさらいしましょう

Dart 2.3 (2019年5月)

... (スプレッド演算子)などの追加でUIコードが書きやすくなった(Flutterを意識した対応)。

Dart 2.5 (2019年9月)

• ML Complete プレビュー版
• dart:ffi (当時プレビュー版で2.6ではベータ版)

Dart 2.6 (2019年11月)

Dart 2.6からは今回Flutter stable リリースされたFlutter 1.12とセットのリリースとなります。 stable 版を使っている人がけっこう多いのか、このタイミングで2.6でプレビュー対応(2.7で正式対応)された拡張メソッドが話題になっている様子がちらほら見えました。

また、dart2nativeで単独で高速実行できるバイナリを生成できるようになって、今後のDart普及の後押しになりそうな期待を持てます。

DartPadのFlutterサポート

Flutter Interactの数日前にDartPadのFlutter正式サポートがアナウンスされました。それまでもベータ対応みたいな感じはされてたり各所で有効活用されてましたが、晴れて正式サポートになりました。

基本的なキーボードショートカットも対応していて、ちょっと遅いですが補完入力にも対応しているので、いざとなったら簡単なアプリならChromeブラウザ上で書けちゃいそうですね。

Webページのiframe埋め込みも可能で、詳しいやり方はEmbedding Guide · dart-lang/dart-pad Wikiに載ってます。

Dartは https://medium.com/dartlang/latest に過不足なくまとまっているので、リリース済みの新機能について知りたい場合はとりあえずこれをしっかり読めば抜け漏れないという安心感があります。もう少し詳しく網羅したい場合は CHANGELOG を読みましょう。

FlutterのWeb・デスクトップサポート

Flutter on the web ベータ版

Flutterのweb対応は以下のように進められてきました。

• ちょうど1年前(2018年12月)のFlutter Liveにてテクニカルプレビュー(本体からのforkリポジトリで開発): Hummingbird時代
• 5月のGoogle I/O 2019にて順調に開発が進んでいる状況が報告された: Flutter for web時代
• その後本体リポジトリへの統合(unfork)が進められ、9月のstableリリース(v1.9.1)あたりで完了

そして、今回晴れてベータ扱いに昇格しました🎉 「Webはもうけっこう使えるよ(意訳)」とのことです🐶

元々のコードネームっぽいHummingbirdからFlutter for webとなって、その後統合されたので”for web”はおかしいけどなんと呼ぶのが正しいのかもやもやしていましたが、セッションでは”Flutter on the web”と呼んでたのでそれが正解な気がしてします🤔

デスクトップ対応

デスクトップ対応としては、イベントの前日にこんな呟きをしていたmacOS版のみが一足先にアルファ版扱いになりました。

実際どんなもんなのかは実際にビルドしてみるのが良いですが、Flutter Gallery 2.0 からダウンロードして試すこともできます。Windows/Linux版のビルド済みアプリも配布されています。

Desktop shells に書いてますが、flutter config --enable-macos-desktop などするとmacOS向けにFlutterプロジェクトをビルド・実行できるようになります。ネイティブ周りが絡まないプロジェクトならわりとすんなり実行できて問題なく動くことが多いはずです。またネイティブが絡む部分についても、プラグイン対応が進行中なのでどんどん解決されていくことでしょう。

様々なデザインツールの登場

Flutterの開発状況を追うだけではなかなか掴みきれず、今回のイベントでなんとなく空気感が掴めた気がするのが、Flutterのデザインツール競争が盛り上がっていて公式もそれを後押ししている様子です。

まず、リッチなアニメーションツールとしてはもう2年連続で紹介されたRive(旧Flare)一強となった認識です。

Supernova

一方、「デザインツールでFlutterアプリを組む」というアプローチのアプリが以前からありましたが、今回公式イベントでSupernovaが大きく取り上げられたことによって今後注目かなと思いました。

https://youtu.be/ukLBCRBlIkk?t=2675 あたりからデモがあるので、それを見たりアプリを試用してみるとどんなツールかイメージつくと思います。

以前から聞いたことはあるもののスルーしていて、今回初めて触ってみた第一印象としてはツールとしてはかなりがんばっている感じはするものの、エンジニアとしてこれを使って嬉しくなる感じは今のところ期待できない気がしました🤔デザイナーとの協業観点では、例えばこれで組んだ画面コードを渡されてもあまり嬉しくない気がしますが、例えばややこしい一部コンポーネントをこういうので作ってもらってそれを渡されたら嬉しい場面もあるかも？と思いました。ただ、FlutterでコードでUI組むのがサクサクできて特に足を引っ張っている部分でもないのでこういうツール補助の恩恵はかなり限定的な気がしてしまいます🤔(特に非エンジニア)がプロトタイピングで雑に組むのに割り切って使う、とかならありかもしれません🤔

もちろん開発が効率化されるに越したことないので、今の僕の期待を良い意味で裏切った素晴らしいツールに育ってくれると良いなとは思っています。

Adobe XD to Flutter Plugin

Adobe XDもFlutterプラグインをリリースしさらにOSSであることをアナウンスしていました。これはアーリーアクセスの申し込みフォームがあるだけで現時点では試すことができません。

https://youtu.be/ukLBCRBlIkk?t=3743 あたりからデモが観られます。デザインツールでは現状、Sketch・Adobe XD・Figmaが三強として凌ぎを削っていますが、そういう普段デザイナーが慣れているツールで組んだものがそのままFlutterコード化できる点は良いと思いましたが、全体的にはSupernovaと同じような印象を抱いています。

とりあえず来年このあたりが盛り上がりそうなので、注目していきたいです👀

以上、Flutter/Dartの最新動向をざっとなぞれた気がします。総括するとこんな感じかなと思います。

• モバイルアプリ対応の完成度は元々高かったがさらに日々進化中
• Dartの言語機能が手厚くなってきてNNBD(Null安全)の正式対応が楽しみ
• ツールのサポートも進化中で、元々良かった開発体験がさらに向上中
• Web・デスクトップ(特にmacOS)対応も順調で来年Webから順次正式版に昇格しそうな勢いで、Flutterだけでまともなあらゆるクロスプラットフォームをカバーできてしまう世界が現実的に見えてきた
• デザインツール界隈がホット

昨日のAdvent Calendarだったのに1日遅れかつ、まだ書き切れてない部分があってすみません🙇‍♂️ TKのマークが付いた箇所中心に随時加筆していきます。