Slide 1
Slide 1 text
Flutterお助けTool検証シリーズ
IntelliJ IDEAの
Flutter Live Previewおためし会
2018.12.06 Flutter Meetup Tokyo #6
@nano2_aloerina
Slide 2
Slide 2 text
● 坂野 匠弥 / なのなの
● 株式会社アスネット 技術部 開発グループ所属
● 業務は主にAndroid（フロントエンド）
● Flutterレベル: とりあえず何か作ろうと奮闘中
● Twitter: @nano2_aloerina / GitHub: nano-nano
自己紹介
Flutter勝手に擬人化キャラクター
「ふらったん」です！
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
!!
Slide 6
Slide 6 text
Let’s Try!!
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
ちなみに……
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
ここがGood!!
● それぞれの子Widgetが色分けされて表示される
○ 色分けは自動だが、見やすくてよい
● プレビューのWidgetをクリックすると、対応するコードにジャンプしてくれる
○ Flutter Outlineの機能のようです
● コードを変更すると、Widgetのサイズ等も動的に変わる
○ 相対的なWidgetのサイズ等を確認しやすい
Slide 22
Slide 22 text
ここがNOT Good...
● Widgetの内容（TextとかImageとか）は表示されない
● Widgetを選択しても、すぐにプレビューが出るわけではない
○ 最初のレンダリングに少し時間がかかる
● ときどきレンダリングされないままになることがある
○ Projectを開き直す、コードをいじってみる等で解消することも
● 端末の画面サイズ等を考慮したプレビューでは無い
● ドラッグできない
Slide 23
Slide 23 text
まとめ
● 現時点では「使えるような、使えないような……」という感じ
○ 開発中機能なので仕方ない
● 正式機能としてリリースされる頃には、きっと便利ツールになってるはず！
Slide 24
Slide 24 text
Appendix. 参考文献等
Using live preview
https://github.com/flutter/flutter-intellij/wiki/Using-live-preview
Flutter Outline, Hot Reload, and the implementation of a live widget preview
https://medium.com/flutter-io/flutter-outline-hot-reload-and-the-implementation-of-a-live-widget-pre
view-69abd39aa3bb
Slide 25
Slide 25 text
Thank You!!