Patterns, Data, and Input

Shared State


Learning Objectives

  • You know of the benefits of inversion of control and dependency injection in creating widgets that share state.

One of the key benefits in using inversion of control and dependency injection is that they are used to create a pool of dependencies that can be shared in the application. This is in particular useful, when the state needs to be shared between different parts of an application, or when the state needs to be made available to multiple parts of the application.

Let’s start with an example that does not use inversion of control or dependency injection, but instead creates a new instance of the controller in every part of the application.

No files opened Select a file to edit

When you try out the above application, you will notice that the count is not shared between the ClickDisplay and the ClickCounterView widgets — whenever the button is clicked, the text starting with “Likes” is updated, but the text starting with “Clicks so far” is not updated

This is because a new instance of CountController is created in each widget. As the state is specific to the controller, the state is not shared between the widgets.

However, if we use inversion of control and dependency injection, we can create a shared controller that is used in both widgets. This way, the state is shared between the widgets, and the count is updated in both widgets when the button is clicked.

When you try out the application below, you see that the changes to the count are reflected in both the “Likes” and “Clicks so far” texts.

No files opened Select a file to edit

Fibonacci sequence

0 / 40 points

Create an application that consists of the following four classes:

  • FibonacciIndexController: A class that is responsible for storing the index of the Fibonacci sequence. Use the variable “index” within the class to store the concrete state. At the beginning, the value of “index” should be 0.
  • FibonacciIndexWidget: A widget that shows a text widget with the Fibonacci number index from “FibonacciIndexController”. The text widget should be formatted as “Index: {index}", where {index} is the index from the controller.
  • FibonacciIndexChangerWidget: A widget that shows an ElevatedButton with the text “Next”. When the button is pressed, the index in the “FibonacciIndexController” should be incremented by 1.
  • FibonacciWidget: A widget that shows a text widget that has the Fibonacci number at the index from “FibonacciIndexController” formatted as “Fibo: {number}", where {number} is the fibonacci number at the index. The assignment template comes with a function “fibonacci” that calculates the Fibonacci number at the given index. Use this function to calculate the Fibonacci number.
  • FiboApp: A class that creates an application out of the widgets.

In addition, the application should have a main function that is used to run the application.

Concretely, when the application starts, the application should show the texts “Index: 0”, “Fibo: 1”, and a button with the text “Next”. When the button is pressed once, the texts should change to “Index: 1”, “Fibo: 1”. When the button is pressed again, the texts should change to “Index: 2”, “Fibo: 2”. When the button is pressed a third time, the texts should change to “Index: 3”, “Fibo: 3”, and for the fourth time, the texts should change to “Index: 4”, “Fibo: 5”, and so on.