Как я могу приостановить или возобновить asyn c задачу, используя кнопку в флаттере?

Question

Я создаю приложение флаттера, которое требует изменения изображения через определенный промежуток времени. Я думал, что использование l oop с методом сна внутри может решить проблему. Но это не так, Имидж меняется только после окончания l oop. Пользовательский интерфейс приложения также зависает.

Итак, я использовал задачу asyn c, которой не могу управлять с помощью кнопки.

Желаемый результат: изображение следует менять через каждые 10 секунд и пользователь может приостановить или возобновить выполнение метода.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Center(
        child: Test(
        ),
      ),
    )
  );
  }}
class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  int imgnumber=1;
  int varToCheckButtonPress = 0;
  String BtnTxt = "START";
  void inc(){
    while(imgnumber<10)
      {
        print(imgnumber);
        await Future.delayed(const Duration(seconds: 10));
        setState(() {
          imgnumber++;
        });
      }
  }
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(flex: 1,
          child: Container(
            child: Image.asset('images/'+imgnumber.toString()+'.png'),
            height: 500,
            width:500,
            color: Colors.green,
          ),
        ),
        FlatButton(
          child: Text(BtnTxt),
          onPressed: (){
            if (varToCheckButtonPress == 0) {
              setState(() {
                inc();
                BtnTxt = 'PAUSE';
                varToCheckButtonPress = 1;
              });
            } else if (varToCheckButtonPress == 1) {
              setState(() {
                BtnTxt = 'RESUME';
                varToCheckButtonPress = 0;
              });
            }
          },
        )
      ],
    );
  }
}

Я хочу, чтобы пользователь управлял пользовательским интерфейсом с помощью одной кнопки , ведя себя как START, PAUSE и RESUME . Можем ли мы использовать обычную функцию для реализации этой функции?

Answer 1

Вы должны использовать шаблон Blo c для управления вашими состояниями, например: StreamBuilder, Providers, и сделать таймер для отправки sh new imageUrl в приемник и позволить streamBuilder получить последний imageUrl.

Что касается вашей кнопки, все, что она контролирует, это таймер. Когда вы нажимаете кнопку воспроизведения, новый imageUrl будет продолжать нажимать на приемник, в то время как вы нажимаете паузу, просто останавливаете таймер, и новый URL-адрес изображения не будет выдвигать новый imageUrl в приемник, и, конечно, сбрасывать таймер при нажатии кнопка остановки.

Вот очень подробный учебник по Blo c, которому вы можете следовать: Средний