I have a PopupMenuButton
widget in which I want to add an icon at the beginning of each PopupMenuItem
. I've been trying to find a way to do this but I'm not finding any.
Below is the **main.dart** file.
import 'package:flutter/material.dart';
import 'package:practical_0/homepage.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue
),
home: Homepage(),
);
}
}
Below is the home.dart file. This is where I have implemented the PopupMenuButton. I want the icon to appear at the beginning of PopupMenuItem
before the text
.
import 'package:flutter/material.dart';
enum WhyFarther { harder, smarter, selfStarter, tradingCharter }
class Homepage extends StatelessWidget {
final double heightFactor = 600/896;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
return new Card(
new Row(
children: <Widget>[
PopupMenuButton<WhyFarther>(
onSelected: (WhyFarther result) { setState(() { _selection = result; }); },
itemBuilder: (BuildContext context) => <PopupMenuEntry<WhyFarther>>[
const PopupMenuItem<WhyFarther>(
value: WhyFarther.harder,
child: Text('Working a lot harder'),
),
const PopupMenuItem<WhyFarther>(
value: WhyFarther.smarter,
child: Text('Being a lot smarter'),
),
const PopupMenuItem<WhyFarther>(
value: WhyFarther.selfStarter,
child: Text('Being a self-starter'),
),
const PopupMenuItem<WhyFarther>(
value: WhyFarther.tradingCharter,
child: Text('Placed in charge of trading charter'),
),
],
),
],
)
),
),
);
}
}
The simplest way to create a button with icon and text in Flutter is to use the new Material button called ElevatedButton with an icon constructor. ElevatedButton. icon() gives you the ability to add the icon and label parameter to the button.
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.
You can use Icon() widget to add icons to your Flutter App. You have to pass the icon data as an icon to this widget. You can use default available Material icons with Icons class.
I would actually suggest using a ListTile like this:
PopupMenuItem<WhyFarther>(
value: WhyFarther.harder,
child: ListTile(
leading: Icon(Icons.work),
title: Text('Working a lot harder'),
),
)
Checkout Flutter Gallery for a live example: https://gallery.flutter.dev/#/demo/menu
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With