вывод каждого значения списка через 1 секунду

//цикл через 1 секунду выводит значения списка
for(var i in _ara) {
 Future.delayed(Duration(seconds: 1), () {
  _str += '$i ';
 });
}

Вывод не происходит. Что не так, подскажите. Спасибо.

Полный код

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   debugShowCheckedModeBanner: false,
   title: 'Name App',
   theme: ThemeData(
    primarySwatch: Colors.blue,
   ),
   home: Scaffold(
    appBar: AppBar(
     title: Text('Name Page'),
    ),
    body: MyHomePage(),
   ),
  );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 //объявление переменных
 String _str;
 List _ara;

 //вызывается один раз при инициализации виджета
 @override
 void initState() {
  super.initState();
  _str = '';
  _ara = [1, 2, 3, 4, 5];
 }

 void _f1() {
  setState(() {
   //очистка вывода
   _str = '';

   //цикл через 1 секунду выводит значения списка
   for(var i in _ara) {
    Future.delayed(Duration(seconds: 1), () {
     _str += '$i ';
    });
   }

  });
 }

 @override
 Widget build(BuildContext context) {
  return Stack(
   children: <Widget>[
    Align(
     alignment: Alignment.topLeft,
     child: Container(
      width: double.infinity,
      height: 45.0,
      //color: Colors.pink,
      margin: const EdgeInsets.all(10.0),
      child: FlatButton(
       onPressed: () {
        _f1();
       },
       color: Colors.black12,
       shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0)
       ),
       child: Text(
        'ok',
        style: TextStyle(
         color: Colors.deepPurple,
         fontSize: 22.0,
        ),
       ),
      ),
     ),
    ),
    Align(
     alignment: Alignment.centerLeft,
     child: Container(
      padding: const EdgeInsets.all(10.0),
      child: Text(
       _str,
       style: TextStyle(
        color: Colors.red,
        fontSize: 36.0,
       ),
      ),
     ),
    ),
   ],
  );
 }
}

Ответы (1 шт):

Автор решения: MiT

Асинхронное программирование.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Name App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Name Page'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //объявление переменных
  String _str;
  List _ara;

  //вызывается один раз при инициализации виджета
  @override
  void initState() {
    super.initState();
    _str = '';
    _ara = [1, 2, 3, 4, 5];
  }

  void _f1() {
    setState(() {
      //очистка вывода
      _str = '';
    });

    //цикл через 1 секунду выводит значения списка
    for (var i in _ara) {
      Future.delayed(Duration(seconds: 1), () {
        setState(() {
          _str += '$i ';
          print(_str);
        });
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.topLeft,
          child: Container(
            width: double.infinity,
            height: 45.0,
            //color: Colors.pink,
            margin: const EdgeInsets.all(10.0),
            child: FlatButton(
              onPressed: () {
                _f1();
              },
              color: Colors.black12,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0)),
              child: Text(
                'ok',
                style: TextStyle(
                  color: Colors.deepPurple,
                  fontSize: 22.0,
                ),
              ),
            ),
          ),
        ),
        Align(
          alignment: Alignment.centerLeft,
          child: Container(
            padding: const EdgeInsets.all(10.0),
            child: Text(
              _str,
              style: TextStyle(
                color: Colors.red,
                fontSize: 36.0,
              ),
            ),
          ),
        ),
      ],
    );
  }
}
→ Ссылка