Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add an Icon at the beginning of PopupMenuItem in flutter app

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

like image 478
Muje Avatar asked Jan 05 '20 10:01

Muje


People also ask

How do I add icons before my text flutters?

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.

How do you change the Popmenubutton icon in 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.

How do I add icons to my row in Flutter?

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.


1 Answers

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

like image 63
Staafsak Avatar answered Nov 01 '22 02:11

Staafsak