CODEWITHSUNDEEP
dartflutter
Robert Felker
Robert Felker

Reputation: 924

Horizontal Alignment of PopupMenuEntry

Is there a way to have items of a PopupMenu to align horizontally and not only vertically ?

I want to add more behaviours to a widget and having it passed as the child of a PopupMenu offers all the requirements except for the rendering.

Upvotes: 3

Views: 6410

Answers (2)

hasanm08
hasanm08

Reputation: 638

import 'package:flutter/material.dart';

/// An arbitrary widget that lives in a popup menu
class PopupMenuWidget<T> extends PopupMenuEntry<T> {
  const PopupMenuWidget({
    Key? key,
    required this.height,
    required this.child,
  }) : super(key: key);
  final Widget child;

  @override
  final double height;

  @override
  _PopupMenuWidgetState createState() => _PopupMenuWidgetState();

  @override
  bool represents(T? value) => false;
}

class _PopupMenuWidgetState extends State<PopupMenuWidget> {
  @override
  Widget build(BuildContext context) => widget.child;
}

use it in null-safety applications

Upvotes: 2

Collin Jackson
Collin Jackson

Reputation: 116728

Flutter's popup menu has a lot of internal constants and it requires that the axis of the popup is vertical. You can make a copy of that file and start editing it if you want to change the axis and have full control over the layout and sizing.

If you're not too picky about layout, you can fake it by embedding a Row widget as a single popup menu item. Here's some code demonstrating that approach:

screenshot

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

/// An arbitrary widget that lives in a popup menu
class PopupMenuWidget<T> extends PopupMenuEntry<T> {
  const PopupMenuWidget({ Key key, this.height, this.child }) : super(key: key);

  @override
  final Widget child;

  @override
  final double height;

  @override
  bool get enabled => false;

  @override
  _PopupMenuWidgetState createState() => new _PopupMenuWidgetState();
}

class _PopupMenuWidgetState extends State<PopupMenuWidget> {
  @override
  Widget build(BuildContext context) => widget.child;
}


class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        actions: <Widget>[
          new PopupMenuButton<String>(
            onSelected: (String value) {
              print("You selected $value");
            },
            itemBuilder: (BuildContext context) {
              return [
                new PopupMenuWidget(
                  height: 40.0,
                  child: new Row(
                    children: [
                      new IconButton(
                        icon: new Icon(Icons.add),
                        onPressed: () => Navigator.pop(context, 'add')),
                      new IconButton(
                        icon: new Icon(Icons.remove),
                        onPressed: () => Navigator.pop(context, 'remove')),
                    ],
                  ),
                ),
              ];
            }
          ),
        ],
      ),
    );
  }
}

Upvotes: 15

Related Questions