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
   

   View Slide

2. ● 坂野 匠弥 / なのなの
   ● 株式会社アスネット 技術部 開発グループ所属
   ● 業務は主にAndroid（フロントエンド）
   ● Flutterレベル: とりあえず何か作ろうと奮闘中
   ● Twitter: @nano2_aloerina / GitHub: nano-nano
   自己紹介
   Flutter勝手に擬人化キャラクター
   「ふらったん」です！
   

   View Slide

3. View Slide

4. View Slide

5. !!
   

   View Slide

6. Let’s Try!!
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. ちなみに……
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. ここがGood!!
    ● それぞれの子Widgetが色分けされて表示される
    ○ 色分けは自動だが、見やすくてよい
    ● プレビューのWidgetをクリックすると、対応するコードにジャンプしてくれる
    ○ Flutter Outlineの機能のようです
    ● コードを変更すると、Widgetのサイズ等も動的に変わる
    ○ 相対的なWidgetのサイズ等を確認しやすい
    

    View Slide

22. ここがNOT Good...
    ● Widgetの内容（TextとかImageとか）は表示されない
    ● Widgetを選択しても、すぐにプレビューが出るわけではない
    ○ 最初のレンダリングに少し時間がかかる
    ● ときどきレンダリングされないままになることがある
    ○ Projectを開き直す、コードをいじってみる等で解消することも
    ● 端末の画面サイズ等を考慮したプレビューでは無い
    ● ドラッグできない
    

    View Slide

23. まとめ
    ● 現時点では「使えるような、使えないような……」という感じ
    ○ 開発中機能なので仕方ない
    ● 正式機能としてリリースされる頃には、きっと便利ツールになってるはず！
    

    View Slide

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
    

    View Slide

25. Thank You!!
    

    View Slide