How To Change Flutter Popup Menu Item Height

flutter popup menu item height

Flutter popup menu item height customization. In this article, we will be changing the Flutter popup menu item height using an easy Flutter example and a proper step by step explanation so you can have a complete understanding of how to change Flutter popup menu item height. So lets jump directly into understanding what Flutter popup menu item height is and how to change it.

What is Flutter Popup Menu Item Height?

Flutter popup menu item height is as the name suggests, it is the height of the popup menu items height. We can give each item different height. In this post, we will change the default Flutter popup menu item height. First we will see what the default popup item height is, then we will implement the customization of it.

Default Flutter Popup Menu Item Height

To see the default height of the Flutter popup menu item, we have to define a simple Flutter popup menu button widget. To show the default item height, we have to define atleast one Flutter popup menu item. We will be implementing the Flutter popup menu button widget in the actions constructor of the Flutter appbar widget. See the below code:

 PopupMenuButton(
            onSelected: (value) {},
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                    value: 'Home',
                    child: Text(
                      'Home',
                      style: TextStyle(
                          color: Colors.purple,
                          fontSize: 13,
                          fontWeight: FontWeight.w500),
                    )),
              ];
            },
          )
flutter popup menu default item height
As you can see in the above image, this is the default Flutter popup menu item height. Let’s now see how we can change its height.

Change Flutter Popup Menu Item Item Height

To change the Flutter popup menu item height, we have to use the height constructor of the Flutter popup menu item. The height constructor takes a double value. For demonstration, we have given it a 70 value. See the below code:

 height: 70
flutter popup menu change item height
In the above image, you can see that the height of the Flutter popup menu item is now changed.
So in this way, you can change the height for each item of the Flutter popup menu item, you can give each of them same height or different height depending on the requirements of your Flutter app project.
If you still face any problems or have any queries related to the customization of Flutter popup menu item height then let me know in the comment section. I would love to clear all your doubts.
I have prepared a custom Flutter popup menu design for you in which Flutter popup menu item height is also customized. In the next block, the whole source code is available.

Beautiful Flutter Popup Menu Design Source Code

flutter popup menu item height

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(
            icon: Icon(
              Icons.more_vert,
              color: Colors.purple,
            ),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20)
                    .copyWith(topRight: Radius.circular(0))),
            padding: EdgeInsets.all(10),
            elevation: 10,
            color: Colors.grey.shade100,
            onSelected: (value) {
              ScaffoldMessenger.of(context)
                  .showSnackBar(SnackBar(content: Text('$value item pressed')));
            },
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                    height: 80,
                    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(
                    height: 80,
                    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(
                    height: 80,
                    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, now you have a practical knowledge of how to change Flutter popup menu item height. I would love to hear what you think about this post in comment section. I would also encourage you to drop a visit at my other posts on Flutter development, Flutter widgets, Flutter animations, amazing Flutter templates and many more. Thank you for reading.

Leave a Comment

Your email address will not be published.