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

LINE TECHPULSE 2020 - LINE LINE SHOPPING App with Flutter

LINE TECHPULSE 2020 - LINE LINE SHOPPING App with Flutter

LINE LINE SHOPPING App with Flutter by Chia-Cheng Chu (Aaron) @ LINE TECHPULSE 2020 https://techpulse.line.me/

2102a6b8760bd6f57f672805723dd83a?s=128

line_developers_tw

December 18, 2020
Tweet

Transcript

  1. LINE SHOPPING App with Flutter Chia-Cheng Chu (Aaron) / LINE

    Taiwan Android Team
  2. Agenda › LINE Shopping App Overview › State Management: BLoC

    › Challenges
  3. LINE SHOPPING App Overview

  4. Flutter Widgets + Native WebView

  5. State Management: BLoC

  6. Business Logic Component (BLoC) Widget StreamSink Stream Event State(s) BLoC

  7. bloc: State Management Library for Dart https://bloclibrary.dev/

  8. Example: Search Products ProductSearchResultPage ProductSearchBloc SearchProductEvent SearchProductState StreamSink Stream

  9. ProductSearchBloc Defines input events and output states

  10. ProductSearchBloc Defines input events and output states

  11. ProductSearchBloc Give an initial state and use case

  12. ProductSearchBloc Process events and emit states

  13. ProductSearchBloc Process events and emit states

  14. ProductSearchBloc Process events and emit states

  15. ProductSearchBloc Process events and emit states

  16. ProductSearchBloc Process events and emit states

  17. ProductSearchBloc Convert data model to view model

  18. ProductSearchBloc Add events and then listens to state changes to

    update widgets
  19. ProductSearchBloc Add events and then listens to state changes to

    update widgets
  20. ProductSearchBloc Add events and then listens to state changes to

    update widgets
  21. ProductSearchBloc Add events and then listens to state changes to

    update widgets
  22. ProductSearchBloc Add events and then listens to state changes to

    update widgets
  23. Challenges

  24. › Keyboard Language Switch Malfunction in Android WebView Framework/Engine Issues

    InAppWebView
  25. Hybrid Composition Hybrid composition refers to the ability of composing

    native views alongside Flutter widgets https://github.com/flutter/flutter/wiki/Hybrid-Composition
  26. Hybrid Composition Hybrid composition refers to the ability of composing

    native views alongside Flutter widgets https://github.com/flutter/flutter/wiki/Hybrid-Composition
  27. Hybrid Composition Side Effect App is prone to crash while

    switching between foreground and background https://github.com/flutter/flutter/issues/63897
  28. Hybrid Composition Side Effect Beta channel is fine to use

    if necessary https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
  29. Wrap Up › Pay attention to Flutter framework/engine issues ›

    Introduce BLoC and demonstrate how to use it
  30. Thank you