There is this popular pop up I see in Todo and task management apps, how can I implement this in flutter

I'm building a Todo app in Flutter and I'm looking for help implementing a custom reminder popup like the one in this image: (https://i.sstatic.net/CGbRh.jpg)

This popup should allow users to set both specific time reminders and repeating reminders, similar to the options shown in the image.

While I'm comfortable with Flutter basics, I'm not sure how to approach creating this popup functionality from scratch. I've also searched for relevant packages but haven't found any that exactly match my needs.

Any guidance on how to achieve this popup implementation would be greatly appreciated! Thank you in advance for your time and help.

Solution

If you want to do it from scratch I can help you with a good starting point, using CupertinoPicker you can achieve a pretty similar look to that example.

I made this one very quickly, so there are a lot of things to improve and change, but I think that it's pretty accurate, this can be converted to a proper widget.

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")),
            ],
          )
        ],
      ),
    ),