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?

post the code of the inner static part. To prevent rebuilds of a static part make it a const constructor and add const in front of the widget. Bloc is a state management library, it doesn't prevent rebuilds by itself — Sanketh B. K, Aug 27 '22 at 20:54
this static part need to view some data and this data is fetched when the stateful widget is created specifically in the initState() block ! — Saif, Aug 28 '22 at 06:32

score 0 · Answer 1 · answered Aug 28 '22 at 00:50

0

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

answered Aug 28 '22 at 00:50

Francis Nduba Numbi

2,499
1
11
22

this static part need to view some data and this data is fetched when the stateful widget is created specifically in the initState() block ! – Saif Aug 28 '22 at 06:33

manage state for small part of screen

1 Answers1