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

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('$_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,
              ),
            ),
          ),
        ],
      ),
    ]);
  }
}