CODEWITHSUNDEEP
flutterpopupmenu
meditat
meditat

Reputation: 1165

How to give a height to the PopUpMenuButton in Flutter?

I am trying to create aPopupMenuButton.I have used the PopupMenuButton class.

PopupMenuButton(
  padding: EdgeInsets.only(right: 8.0),
  offset: Offset(-16, 0),
  child: Container(
    decoration: BoxDecoration(
        color: Colors.orange,
        borderRadius: BorderRadius.all(
          Radius.circular(16.0),
        )),
    padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 12.0),
    child: Text(
      "Category",
      style: TextStyle(color: Colors.white),
    ),
  ),
  itemBuilder: (_) => <PopupMenuItem<String>>[
    new PopupMenuItem<String>(
        //I want this context to be scrollable with some fixed height on the screen
        child: Row(
          children: <Widget>[
            Icon(Icons.arrow_right),
            Text("Dairy & Bakery")
          ],
        ),
        value: '1'),
  ],
)

I have tried implementing the PreferredSizeWidget but is not working on PopupMenuButton.

Upvotes: 7

Views: 9263

Answers (1)

Menelphor
Menelphor

Reputation: 614

Edit: i meant fixed height :S

PopUpMenuButton does not support a fixed height. But what u can do is adjust the PopUpMenu Package. Something similar is done here with the DropdownButton. For the PopUpMenu the implemenatition should work analogously, as both have the same strucktur. (Route, RouteLayout and PopUpMenu)

Edit:

You take a look at the the original code of the DropdownButton and then look at the changes the person did to it in the custom edition.

Then you take the code of the PopUpMenuButton and copy them into your own project and adjust them like it was done with the DropDownButton.

Then you use ure custom version of the PopUpMenuButton with the argument height.

Edit 2:

As you had some problems doing what I meant, I did it for you: Just copy this file into your directory and import it into your code. Then use CustomPopupMenuButton with a height instead of the original one.

Usage:

import 'package:flutter/material.dart';

import 'custom_popup_menu_button.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

enum WhyFarther { harder, smarter, selfStarter, tradingCharter }

class _HomeState extends State<Home> {
  WhyFarther _selection;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'it does work here',
          style: TextStyle(fontSize: 20),
        ),
      ),
      body: Center(
          child: CustomPopupMenuButton<WhyFarther>(
        onSelected: (WhyFarther result) {
          setState(() {
            _selection = result;
          });
        },
        height: 100,
        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'),
          ),
        ],
      )),
    );
  }
}

If anything is not working feel free to ask, perhaps I will look into it later.

Upvotes: 5

Related Questions