Decoupling logic from UI in Flutter application

Photo by Kelly Sikkema on Unsplash

Introduction

Figure 1. Architecture components
Figure 2. Application testing

Calculus application

Building UI

Figure 3. Calculus application UI
Snippet 1. UI scaffold

Implementing application logic

Snippet 2. Adding memory state to the top-level widget
Snippet 3. Providing memory information and the update callback to CalculatorInput
Figure 4. Injecting state and callbacks from parent to children
Snippet 4. Calculator operations value and format getters
Snippet 5. CalculatorInput provides callbacks to OperandInput
Snippet 6. OperandInput
Figure 5. Calculator-Operand flow
Figure 6. Top-level view on control and data flows in the application

Decoupling application logic from UI

Figure 7. Moving application logic to a use-case
Snippet 7. CalculatorUseCase
Snippet 8. CalculatorUseCase unit tests
Snippet 9. Calculus screen injecting use case to its children elements
Snippet 10. CalculatorInput utilizes CalculatorUseCase
Snippet 11. OperatorInput uses CalculatorUseCase
Figure 8. “Cleaned” UI and use-case
Snippet 12. Introducing operations
Snippet 13. CalculatorUseCase uses Operation class
Snippet 14. Using operation constants in CalculatorInput

Adding application state

Figure 9. Using the state to “glue” UI with the use-case
Snippet 15. Adding callbacks to use case to notify about changes
Snippet 16. CalculatorState

Using provider

Snippet 17. Updated CalculusScreen with ChangeNotifierProvider
Snippet 18. Updated CalculatorInput
Figure 10. Using a provider to inject state to widget classes

Widget testing

Snippet 19. Setting interface state in widget tests

Conclusion

References

Software Engineer and chef @CloudRecipesIO

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store