Update a part of the UI on Flutter

Question

To update the whole widget is easy, we call SetState() and we do our changes but what happens if I don't need to update everything?

I have this UI:

When I load that page I get my array of elements from my app provider:

Widget build(BuildContext context) {
   var elements = shuffle(Provider.of<GameSettings>(context).set.elements);

(took it from this answer: List.shuffle() in Dart?)

I need the context to get my saved list of elements, that's why I put it there.

I also have the progress bar which I need to refresh:

void _startTimer() {
    var sub = countDownTimer.listen(null);
    sub.onData((duration) {
      setState(() {
        _current = _start + duration.elapsed.inSeconds;
      });
    });

    sub.onDone(() {
      sub.cancel();
    });
  }
}

But when I refresh it, I'm also refreshing my element. This is happening because the whole widget is being called and so my shuffle function.

I tried moving the progress button to a different widget, but still the same. How could I just refresh this progress?

score 2 · Accepted Answer · edited Dec 19 '19 at 13:04

2

You can use StatefulBuilder()

your code will be :

void _startTimer() {
    StatefulBuilder(
        builder: (BuildContext context, setState){
           var sub = countDownTimer.listen(null);
           sub.onData((duration) {
              setState(() {
                   _current = _start + duration.elapsed.inSeconds;
                });
            });

            sub.onDone(() {
             sub.cancel();
            });
         }
     )

 }

edited Dec 19 '19 at 13:04

Dani

3,128
2
43
91

answered Dec 07 '19 at 13:55

Mohammed Ali

134
2
10

I don't understand. Why I need to return a widget? I just need to modify the state with the `_current` value? Sorry if my questions sounds silly, I'm not that familiar with Flutter – Dani Dec 09 '19 at 11:46
you can modify `_current` value without `setState()` fine , but the Ui of your page doesn't know that `current` is changed .. to solve that you can use `StatefulWidget` and refresh All of the page , but if you want to refresh only a part of your page then you could use 'StatefulBuilder()' in your 'StatelessWidget class' . in your case you can put only the widget you want to refresh it when `_current` change .. – Mohammed Ali Dec 09 '19 at 14:36
Am I wrong with this? StatefulBuilder(builder: (BuildContext context, setState) { int counter = 0; return Column( children: [ RaisedButton( onPressed: () { setState(() { counter++; print(counter); }); }, child: Text( "Increment counter"),), Text("Counter is " + counter.toString()), ], ); }), – Dani Dec 19 '19 at 15:52
On this case `counter` is always but also, the `Text()` only displays `0` – Dani Dec 19 '19 at 15:53
got it again: had to move `counter` outside `StatefulBuilder` – Dani Dec 19 '19 at 16:00

score 0 · Answer 2 · answered Dec 07 '19 at 12:27

0

you can use StreamController and StreamBuilder widget for that

https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html

answered Dec 07 '19 at 12:27

Sahandevs

1,120
9
25

but I already have the list of elements, that's local. I don't have any future or stream. I just need to change is order and elements – Dani Dec 07 '19 at 12:32

Update a part of the UI on Flutter

2 Answers2

Linked