IntelliJ IDEAのFlutter Live Previewおためし会

2018.12.06 Flutter Meetup Tokyo #6

Transcript

1. Flutterお助けTool検証シリーズ IntelliJ IDEAの Flutter Live Previewおためし会 2018.12.06　Flutter Meetup Tokyo #6 @nano2_aloerina
2. • 坂野 匠弥 / なのなの • 株式会社アスネット 技術部 開発グループ所属 • 業務は主にAndroid（フロントエンド） • Flutterレベル: とりあえず何か作ろうと奮闘中 • Twitter: @nano2_aloerina / GitHub: nano-nano 自己紹介 Flutter勝手に擬人化キャラクター 「ふらったん」です！
5. !!
6. Let’s Try!!
16. ちなみに……
21. ここがGood!! • それぞれの子Widgetが色分けされて表示される ◦ 色分けは自動だが、見やすくてよい • プレビューのWidgetをクリックすると、対応するコードにジャンプしてくれる ◦ Flutter Outlineの機能のようです • コードを変更すると、Widgetのサイズ等も動的に変わる ◦ 相対的なWidgetのサイズ等を確認しやすい
22. ここがNOT Good... • Widgetの内容（TextとかImageとか）は表示されない • Widgetを選択しても、すぐにプレビューが出るわけではない ◦ 最初のレンダリングに少し時間がかかる • ときどきレンダリングされないままになることがある ◦ Projectを開き直す、コードをいじってみる等で解消することも • 端末の画面サイズ等を考慮したプレビューでは無い • ドラッグできない
23. まとめ • 現時点では「使えるような、使えないような……」という感じ ◦ 開発中機能なので仕方ない • 正式機能としてリリースされる頃には、きっと便利ツールになってるはず！
24. 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
25. Thank You!!