Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IntelliJ IDEAのFlutter Live Previewおためし会

IntelliJ IDEAのFlutter Live Previewおためし会

2018.12.06 Flutter Meetup Tokyo #6

NanoNano / Banno Takuya

December 06, 2018
Tweet

More Decks by NanoNano / Banno Takuya

Other Decks in Technology

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