CODEWITHSUNDEEP
flutterdart
Taz
Taz

Reputation: 1971

How to change PopupMenuItem width in Flutter?

My code is like this
enter image description here

I want make Item width to match parent but I can't change PopupMenuItem width.

I tried text wrap Continer and set width exactly but it not working.

How can I do?

Upvotes: 9

Views: 15392

Answers (3)

Naushad Husain
Naushad Husain

Reputation: 31

PopupMenuButton(
   offset: Offset(0, 52.sp),
   constraints: BoxConstraints(
     minWidth: 0.5.sw,
     maxWidth: 0.5.sw,
   ),
 
   child: Text("Open PopupMenu"),
   itemBuilder: (BuildContext context) => [
     PopupMenuItem(
         // padding: EdgeInsets.all(20.sp),
         child: Container(width:500 , height: 200,child:Text("Item 1")))
   ],
 )

Upvotes: 3

Anaz
Anaz

Reputation: 123

change the value of maxWidth in the constraints

sample code

 Widget _offsetPopup() => PopupMenuButton<int>(
constraints: BoxConstraints(
    minWidth: 2.0 * 56.0,
    maxWidth: MediaQuery.of(context).size.width,
  ),
  itemBuilder: (context) => [
        PopupMenuItem(
          value: 1,
          child: Container(
            width: MediaQuery.of(context).size.width,
            child: Expanded(
              child: Text(
                "To Receive",
                style: TextStyle(
                    fontSize: 16,
                    color: Colors.black,
                    fontWeight: FontWeight.w700),
              ),
            ),
          ),
        ),
      ],
  icon: Icon(Icons.add),
 

  offset: Offset(0, 40));

Upvotes: 5

FloW
FloW

Reputation: 1266

container with inside the popupmenuitem

        new PopupMenuButton<Choice>(
            onSelected: _select,
            itemBuilder: (BuildContext context) {
              return choices.map((Choice choice) {
                return PopupMenuItem<Choice>(
                  value: choice,
                  child: new Container(
                    width: 100.0,
                    child: Text(choice.title)
                  ),
                );
              }).toList();
            },
          ),

other code for the complete example

  void _select(Choice choice) {
      print(choice);
  }

class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'Car', icon: Icons.directions_car),
  const Choice(title: 'Bicycle', icon: Icons.directions_bike),
  const Choice(title: 'Boat', icon: Icons.directions_boat),
  const Choice(title: 'Bus', icon: Icons.directions_bus),
  const Choice(title: 'Train', icon: Icons.directions_railway),
  const Choice(title: 'Walk', icon: Icons.directions_walk),
];

Upvotes: 7

Related Questions