IntelliJ IDEAのFlutter Live Previewおためし会

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勝手に擬人化キャラクター 「ふらったん」です！
3. None
4. None

5. !!

6. Let’s Try!!

7. None
8. None
9. None
10. None
11. None
12. None
13. None
14. None
15. None

16. ちなみに……

17. None
18. None
19. None
20. None

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!!