I want the function update_list to change the values in the list when it is called. And then I want it to change the text in the column.

That works, but now I want the first value to change (and to see the new value on the screen) and then a second later the next value and so on. But with my code it changes all together at the end.

How can I make the values change one after the other and not all at once?

class class_one extends StatefulWidget {
      const class_one({Key? key}) : super(key: key);

      @override
      State<class_one> createState() => _class_oneState();
    }

    class _class_oneState extends State<class_one> {
      List list = [0,1,2,3];

      void update_list(){
        setState((){
          for (var i = 0; i < 4; i  ){
            list[i]=list[i] 10;
            sleep(Duration(seconds: 1));
          }
        });
      }

      @override
      Widget build(BuildContext context) {
        return Container(
          child: Column(
            children: [
              Text('${list[0]}'),
              Text('${list[1]}'),
              Text('${list[2]}'),
              Text('${list[3]}'),
              GestureDetector(onTap: (){update_list();},child: Container(color: Colors.red,child: Text("next"),),)
            ],
          ),
        );
      }
    }

CodePudding user response：

you can use two solution for this issue: 1: use streaming mechanism(actually use from streamBuilder widget). 2:

void update_list() async{
      for (var i = 0; i < 4; i  ){
        setState((){
           list[i]=list[i] 10;

        });
        await Future.delayed(Duration(seconds: 1));
      }
  }