Make popup menu scrollable when it doesn't fit on screen

[nghialm269]

Hi,
Thanks for the great plugin.

I have a popup menu button, when it's at the top of the page, the menu will fit on the screen. But when it's at the middle of the page, the menu goes out of the screen.

How can I make the menu scrollable only when it doesn't fit on screen?

[malikwang]

plz paste the code to verify this problem.

[nghialm269]

Code

import 'package:flutter/material.dart';
import 'package:custom_pop_up_menu/custom_pop_up_menu.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: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CustomPopupMenuController _controller = CustomPopupMenuController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: CustomPopupMenu(
        child: Container(
          child: Icon(Icons.add_circle_outline, color: Colors.red),
          padding: EdgeInsets.all(10),
        ),
        menuBuilder: () => ClipRRect(
          borderRadius: BorderRadius.circular(5),
          child: Container(
            color: const Color(0xFF4C4C4C),
            child: IntrinsicWidth(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: List.generate(15, (index) => "List $index")
                    .map(
                      (item) => GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onTap: _controller.hideMenu,
                        child: Container(
                          height: 40,
                          padding: EdgeInsets.symmetric(horizontal: 20),
                          child: Row(
                            children: <Widget>[
                              Expanded(
                                child: Container(
                                  margin: EdgeInsets.only(left: 10),
                                  padding: EdgeInsets.symmetric(vertical: 10),
                                  child: Text(
                                    item,
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 12,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    )
                    .toList(),
              ),
            ),
          ),
        ),
        pressType: PressType.singleClick,
        verticalMargin: -10,
        controller: _controller,
      ),
    );
  }
}

Image:

There are two problems here:

• Although there's a lot of space in the bottom direction, the popup goes upward.
• The popup goes out of the screen, how can I make it scrollable in this case?

[malikwang]

Although there's a lot of space in the bottom direction, the popup goes upward.
This problem has been verified as bug(maybe position auto calculate error relatived with screen size).
if you change List.generate(15, (index) => "List $index") to 10 or small, it would display in bottom direction.

The popup goes out of the screen, how can I make it scrollable in this case?
As a temporary solution for the first problem, u can make this menu scrollable, but must assigned with a height.

menuBuilder: () => ClipRRect(
          borderRadius: BorderRadius.circular(5),
          child: Container(
            height: 300,
            color: const Color(0xFF4C4C4C),
            child: SingleChildScrollView(
              child: IntrinsicWidth(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: List.generate(30, (index) => "List $index")
                      .map(
                        (item) => GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: _controller.hideMenu,
                          child: Container(
                            height: 40,
                            padding: EdgeInsets.symmetric(horizontal: 20),
                            child: Row(
                              children: <Widget>[
                                Expanded(
                                  child: Container(
                                    margin: EdgeInsets.only(left: 10),
                                    padding: EdgeInsets.symmetric(vertical: 10),
                                    child: Text(
                                      item,
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 12,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      )
                      .toList(),
                ),
              ),
            ),
          ),
        )

Code

import 'package:flutter/material.dart';
import 'package:custom_pop_up_menu/custom_pop_up_menu.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: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CustomPopupMenuController _controller = CustomPopupMenuController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: CustomPopupMenu(
        child: Container(
          child: Icon(Icons.add_circle_outline, color: Colors.red),
          padding: EdgeInsets.all(10),
        ),
        menuBuilder: () => ClipRRect(
          borderRadius: BorderRadius.circular(5),
          child: Container(
            color: const Color(0xFF4C4C4C),
            child: IntrinsicWidth(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: List.generate(15, (index) => "List $index")
                    .map(
                      (item) => GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onTap: _controller.hideMenu,
                        child: Container(
                          height: 40,
                          padding: EdgeInsets.symmetric(horizontal: 20),
                          child: Row(
                            children: <Widget>[
                              Expanded(
                                child: Container(
                                  margin: EdgeInsets.only(left: 10),
                                  padding: EdgeInsets.symmetric(vertical: 10),
                                  child: Text(
                                    item,
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 12,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    )
                    .toList(),
              ),
            ),
          ),
        ),
        pressType: PressType.singleClick,
        verticalMargin: -10,
        controller: _controller,
      ),
    );
  }
}

Image:

There are two problems here:

• Although there's a lot of space in the bottom direction, the popup goes upward.
• The popup goes out of the screen, how can I make it scrollable in this case?

[nghialm269]

but must assigned with a height.

Can the library somehow constraints the height, so that I could use something like LayoutBuilder to build the menu?