Why? What? Who? How?

[nelsonic]

Why?

@LuchoTurtle recently opened the following issue: https://github.com/dwyl/app/issues/320 We need to build an example App akin to our MVP: https://github.com/dwyl/mvp We cannot simply pick a technology / architecture based on a recommendation from someone we know. We must make the effort up-front to document our choice with a clear step-by-step example that everyone in the team can use to get up-to-speed.

Once that is done we can evaluate if bloc is a good fit for our use-case.

What?

• [x] Briefly Explain the BLoC Architecture
• [x] Explain how the bloc library works and why it's a good fit for medium to larger Flutter Apps.

Who?

This tutorial is targeted at the novice Flutter dev. We are writing a step-by-step tutorial as an authoritative guide to the @dwyl team/community up-to-speed. If we can make this tutorial useful to other people in the wider Flutter community that's great!

How?

The expectation is that they have already followed at least 2 of our other tutorials:

1. https://github.com/dwyl/learn-flutter
2. https://github.com/dwyl/flutter-todo-list-tutorial

These should be included as prerequisites in the README.md "How?" section

Todo

• [x] Follow test-driven development from the start.

  • [x] Setup the project and testing in the first step of the tutorial.
  • [x] Setup GitHub Actions CI and track coverage for the project.
  • [x] Project should have 100% coverage when complete.

• [x] Follow and combine the following tutorials:

  • [x] Timer: https://bloclibrary.dev/#/fluttertimertutorial
  • [x] Todo List: https://bloclibrary.dev/#/fluttertodostutorial
  • [x] Showcase how bloc helps to separate presentation from business logic.

• [x] Include as many in-line comments in the code as would be reasonable for a beginner who has never seen bloc before to understand what is going on. i.e. the code is not "self documenting" ...

Note: for now, it's OK for all data to remain on the device. i.e. no need to interact with our API. But if you're feeling like you want to extend the tutorial, feel free to dive into saving data to the API. 👌

• [x] Bonus Level: Make it look great! Ideally try to match the UI in our Figma for the @dwyl app: https://www.figma.com/file/WrpkKGJNYZbeCzMRDVtvQLbC/dwyl-app related to: https://github.com/dwyl/app/issues/328

[LuchoTurtle]

Already got a working app using Bloc, after using Cubit.

https://user-images.githubusercontent.com/17494745/223520170-13197994-ecbb-4833-99da-54f7edeaf4dc.mp4

Some coverage still needs to be addressed on localhost but it should be manageable. Just wanted to give a status update, as I've been trying to implement Timer with Bloc.