我在Todo和任务管理应用程序中看到这个流行的弹出窗口，我如何在flutter中实现它

Question

我正在 Flutter 中构建一个 Todo 应用程序，并且正在寻求帮助来实现自定义提醒弹出窗口，如下图所示：()

此弹出窗口应允许用户设置特定时间提醒和重复提醒，类似于图中显示的选项。

虽然我对 Flutter 基础知识很熟悉，但我不确定如何从头开始创建此弹出功能。我也搜索过相关的软件包，但没有找到完全符合我需求的。

任何有关如何实现此弹出窗口实施的指导将不胜感激！预先感谢您的时间和帮助。

Answer 1

如果您想从头开始，我可以帮助您有一个良好的起点，使用 CupertinoPicker 您可以实现与该示例非常相似的外观。

我很快就做出了这个，所以有很多东西需要改进和改变，但我认为它非常准确，这可以转换为合适的小部件。

Container(
      width: 350,
      height: 325,
      padding: const EdgeInsets.all(15),
      alignment: Alignment.center,
      decoration: const BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(30))),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            margin: EdgeInsets.only(left: 10, top: 10),
            alignment: Alignment.centerLeft,
            child: Text(
              "Reminder time custom",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                width: 100,
                height: 150,
                child: CupertinoPicker(itemExtent: 40, onSelectedItemChanged: (i) {}, children: [
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "1",
                        style: TextStyle(fontSize: 18),
                      )),
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "2",
                        style: TextStyle(fontSize: 18),
                      )),
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "3",
                        style: TextStyle(fontSize: 18),
                      )),
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "4",
                        style: TextStyle(fontSize: 18),
                      )),
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "5",
                        style: TextStyle(fontSize: 18),
                      )),
                ]),
              ),
              SizedBox(
                width: 100,
                height: 100,
                child: CupertinoPicker(itemExtent: 40, onSelectedItemChanged: (i) {}, children: [
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "Hours",
                        style: TextStyle(fontSize: 18),
                      )),
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "Days",
                        style: TextStyle(fontSize: 18),
                      )),
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "Weeks",
                        style: TextStyle(fontSize: 18),
                      )),
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "Months",
                        style: TextStyle(fontSize: 18),
                      )),
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "Years",
                        style: TextStyle(fontSize: 18),
                      )),
                ]),
              ),
              SizedBox(
                width: 100,
                height: 100,
                child: CupertinoPicker(itemExtent: 40, onSelectedItemChanged: (i) {}, children: [
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "Before",
                        style: TextStyle(fontSize: 18),
                      )),
                  Container(
                      alignment: Alignment.center,
                      height: 40,
                      child: Text(
                        "After",
                        style: TextStyle(fontSize: 18),
                      )),
                ]),
              ),
            ],
          ),
          Container(
            width: 250,
            height: 50,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
                color: Color.fromARGB(255, 240, 240, 240), borderRadius: BorderRadius.all(Radius.circular(25))),
            child: Text(
              "00/00/0000, 00:00 AM",
              style: TextStyle(fontSize: 15, color: Colors.black87),
            ),
          ),
          SizedBox(
            width: 1,
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              TextButton(onPressed: () {}, child: Text("CANCEL")),
              TextButton(onPressed: () {}, child: Text("SAVE")),
            ],
          )
        ],
      ),
    ),