Add Icon to PopupMenuItem in Flutter app

Programming
, ,
1

I need to add an icon to the beginning of each PopupMenuItem in my PopupMenuButton widget. How can I do this?

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.

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'),
                 ),
                ],
              ),
            ],
          )
        ),
      ),
    );
  }
}

I need to add an icon to the beginning of each PopupMenuItem in my PopupMenuButton widget. How can I do this?

2

To add an icon to the beginning of each PopupMenuItem, you can set the child property of the PopupMenuItem to a Row widget that contains the icon and the Text widget. Here’s an example:

PopupMenuItem<WhyFarther>(
  value: WhyFarther.harder,
  child: Row(
    children: <Widget>[
      Icon(Icons.work),
      SizedBox(width: 10),
      Text('Working a lot harder'),
    ],
  ),
),

You can replace the Icon widget with any icon you want to use. Repeat this for each PopupMenuItem in your PopupMenuButton.