How To Change Flutter Popup Menu Icon Size

flutter popup menu icon size

Flutter popup menu icon size customization. In this post, I will be changing the Flutter popup menu icon size with proper explanation using an easy Flutter example code. I will implement Flutter popup menu icon size customization using step by step explanation so you don’t have any queries left regarding how to change Flutter popup menu icon size.

What is Flutter Popup Menu Icon Size?

Flutter popup menu icon size is the size of the icon of the Flutter popup menu button. In this post, we will also see what the default Flutter popup menu icon size is and how we will change it. So let’s get right into explaining how to change Flutter popup menu icon size.

Default Flutter Popup Menu Icon Size

To see the default Flutter popup menu icon size, we have to define the Flutter popup menu button widget, we also have given it one Flutter popup menu item so when we tap on the Flutter popup menu icon then it will show a Flutter popup menu icon with one item. We have defined Flutter popup menu icon inside the actions constructor of the Flutter appbar widget. See the below code:

PopupMenuButton(
            onSelected: (value) {},
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                    padding: EdgeInsets.only(right: 50, left: 20),
                    value: 'Home',
                    child: Text(
                      'Home',
                      style: TextStyle(
                          color: Colors.green,
                          fontSize: 13,
                          fontWeight: FontWeight.w500),
                    )),
              ];
            },
          )

flutter popup menu icon default size

As you can see in the above image, this is the default Flutter popup menu icon size. Now let’s see how we can change the size of the Flutter popup menu icon.

Change Flutter Popup Menu Icon Size

To change the Flutter popup menu icon size, we have to use the icon size constructor of the Flutter popup menu button widget class. It takes a double value. For demonstration, we have passed it a greater value to show that the size of the icon changes with it. See the below code:

iconSize: 30
flutter popup menu icon change size
As you can see in the above image, the size of the popup menu icon is now bigger means the size is now changed.
So this is how you can change the Flutter popup menu icon size. You can comment if you still have any queries regarding the customization of Flutter popup menu icon size. I would love to answer.
I have designed a beautiful custom Flutter popup menu for you in which Flutter popup menu icon size is also customized. The complete source code is available in the below block.

Custom Flutter Popup Menu Design Source Code

flutter popup menu icon size

flutter popup menu icon size

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(
            iconSize: 40,
            icon: Icon(
              Icons.more_vert,
              color: Colors.purple,
            ),
            elevation: 10,
            color: Colors.grey.shade100,
            onSelected: (value) {
              ScaffoldMessenger.of(context)
                  .showSnackBar(SnackBar(content: Text('$value item pressed')));
            },
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                    padding: EdgeInsets.only(right: 50, left: 20),
                    value: 'Home',
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Icon(
                              Icons.home,
                              size: 20,
                              color: Colors.purple,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Home',
                              style: TextStyle(
                                  color: Colors.purple,
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                        Divider()
                      ],
                    )),
                PopupMenuItem(
                    padding: EdgeInsets.only(right: 50, left: 20),
                    value: 'Chats',
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Icon(
                              Icons.chat,
                              size: 20,
                              color: Colors.purple,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Chats',
                              style: TextStyle(
                                  color: Colors.purple,
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                        Divider()
                      ],
                    )),
                PopupMenuItem(
                    padding: EdgeInsets.only(right: 50, left: 20),
                    value: 'Sign out',
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Icon(
                              Icons.logout,
                              size: 20,
                              color: Colors.purple,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Sign out',
                              style: TextStyle(
                                  color: Colors.purple,
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                        Divider()
                      ],
                    )),
              ];
            },
          )
        ],
      ),
    ));
  }
}

Conclusion

In conclusion, hope you now have an accurate practical understanding of how to change Flutter popup menu icon size. Your feedback is very much appreciated, and I invite you to also take a look at my other articles on Flutter animations, Flutter app development, Flutter widgets, Flutter templates with source code, and much more. Thank you for reading this post.

Leave a Comment

Your email address will not be published.