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'))];
},
)
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)
As you can see in the above image, the icon of Flutter popup menu button is now changed.Beautiful Flutter Popup Menu Design Source Code
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.
