Flutter Interact  2019のまとめ

# はじめに
この記事は[Flutter #2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/flutter-2)の11日目分です。

今年もすぐに枠が埋まってしまっていたのでFlutter Advent Calendarに参加する予定はなかったのですが、ふとカレンダーを覗いていみると11日枠が投稿されずに空いていたのでちょうどFlutter Interactが開催されたので急遽この記事を書くことにしました。

Flutterの最新情報に興味がある方はFlutterウィークリーもよかったらご覧ください
https://qiita.com/tags/flutterweekly

# Flutter Interact 2019とは
https://developers.google.com/events/flutter-interact

> Flutter Interact is a day dedicated to creation and collaboration with the world, inspired by the makers of brilliant experiences.

一言でいうとGoogle公式のFlutter年次イベントです。12月11日にニューヨークのブルックリンで開催されました。昨年は[Flutter Live 2018](https://developers.google.com/events/flutter-live)が同じ時期に開催されました。来年はまた名称が変わっているかもしれませんね。

# セッション一覧

## Vision Keynote (Flutter Interact '19)
https://youtu.be/NfNdXgJZfFo
ビジョンキーノートを努めたのは[Matias Duarte](https://en.wikipedia.org/wiki/Mat%C3%ADas_Duarte)、以前はPalmのVPで、2010にGoogleに入社しAndroid User Experienceのディレクターをやっていて最初にリリースしたのはHoneycombと呼ばれるAndroid 3.0のデザインになります。次に[Material Design](https://material.io/design/)を手掛けたという輝かしい経歴の彼が、現在はFlutterに取り組んでいます。GoogleがFlutterにかける意気込みもこの辺りから伝わってきますね。マテリアルデザインを世界中のスクリーンに広めるためにFlutterに取り組んでいると言っても良さそうです。キーノートでも言及されていますが、マテリアルデザインコンポーネントは専門のエンジニアがFlutterチームにいて新しいコンポーネントのドキュメントが出来るよりも先にFlutterで実装されていることも多いそうです。

Google FontsもFlutterから簡単に使えるようになりました。
https://pub.dev/packages/google_fonts
Gogole Fontsを使えば`.ttf`ファイルをアセットに組み込むことなく自由に1000ものフォントを利用することが出来ます。

使い方は

```
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(),
),
```
や

```
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
  ),
),
```
のように指定するだけでGoogle Fontsを利用可能です。まだバージョン0.2.0のベータ版ですが利用することが出来ます。

### Very Early Experimental
アダプティブUIもシングルコードベースで実現できるようになりました。Flutter Webやマルチサイズのスクリーンに簡単に対応できるようにするには必要な機能ですね
<img width="1285" alt="Adaptive UI" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/c7e587a8-04d6-7ebc-715e-ac0e90d4dbbc.png">


開発中のレイアウトコードエディタ。レイアウトの細かな調整もプレビューで確認しながらデザイナーが調整しそのままコードを出力できるようになります。
<img width="957" alt="Layout Editor" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/c0e08a8a-aa3a-e263-bc0b-a1cf662a4c39.png">


## Product Keynote (Flutter Interact '19)
https://youtu.be/ukLBCRBlIkk

```
a portable UI framework for an ambient computing world
```

Flutterはモバイルアプリのクロスプラットフォームとして知られていますが、様々なスクリーンが増え続ける中すべてのスクリーン向けのアプリを開発できるようにすることを目指してFlutterの開発が続いています。

### Flutter 1.12リリース
<img width="816" alt="Flutter 1.12" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/e2496447-df9c-ed31-95c2-30b15fe8b1c9.png">

#### ダークモードのiOS対応
<img width="942" alt="Dark mode support for iOS" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/c24616fa-8092-5eff-9a09-b0b5e19f8809.png">

#### 新しいCupertinoウィジェット
<img width="948" alt="Cupertino widgets" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/3f208814-697b-0187-5b3f-5c194dcbe3ed.png">

#### Android Xがデフォルト
<img width="943" alt="Android X" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/2f1faf64-8ab9-aab2-cceb-60b3455380f0.png">

#### 既存アプリへの追加
<img width="946" alt="add-to-app support" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/5d0c74a5-e1b6-5474-5975-5c31a28381f4.png">

#### Googleフォント
<img width="945" alt="Google Fonts" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/67df6407-5386-e042-1ebe-4e8503e00fbe.png">

#### Flutterギャラリー
<img width="945" alt="Flutter Gallery" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/2f037002-aa85-6a90-bdc0-4e2868736a19.png">

#### StadiaをFlutterで開発
<img width="1284" alt="Stadia" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/d6c67c3f-c041-a24a-89e0-bdceb9712f7c.png">

#### eBayがFlutterでアプリを作り直した
https://play.google.com/store/apps/details?id=com.ebay.mobile
<img width="813" alt="ebay" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/62f3da36-3ad2-a7aa-89e9-11f4651eadc4.png">

#### Flutter on Desktop
<img width="1272" alt="Flutter On Desktop" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/bd81961f-91fa-99b0-50f4-bf18d943b8ee.png">

#### Flutter on the Web
<img width="1278" alt="Flutter on the Web" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/2335b8c7-1401-b789-3f4b-d9286890faf0.png">

#### Dart
<img width="1277" alt="Screen Shot 2019-12-14 at 00.00.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/9637701a-7b94-5176-af20-f772d3bf3536.png">

#### Dartpad
https://dartpad.dev/
<img width="1281" alt="Dartpad" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/2bd35e19-7893-4a41-aed3-e0dcac3f160a.png">
Web上のPlaygroundでFlutterも動くようになりました

#### Codelabs
https://flutter.dev/docs/codelabs
<img width="1276" alt="Codelabo" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/63291530-6150-253e-b394-206a343ebfeb.png">
コードラボもそのままFlutterの動作を確認できるようになりました

#### Flutter outline Editor
<img width="1281" alt="Flutter outline Editor" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/0bc858d1-892d-2abd-910f-e3d202c19809.png">

#### レイアウトエクスプローラー
<img width="1278" alt="Layout Explorer" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/009eefc2-f741-4410-4035-a14667ae71b7.png">

#### Adobe XD
<img width="1279" alt="Screen Shot 2019-12-14 at 00.09.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/42f84ac1-6579-c87c-ba5a-c802ce406d8b.png">


# キーノート以外のセッション
Welcome to the Sparkle Party (Flutter Interact '19)
https://youtu.be/1AxXF038-lY

Material Theming with Flutter (Flutter Interact '19)
https://youtu.be/stoJpMeS5aY

Designing for the Web with Flutter (Flutter Interact '19)
https://youtu.be/tot-R_q5-0o

Building in Accessibility with Flutter (Flutter Interact '19)
https://youtu.be/bWbBgbmAdQs

Design and Build Clock Displays with Flutter (Flutter Interact '19)
https://youtu.be/i60HG1TtKJo

Use Rive and Flutter for dynamic, interactive, & animated experiences (Flutter Interact '19)
https://youtu.be/6QZy5sYozVI