Как добавить таймер в флаттер приложение при ответе на вопрос

Question

Приветствие! Я новичок в изучении флаттера и дротика, в настоящее время я работаю над приложением викторины в флаттере, я хочу добавить в приложение функцию таймера и рассчитать время каждого вопроса.

Answer 1

Надеюсь, это поможет, это начинается с 60

int t = 60;
countDown(){
  Future.doWhile(()async {
    //this changes the value by -1 every second until it reaches zero
    await Future.delayed(Duration(seconds: 1),);
    setState(() {
      //add text widget in your build method which takes t as the data
      t--;
    });
    return t!=0;
  });
}

вызов метода countDown, когда вы хотите, чтобы таймер начал

Answer 2

Вы можете сделать это, используя пакет quiver, вот простой пример:

class QuizPage extends StatefulWidget {

  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  final _formKey = GlobalKey<FormState>();

  String answer;
  int seconds;

  @override
  void initState() {
    super.initState();

    seconds = 60;
    startTimer();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QuizPage'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            Text('Question?'),
            Text('Seconds left: $seconds'),
            TextFormField(
              onSaved: (result) =>  answer = result,
            ),
            RaisedButton(
              child: Text('Answer!'),
              onPressed: seconds != 0 ? (){
                _formKey.currentState.save();
                print(answer);
              } : null,
            )
          ],
        ),
      ),
    );
  }

  void startTimer(){
    CountdownTimer(Duration(seconds: seconds), Duration(seconds: 1)).listen((data){
    })..onData((data){
      setState(() {
        seconds--;
      });
    })..onDone((){
      setState(() {
        seconds = 0;
      });
    });
  }
}

Здесь вы можете ответить через 60 секунд, но когда время истекло, кнопка больше не будет работать.

И наоборот

Также вы можете рассчитать время от 0 и остановить таймер после ответа:

class QuizPage extends StatefulWidget {

  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  final _formKey = GlobalKey<FormState>();

  String answer;
  Timer timer;
  int seconds;

  @override
  void initState() {
    super.initState();
    seconds = 0;
    timer = Timer.periodic(Duration(seconds: 1), (Timer t) {
      setState(() {
        seconds++;
      });
    });
  }

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QuizPage'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            Text('Question?'),
            Text('Seconds passed: $seconds'),
            TextFormField(
              onSaved: (result) =>  answer = result,
            ),
            RaisedButton(
              child: Text('Answer!'),
              onPressed:(){
                timer?.cancel();
                _formKey.currentState.save();
                print(answer);
                print('In $seconds seconds');
              },
            )
          ],
        ),
      ),
    );
  }
}