How To Change Flutter Popup Menu Shape

flutter popup menu shape

Flutter popup menu shape customization. In this post, I will be changing the Flutter popup menu shape though proper practical Flutter example code so it can be easy for you to understand how to change Flutter popup menu shape. I will be discussing everything about Flutter popup menu, what it is, its role and usage in Flutter app.

What is Flutter Popup Menu Shape?

Flutter popup menu shape, as the name suggests, it is the shape of Flutter popup menu. Flutter popup menu button is used to show a beautiful popup menu. It has a menu icon button, when we tap on it then a popup menu is show with beautiful animation. In this post, we will see how we can change the shape of that popup menu.

For demonstration, we will give our Flutter popup menu a circular shape. Let’s now start implementing the customization of Flutter popup menu shape using an easy Flutter example code.

Default Flutter Popup Menu Shape

Let’s first see what the default Flutter popup menu shape looks like. For that we have to define a simple Flutter popup menu button, item builder constructor takes a list of Flutter popup menu items. I have passed one item to it for now. I have defined that Flutter popup menu button in Flutter appbar widget using the appbar action constructor which takes a list of widgets. See the below code:

PopupMenuButton(
            onSelected: (value) {},
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                  value: 'Home',
                  child: Text(
                    'Home',
                    style: TextStyle(
                        color: Colors.black54,
                        fontSize: 13,
                        fontWeight: FontWeight.w500),
                  ),
                ),
              ];
            },
          )
flutter popup menu button icon
flutter popup menu default shape
In the first image, you can see a Flutter popup menu button icon and when we tap on it then we can see a Flutter popup menu as shown in the second image. This is the default Flutter popup menu shape. Let’s now see how we can make the Flutter popup menu shape circular.

Circular Flutter Popup Menu Shape

To make the shape circular of the popup menu, we have to use the shape constructor of the Flutter popup menu button widget class. We will pass the round rectangle border to it and by using its border radius constructor, we can change the shape of Flutter popup menu. In our case, we have pass border radius circular to make all the edges circular with same value. See the below code:

shape:
      RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(20))
flutter popup menu circular shape
In the image above, you can see that the Flutter popup menu shape is now circular.
Now you have a complete in depth practical understanding of how to change Flutter popup menu shape. If you still face any problems regarding Flutter popup menu shape then let me know in the comment section. I would love to answer them.
I also have prepared a beautiful custom Flutter popup menu design for you in which the Flutter popup menu shape is circular. The source code is given in the below section.

Beautiful Flutter Popup Menu Design Source Code

flutter popup menu shape

flutter popup menu shape

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      appBar: AppBar(
        toolbarHeight: 80,
        elevation: 0,
        backgroundColor: Colors.transparent,
        actions: [
          PopupMenuButton(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20)
                    .copyWith(topRight: Radius.circular(0))),
            padding: EdgeInsets.all(10),
            elevation: 10,
            color: Colors.grey.shade100,
            child: Container(
              alignment: Alignment.center,
              height: 45,
              width: 45,
              margin: EdgeInsets.all(20),
              decoration: BoxDecoration(
                  boxShadow: [BoxShadow(blurRadius: 4, color: Colors.black45)],
                  color: Colors.white,
                  shape: BoxShape.circle),
              child: Icon(
                Icons.more_vert,
                color: Colors.grey,
              ),
            ),
            onSelected: (value) {
              ScaffoldMessenger.of(context)
                  .showSnackBar(SnackBar(content: Text('$value item pressed')));
            },
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                    value: 'Home',
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Icon(
                              Icons.home,
                              size: 20,
                              color: Colors.black45,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Home',
                              style: TextStyle(
                                  color: Colors.black54,
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                        Divider()
                      ],
                    )),
                PopupMenuItem(
                    value: 'Chats',
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Icon(
                              Icons.chat,
                              size: 20,
                              color: Colors.black45,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Chats',
                              style: TextStyle(
                                  color: Colors.black54,
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                        Divider()
                      ],
                    )),
                PopupMenuItem(
                    value: 'Statistics',
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Icon(
                              Icons.bar_chart,
                              size: 20,
                              color: Colors.black45,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Statistics',
                              style: TextStyle(
                                  color: Colors.black54,
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                        Divider()
                      ],
                    )),
                PopupMenuItem(
                    value: 'Sign out',
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Icon(
                              Icons.logout,
                              size: 20,
                              color: Colors.black45,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Sign out',
                              style: TextStyle(
                                  color: Colors.black54,
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                        Divider()
                      ],
                    )),
              ];
            },
          )
        ],
      ),
    ));
  }
}

Conclusion

In conclusion, I hope now you have a complete understanding of how to customize Flutter popup menu shape. Use it in your code and share your experience with us using the comment section. We would love to hear how you use it in your Flutter app. We would be looking forward to your feedback. I would also encourage you to visit my other articles on Flutter app development, Flutter widgets, Flutter animations, Flutter amazing templates with free source code and many more. Thank you for reading this post.

Leave a Comment

Your email address will not be published.