Feature/kids 839 implement allowance success screen

[TammiLion]

[## Description

](https://linear.app/givt/issue/KIDS-839/implement-allowance-success-screen)

This PR also illustrates the use of a UIModel and a golden test.

A UIModel contains all the information a widget needs to display information. By using a UIModel you can make the widget easily testable and the cubit can format the data it emits into a UIModel without having to know about the widget. The second part I will illustrate in a follow up PR. As this PR illustrates I'm not using a UIModel for every widget, just the ones I need to separate the logic from the UI. I use parameter functions to bubble up any user interactions. The top widget that does know about the cubit can then listen to those functions and perform the necessary calls on a cubit (will be illustrated in a follow-up PR).

A golden test is basically a "screenshot/rendering" test. By running flutter test --update-goldens you can create the "current/initial" screenshots of all widget golden tests OR flutter test <path_to_specific_test> --update-goldens of a specific widget golden test. When you run the test/ all tests in the golden folder it will check for any differences. The slightest difference will make it fail so you can check wether the visual changes were intended or not. It also allows you to easily check for renderflex overflows, or even just visually test a screen without even connecting it in the app. And I also like it for reviewing PRs, people can visually see what I created. For illustration sake I added the "failures", (so I ran a test where i added a 6 to my string). The file being checked against is the "success_pages_golden.png" in the goldens folder of the test. All golden tests will be run when the flutter test command is used.

There's some things that needed 1-time setup in this PR. In order to write a golden test you really only need to look at the success_pages_golden_test.dart. In the testGoldens method you define the golden. You use a goldenBuilder to build the golden and its test scenarios. The checkIfScreenMatchesGolden is a convenience method to do the actual golden testing.

If anything is unclear please comment and I can elaborate further.

Up-sides:

• light-weight to write
• useful during development to check for renderflex overflows
• makes a PR visual
• check crucial components where each visual change truly needs to be intended/ reviewed

Down-sides of golden tests:

• Just a 1 pixel change fails the test
• Storage of the pngs

In my opinion golden test should only be used for components/ screens that are crucial and where changes truly need to be reviewed. We can also solve this problem by "tagging" tests and only run the tests that have a "crucial" tag.