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

Flutter app architektúrák (Flutter app architectures)

Flutter app architektúrák (Flutter app architectures)

Úgy tűnhet, hogy a Flutter csak a Widgetekről szól, konkrétabban a UI Widgetekről. Alkalmazás fejlesztőként viszont a UI feladatokon felül az alkalmazások mélyebb struktúrájával, felépítésével is foglalkoznunk kell. Feladatunk még például a UI és alkalmazás állapot kezelés, dependency injection, hálózati hívások, stb. összeállítása. Ez az előadás bemutat néhány Flutter architektúrát és package-et, amiket a Flutter közösség előszeretettel alkalmaz.
Az előadás a 2020. júliusi HWSW free! online meetupon hangzott el magyarul.
https://rendezveny.hwsw.hu/free/51/flutter-fejlesztes-meetup

Video:
https://youtu.be/E7pOdgTJ6YE?t=4671

Flutter seems to be all about Widgets, especially UI Widgets. But as app developers, we should take care about much more while developing applications on any platform. UI and app state handling, dependency injection, networking, and so on. This talk highlights some frequently used architectures and packages preferred by the Flutter community itself.
Presented at the July 2020 instalment of the HWSW free! meetup series (online) in Hungarian.
https://rendezveny.hwsw.hu/free/51/flutter-fejlesztes-meetup

István Juhos

July 21, 2020
Tweet

More Decks by István Juhos

Other Decks in Technology

Transcript

  1. Juhos István
    Flutter app architektúrák
    stewemetal

    View full-size slide

  2. @stewemetal
    Mit látunk először a Flutterből?

    View full-size slide

  3. @stewemetal
    Mit látunk először a Flutterből?
    Widgeteket

    View full-size slide

  4. @stewemetal
    UI Widgeteket!
    Mit látunk először a Flutterből?

    View full-size slide

  5. @stewemetal
    https://flutter.dev/docs/development/ui/widgets

    View full-size slide

  6. @stewemetal
    https://flutter.dev/docs/development/ui/widgets

    View full-size slide

  7. @stewemetal
    https://flutter.dev/docs/development/ui/widgets

    View full-size slide

  8. @stewemetal
    UI

    View full-size slide

  9. @stewemetal
    Preferences Database, DAOs Network APIs
    DiskDataSources NetworkDataSources
    Interactors
    App state handling
    UI

    View full-size slide

  10. @stewemetal
    Mire koncentrálnak a
    Flutter app architektúrák?
    App state handling

    View full-size slide

  11. @stewemetal
    Flutter app architektúrák
    BLoC
    Mobx
    Redux

    View full-size slide

  12. @stewemetal
    BLoC
    UI BLoC Interactors
    Állapotok
    Események Aszinkron lekérdezés
    Aszinkron válasz
    https://pub.dev/packages/flutter_bloc/

    View full-size slide

  13. @stewemetal
    Flutter app architektúrák
    BLoC
    Mobx
    Redux

    View full-size slide

  14. @stewemetal
    Mobx
    https://pub.dev/packages/mobx

    View full-size slide

  15. @stewemetal
    Flutter app architektúrák
    BLoC
    Mobx
    Redux

    View full-size slide

  16. @stewemetal
    Redux
    https://pub.dev/packages/redux
    https://pub.dev/packages/flutter_redux
    https://redux.js.org/

    View full-size slide

  17. @stewemetal
    Flutter app architektúrák
    BLoC
    Mobx
    Redux

    View full-size slide

  18. @stewemetal
    Mi kellhet még egy apphez?
    Adatbázis-kezelés
    JSON szerializálás
    Dependency Injection
    Hálózati hívások

    View full-size slide

  19. @stewemetal
    Adatbázis-kezelés
    JSON szerializálás
    Hálózati hívások
    Mi kellhet még egy apphez?
    http
    Retrofit (Flutter)
    Chopper -

    View full-size slide

  20. @stewemetal
    Hálózati hívások
    Adatbázis-kezelés
    JSON szerializálás
    Dependency Injection
    Mi kellhet még egy apphez?
    sqflite
    floor
    moor

    View full-size slide

  21. @stewemetal
    Hálózati hívások
    Adatbázis-kezelés
    JSON szerializálás
    Dependency Injection
    Mi kellhet még egy apphez?
    json_serializable
    json_annotation
    dart:convert

    View full-size slide

  22. @stewemetal
    JSON szerializálás
    Dependency Injection
    Mi kellhet még egy apphez?
    InheritedWidgetek
    Provider
    Modular

    View full-size slide

  23. @stewemetal
    Preferences Database, DAOs Network APIs
    DiskDataSources NetworkDataSources
    Interactors
    App state handling
    UI

    View full-size slide

  24. @stewemetal
    Hivatkozások
    flutter.dev/docs/development/ui/widgets
    pub.dev/packages/flutter_bloc
    pub.dev/packages/mobx
    pub.dev/packages/flutter_redux
    https://speakerdeck.com/stewemetal/app-
    architecture-concept-in-flutter

    View full-size slide

  25. @stewemetal
    Flutter app architektúrák
    A Flutter alkalmazások nem csak
    Widgetekből állnak
    Más platformoktól átvett
    architektúrák, működő ötletek
    (Majdnem) mindenre van már package
    stewemetal

    View full-size slide