manage state for small part of screen

Question

I have screen which contains two main parts the upper part is dynamic and the lower part is static so my question is I want to rebuild only the upper part every second using BLoC, here's the code of my upper part:

Expanded(
                    flex: 5,
                    child: CustomPaint(
                      painter: CustomHomeScreenCounter(
                        value: _animation.value * _value,
                        smallEventName: _nextSmallEventName,
                        hour: (_nextSmallEventCounter.inHours > 9)
                            ? _nextSmallEventCounter.toString().substring(0, 2)
                            : '0${_nextSmallEventCounter.toString().substring(0, 1)}',
                        minute: (_nextSmallEventCounter.inHours > 9)
                            ? _nextSmallEventCounter.toString().substring(3, 5)
                            : _nextSmallEventCounter.toString().substring(2, 4),
                        second: (_nextSmallEventCounter.inHours > 9)
                            ? _nextSmallEventCounter.toString().substring(6, 8)
                            : _nextSmallEventCounter.toString().substring(5, 7),
                      ),
                    ),
                  ),

upper part

the green indicator has to be updated every second the word 'Fajr in' has to be updated every second the timer also has to be updated every second

my code works but I want to improve it to use BLoC and prevent the static part from rebuilding

note that the upper part is implemented using custom paint, in the image I posted above all this UI inside custom painter so how to achieve what I want?

Answer 1

Break the codes in separate widgets, make the one that should not change, stateless and const. This way only the upper part will refresh