Custom flutter dropdown menu

After extensive searching, I could not find an article or a video on YouTube that deals with the idea of ​​a custom drop-down menu similar to the Facebook notifications menu.. That is why I ask for help in implementing it

enter image description here

>Solution :

with PopupMenuButton you can make custom menu as you want:

appBar: AppBar(
          actions: [
            PopupMenuButton(
              // add icon, by default "3 dot" icon
              icon: Icon(Icons.notification_add),
              position: PopupMenuPosition.under,
              itemBuilder: (context) {
                return [
                  PopupMenuItem<int>(
                    value: 0,
                    child: Column(
                      children: [
                        Row(
                          children: const [
                            Text(
                              "2 hours ago",
                              style: TextStyle(fontStyle: FontStyle.italic),
                            )
                          ],
                        ),
                        const Text(
                          "If you don't want to be notified this way each time you receive notification",
                        ).paddingAll(10),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            TextButton(
                              onPressed: () {},
                              child: const Text("Show more"),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                  PopupMenuItem<int>(
                    value: 1,
                    child: Column(
                      children: [
                        Row(
                          children: const [
                            Text(
                              "2 hours ago",
                              style: TextStyle(fontStyle: FontStyle.italic),
                            )
                          ],
                        ),
                        const Text(
                          "If you don't want to be notified this way each time you receive notification",
                        ).paddingAll(10),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            TextButton(
                              onPressed: () {},
                              child: const Text("Show more"),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                ];
              },
              onSelected: (value) {
                if (value == 0) {
                  print("first");
                } else if (value == 1) {
                  print("second");
                }
              },
            ),
          ],
        ),

enter image description here

Leave a Reply