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

App Architecture Concept in Flutter

App Architecture Concept in Flutter

What most people see in Flutter? Widgets, of course. Behind those Widgets, there is business logic, data handling, DI and more. This talk presents a few architecture layers that can be implemented in Flutter apps while showing off some already stable and useful libraries out there along the way.
This talk was presented at the February 2020 installment of the Flutter Budapest meetup.

E8168a08862631072b2e82e7b662dc07?s=128

István Juhos

February 06, 2020
Tweet

More Decks by István Juhos

Other Decks in Programming

Transcript

  1. None
  2. @stewemetal What do we see in Flutter?

  3. @stewemetal What do we see in Flutter? Widgets!

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

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

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

  7. @stewemetal https://dribbble.com/shots/6545819-Pokedex-App https://www.uplabs.com/posts/pokedex-app https://www.instagram.com/saepulnahwan/

  8. @stewemetal List screen About screen https://dribbble.com/shots/6545819-Pokedex-App https://www.uplabs.com/posts/pokedex-app https://www.instagram.com/saepulnahwan/

  9. @stewemetal

  10. @stewemetal Database, DAOs Network APIs DiskDataSources NetworkDataSources Interactors UI state

    handling UI
  11. @stewemetal Preferences Database, DAOs Network APIs DiskDataSources NetworkDataSources Interactors UI

    state handling UI
  12. @stewemetal PokedexDatabase / PokemonDao PokeApi PokemonDiskDataSource PokemonNetworkDataSource PokemonListInteractor PokemonListBloc PokemonListScreen

  13. @stewemetal https://pokeapi.co/ https://pokeapi.co/api/v2/pokemon/{id}/ https://pokeapi.co/api/v2/pokemon/limit=20&offset=0 https://pokeapi.co/api/v2/type/{name}/ PokeApi – Network calls and

    the REST
  14. @stewemetal PokeApi – Network calls and the REST http dio

    retrofit chopper + json_serializable
  15. @stewemetal PokeApi – chopper

  16. @stewemetal PokeApi – chopper

  17. @stewemetal PokeApi – chopper

  18. @stewemetal PokeApi – chopper

  19. @stewemetal PokeApi – chopper json_serializable

  20. @stewemetal PokeApi – chopper json_serializable

  21. @stewemetal PokeApi – chopper

  22. @stewemetal PokeApi – chopper

  23. @stewemetal PokeApi – chopper

  24. @stewemetal PokeApi – chopper

  25. @stewemetal PokeApi – chopper

  26. @stewemetal PokedexDatabase / PokemonDao PokeApi PokemonDiskDataSource PokemonNetworkDataSource PokemonListInteractor PokemonListBloc PokemonListScreen

  27. @stewemetal PokemonNetworkDataSource

  28. @stewemetal PokemonNetworkDataSource

  29. @stewemetal PokemonNetworkDataSource

  30. @stewemetal PokemonNetworkDataSource

  31. @stewemetal PokemonNetworkDataSource

  32. @stewemetal PokemonNetworkDataSource

  33. @stewemetal PokemonNetworkDataSource

  34. @stewemetal PokemonNetworkDataSource

  35. @stewemetal PokemonNetworkDataSource

  36. @stewemetal PokemonNetworkDataSource

  37. @stewemetal PokedexDatabase / PokemonDao PokeApi PokemonDiskDataSource PokemonNetworkDataSource PokemonListInteractor PokemonListBloc PokemonListScreen

  38. @stewemetal sqflite floor flutter_realm moor PokedexDatabase / PokemonDao

  39. @stewemetal Database, Dao - moor

  40. @stewemetal Database, Dao - moor

  41. @stewemetal Database, Dao - moor

  42. @stewemetal Database, Dao - moor

  43. @stewemetal Database, Dao - moor

  44. @stewemetal Database, Dao - moor

  45. @stewemetal Database, Dao - moor

  46. @stewemetal Database, Dao - moor

  47. @stewemetal Database, Dao - moor

  48. @stewemetal Database, Dao - moor

  49. @stewemetal Database, Dao - moor

  50. @stewemetal Database, Dao - moor

  51. @stewemetal Database, Dao - moor

  52. @stewemetal Database, Dao - moor

  53. @stewemetal Database, Dao - moor

  54. @stewemetal Database, Dao - moor

  55. @stewemetal PokedexDatabase, PokemonDao

  56. @stewemetal PokedexDatabase / PokemonDao PokeApi PokemonDiskDataSource PokemonNetworkDataSource PokemonListInteractor PokemonListBloc PokemonListScreen

  57. @stewemetal PokemonDiskDataSource

  58. @stewemetal PokemonDiskDataSource

  59. @stewemetal PokemonDiskDataSource

  60. @stewemetal PokemonDiskDataSource

  61. @stewemetal PokemonDiskDataSource

  62. @stewemetal PokemonDiskDataSource

  63. @stewemetal PokemonDiskDataSource

  64. @stewemetal PokemonDiskDataSource

  65. @stewemetal PokedexDatabase / PokemonDao PokeApi PokemonDiskDataSource PokemonNetworkDataSource PokemonListInteractor PokemonListBloc PokemonListScreen

  66. @stewemetal PokemonListInteractor

  67. @stewemetal PokemonListInteractor

  68. @stewemetal PokemonListInteractor

  69. @stewemetal PokemonListInteractor

  70. @stewemetal PokemonListInteractor

  71. @stewemetal PokemonListInteractor

  72. @stewemetal PokemonListInteractor

  73. @stewemetal PokedexDatabase / PokemonDao PokeApi PokemonDiskDataSource PokemonNetworkDataSource PokemonListInteractor PokemonListBloc PokemonListScreen

  74. @stewemetal PokemonListBloc flutter_bloc bloc

  75. @stewemetal PokemonListBloc - flutter_bloc

  76. @stewemetal PokemonListBloc - flutter_bloc

  77. @stewemetal PokemonListBloc - flutter_bloc

  78. @stewemetal PokemonListBloc - flutter_bloc

  79. @stewemetal PokemonListBloc - flutter_bloc

  80. @stewemetal PokemonListBloc - flutter_bloc

  81. @stewemetal PokemonListBloc - flutter_bloc

  82. @stewemetal PokemonListBloc - equatable flutter_bloc

  83. @stewemetal PokemonListBloc - flutter_bloc equatable

  84. @stewemetal PokemonListBloc - flutter_bloc

  85. @stewemetal PokemonListBloc - flutter_bloc

  86. @stewemetal PokemonListBloc - flutter_bloc

  87. @stewemetal PokemonListBloc - flutter_bloc

  88. @stewemetal PokemonListBloc - flutter_bloc

  89. @stewemetal PokemonListBloc - flutter_bloc

  90. @stewemetal PokemonListBloc - flutter_bloc

  91. @stewemetal PokemonListBloc - flutter_bloc

  92. @stewemetal PokemonListBloc - flutter_bloc

  93. @stewemetal PokemonListBloc - flutter_bloc

  94. @stewemetal PokemonListBloc - flutter_bloc

  95. @stewemetal PokemonListBloc - flutter_bloc

  96. @stewemetal PokemonListBloc - flutter_bloc

  97. @stewemetal PokemonListBloc - flutter_bloc

  98. @stewemetal PokemonListBloc - flutter_bloc

  99. @stewemetal PokedexDatabase / PokemonDao PokeApi PokemonDiskDataSource PokemonNetworkDataSource PokemonListInteractor PokemonListBloc PokemonListScreen

  100. @stewemetal PokemonListScreen – Widgets ☺

  101. @stewemetal PokemonListScreen – flutter_bloc

  102. @stewemetal PokemonListScreen – flutter_bloc

  103. @stewemetal PokemonListScreen – flutter_bloc

  104. @stewemetal PokemonListScreen – flutter_bloc

  105. @stewemetal PokemonListScreen – flutter_bloc

  106. @stewemetal PokedexDatabase / PokemonDao PokeApi PokemonDiskDataSource PokemonNetworkDataSource PokemonListInteractor PokemonListBloc PokemonListScreen

  107. @stewemetal ”Dependency Injection” injector injectable flutter_simple_dependency_injection dependencies_flutter flutter_modular provider bloc

  108. @stewemetal ”Dependency Injection” + flutter_bloc provider

  109. @stewemetal ”Dependency Injection”

  110. @stewemetal ”Dependency Injection”

  111. István Juhos stewemetal App Architecture Concept • The Flutter ecosystem

    is slowly stabilizing • Flutter is not just about Widgets • Build for scalability and maintainability