How To Change Popup Menu Icon Flutter

change popup menu icon flutter

Change popup menu icon Flutter. In this post, I will be discussing and implementing how to change popup menu icon Flutter. I will also discussing what change popup menu icon Flutter means, its role and usage in Flutter popup menu. So let’s not waste anymore more and start discussing with proper Flutter example code of how to change popup menu icon Flutter.

What is Change Popup Menu Icon Flutter?

The change popup menu icon Flutter, as the name suggests, it is changing the icon of the Flutter popup menu button. In Flutter popup menu button, we have an icon and when we tap on this icon, the Flutter popup menu appears and in this post we will understand practically with proper and easy Flutter code example of that change that icon in Flutter popup menu button.

Default Popup Menu Icon Flutter

Let’s see the default popup menu icon Flutter. For that, we have to define a simple Flutter popup menu button, we will also use one Flutter popup menu item so we have at least see a Flutter popup menu when we click on the Flutter popup menu icon. We will define the popup menu button in the actions of the Flutter appbar. See the below code:

PopupMenuButton(
            itemBuilder: (context) {
              return [
                   PopupMenuItem(child: Text('Home'))];
            },
          )
flutter popup menu default icon
As you can see in the above image, this is the default Flutter popup menu icon, the three dots having vertical direction. Now let’s see how we can change popup menu icon Flutter.

Change Popup Menu Icon Flutter

To change popup menu icon Flutter, we have to use the icon constructor of the Flutter popup menu button widget. It takes a widget so we have passed it an icon widget for demonstration purpose. See the below code:

icon: Icon(Icons.more)
change popup menu icon flutterAs you can see in the above image, the icon of Flutter popup menu button is now changed.
So this is how change popup menu icon Flutter is implemented. If you still have any queries regarding change popup menu icon Flutter then let me know in the comment section. I would love to clear your doubts.
I also have prepared a beautiful custom Flutter popup menu design for you in which change popup menu icon Flutter is also implemented. Below is the complete source code for it.

Beautiful Flutter Popup Menu Design Source Code

change popup menu icon flutter

change popup menu icon flutter

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,
              color: Colors.green,
            ),
            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(
                    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, you now have a complete practical understanding of how to change popup menu icon Flutter. Your feedback is well appreciated and I would also encourage you to visit my other articles 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.