IntelliJ IDEAのFlutter Live Previewおためし会

IntelliJ IDEAのFlutter Live Previewおためし会

2018.12.06 Flutter Meetup Tokyo #6

7b6d34430f1793301a70aa5258e27a54?s=128

NanoNano / Banno Takuya

December 06, 2018
Tweet

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