Creating a separate StopwatchRenderer widget


To draw the stopwatch UI, all we need is the elapsed time that is stored as a state variable.

Since the UI code doesn't need to know or care about all the Ticker logic, here we follow the single responsibility principle and move all the UI code into a separate StopwatchRenderer widget class, so that:

  • Stopwatch will contain all the Ticker and elapsed time calculation logic
  • StopwatchRenderer will take the elapsed time as an input argument and draw the UI

Complete and Continue