如何连续添加倒数计时器，并在振子达到零时触发事件？

Question

因此，在开始工作时，我尝试添加一个从20:00分钟开始逐渐递减至零的倒数计时器。

-计时器正在连续添加。

-零时显示弹出窗口。

以下是我的代码。

class TimerPage extends StatefulWidget {
  TimerPage({Key key}) : super(key: key);

  TimerPageState createState() => new TimerPageState();
}

class TimerPageState extends State<TimerPage> {
  final items = <Widget>[
    ListTile(
      leading: Icon(Icons.photo_camera),
      title: Text('Camera'),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.photo_library),
      title: Text('Select'),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.delete),
      title: Text('Delete'),
      onTap: () {},
    ),
    Divider(),
    if (true)
      ListTile(
        title: Text('Cancel'),
        onTap: () {},
      ),
  ];
  _showSheet() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext _) {
        return Container(
          child: Wrap(
            children: items,
          ),
        );
      },
      isScrollControlled: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Row(
        children: <Widget>[
          IconButton(
              icon: Icon(
                Icons.pause_circle_outline,
                color: Colors.blue,
              ),
              onPressed: _showSheet),
          Text('20:00') // this is where dynamic text timer will be added
          Spacer(),
          FlatButton(
              onPressed: _showSheet,
              child: Text(
                "Submit",
                style: TextStyle(
                  fontSize: 18,
                  fontFamily: 'lato',
                  color: Colors.blue,
                ),
              )),
        ],
      ),
    ]);
  }
}

上面的代码是我正在尝试做的一个正在进行的项目。该项目基本上是在进行基于时间的考试。

另外，如果您能推荐我一个好的总体教程或文档，以便我能理解颤振，那就太好了。

Answer 1

尝试一下：

class TimerPage extends StatefulWidget {
  TimerPage({Key key}) : super(key: key);

  TimerPageState createState() => new TimerPageState();
}

class TimerPageState extends State<TimerPage> {
  final items = <Widget>[
    ListTile(
      leading: Icon(Icons.photo_camera),
      title: Text('Camera'),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.photo_library),
      title: Text('Select'),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.delete),
      title: Text('Delete'),
      onTap: () {},
    ),
    Divider(),
    if (true)
      ListTile(
        title: Text('Cancel'),
        onTap: () {},
      ),
  ];

  _showSheet() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext _) {
        return Container(
          child: Wrap(
            children: items,
          ),
        );
      },
      isScrollControlled: true,
    );
  }

  int _count = 20 * 60;

  @override
  void initState() {
    super.initState();
    Timer.periodic(Duration(seconds: 1), (timer) {
      --_count;
      if (_count < 0)
        timer.cancel();
      else
        setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Row(
        children: <Widget>[
          IconButton(
              icon: Icon(
                Icons.pause_circle_outline,
                color: Colors.blue,
              ),
              onPressed: _showSheet),
          Text('${_formatSeconds(_count)}'), // this is where dynamic text timer will be added
          Spacer(),
          FlatButton(
            onPressed: _showSheet,
            child: Text(
              "Submit",
              style: TextStyle(
                fontSize: 18,
                fontFamily: 'lato',
                color: Colors.blue,
              ),
            ),
          ),
        ],
      ),
    ]);
  }

  String _formatSeconds(int count) {
    int hours = count ~/ 3600;
    int secondsLeft = count - hours * 3600;
    int minutes = secondsLeft ~/ 60;
    int seconds = secondsLeft - minutes * 60;

    String formattedTime = "";
    if (minutes < 10) formattedTime += "0";
    formattedTime = "$minutes:";

    if (seconds < 10) formattedTime += "0";
    formattedTime += "$seconds";

    return formattedTime;
  }
}

Answer 2

  import 'package:flutter/material.dart';
 import 'dart:async';

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

class MyApp extends StatelessWidget {
@override
 Widget build(BuildContext context) {
 return MaterialApp(
  home: Scaffold(
    backgroundColor: Colors.grey,
    body: TimerPage(),
  ),
 );
}
}
 class TimerPage extends StatefulWidget {
 TimerPage({Key key}) : super(key: key);

 TimerPageState createState() => new TimerPageState();
 }

class TimerPageState extends State<TimerPage> {


int _start = 20;
Timer _timer ;

void startTimer() {
const oneSec = const Duration(seconds: 1);
_timer = new Timer.periodic(
  oneSec,
      (Timer timer) => setState(
        () {
        if (_start < 1) {
          showDialog(context: context,builder: (context) {
            return AlertDialog(
              title: Text(" your  Dialog .... "),
            );
           });
          timer.cancel();
        } else {
          _start = _start - 1;
       }
      },
     ),
     );
    }

    @override
   void initState() {
    startTimer();
   // TODO: implement initState
   super.initState();
   }



 final items = <Widget>[
   ListTile(
    leading: Icon(Icons.photo_camera),
    title: Text('Camera'),
    onTap: () {},
   ),
   ListTile(
   leading: Icon(Icons.photo_library),
   title: Text('Select'),
   onTap: () {},
    ),
  ListTile(
   leading: Icon(Icons.delete),
   title: Text('Delete'),
   onTap: () {},
  ),
    Divider(),
   if (true)
    ListTile(
    title: Text('Cancel'),
    onTap: () {},
   ),
   ];
   _showSheet() {
  showModalBottomSheet(
  context: context,
  builder: (BuildContext _) {
    return Container(
      child: Wrap(
        children: items,
      ),
    );
   },
    isScrollControlled: true,
  );
 }

 @override
 void dispose() {
 _timer.cancel();
 // TODO: implement dispose
  super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 return Column(children: [
   Row(
    children: <Widget>[
      IconButton(
          icon: Icon(
            Icons.pause_circle_outline,
            color: Colors.blue,
          ),
          onPressed: _showSheet),
       Text('Time $_start'), // ,this is where dynamic text timer added
       Spacer(),
       FlatButton(
          onPressed: _showSheet,
          child: Text(
            "Submit",
            style: TextStyle(
              fontSize: 18,
              fontFamily: 'lato',
              color: Colors.blue,
            ),
          )),
       ],
    ),
    ]);
  }
 }