How To Change Flutter Popup Menu Width

png 20220706 172037 0000

Flutter popup menu width implementation. In this post, I will be explaining how to change Flutter popup menu width using proper Flutter example for in depth understanding. I will explain each and every detail about Flutter popup menu width, what it is and its usage in Flutter popup menu.

What is Flutter Popup Menu Width?

Flutter popup menu width is as the name suggests, it is the width of the Flutter popup menu. To make the width wider, we will use padding. Let’s implement it using an easy Flutter example.

Default Flutter Popup Menu Width

Let’s see the default Flutter popup menu width. For that we have to define a simple Flutter popup menu button with just one flutter popup menu item to avoid bulkiness of code in this section. Let’s now see the default Flutter popup menu width. We will implement the Flutter popup menu button widget in the actions of the Flutter appbar. See the below code:

  PopupMenuButton(
            onSelected: (value) {},
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                    value: 'Home',
                    child: Text(
                      'Home',
                    )),
              ];
            },
          )
flutter popup menu default width
As you can see in the image above that when we click on the Flutter popup menu button then we get this default Flutter popup menu width. Let’s now see how we can change the default width of Flutter popup menu.

Change Flutter Popup Menu Width

To change the Flutter popup menu width, we have to use the padding constructor of the Flutter popup menu item. For demonstration, I have used edge in sets symmetric to give padding to only the horizontal means to increase/decrease only width of the Flutter popup menu. See the below code:

PopupMenuItem(
           padding: EdgeInsets.symmetric(horizontal: 40),
                    value: 'Home',
                    child: Text(
                      'Home',
                    ))
flutter popup menu change width
You can see in the above image that Flutter popup menu width is now increased. You can play with the values to increase or decrease the width or even height of the Flutter popup menu.
Now you have a complete and practical understanding of how to change Flutter popup menu width. I would love to answer your queries regarding Flutter popup menu width, if you have any.
I have prepared a custom and beautiful Flutter popup menu design as a treat for you in which Flutter popup menu width is also customized. The complete source code is available in the next section.

Custom Flutter Popup Menu Design Source Code

flutter popup menu width

flutter popup menu width

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.green)],
                  color: Colors.white,
                  shape: BoxShape.circle),
              child: Icon(
                Icons.more_vert,
                color: Colors.green,
              ),
            ),
            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.green,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Home',
                              style: TextStyle(
                                  color: Colors.green,
                                  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.green,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Chats',
                              style: TextStyle(
                                  color: Colors.green,
                                  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.green,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              'Sign out',
                              style: TextStyle(
                                  color: Colors.green,
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                        Divider()
                      ],
                    )),
              ];
            },
          )
        ],
      ),
    ));
  }
}

Conclusion

In conclusion, hope you now have a complete in depth understanding of how to change Flutter popup menu width. I would love to have your thoughts on this article and I would also encourage you to visit my other posts on Flutter animations, Flutter app development, Flutter widgets, Flutter templates with free source code and many more. Thanks for reading this post.

Leave a Comment

Your email address will not be published.