Submenu has 15 items, but I only want to display 10. Is it possible to do that?

[kiam123]

Just like vscode, is there a "More..." option available?

[iakdis]

Hello @kiam123,

did I understand you correctly that you are talking about having submenus under a submenu, like in here?

If so, you can add a SubMenu to the submenu field of any MenuButton, like this:

MenuButton(
    text: const Text('Open Recent'),
    submenu: SubMenu(
      menuItems: [
          MenuButton(
              text: const Text('Reopen Closed Editor'),
              onTap: () {},
          ),
      ],
),

Let me know if that helped you!

[kiam123]

Like the following example, I generate 20 submenus, but I want to limit the display to 15, and have a "more" option to show the remaining items when clicked.

void main() {
  runApp(const MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<BarButton> _menuBarButtons() {
    return [
      BarButton(
        text: const Text(
          'File',
          style: TextStyle(color: Colors.white),
        ),
        submenu: SubMenu(
          menuItems: [
            MenuButton(
              onTap: () {},
              text: const Text('Save'),
              shortcutText: 'Ctrl+S',
            ),
            MenuButton(
              onTap: () {},
              text: const Text('Save as'),
              shortcutText: 'Ctrl+Shift+S',
            ),
            const MenuDivider(),
            MenuButton(
              onTap: () {},
              text: const Text('Open File'),
            ),
            MenuButton(
              onTap: () {},
              text: const Text('Open Folder'),
            ),
            const MenuDivider(),
            MenuButton(
              text: const Text('Preferences'),
              onTap: () {},
              icon: const Icon(Icons.settings),
              submenu: SubMenu(
                menuItems: List<MenuButton>.generate(
                  20,
                  (index) => MenuButton(
                      onTap: () {
                      },
                      text: SizedBox(
                        child: Text(
                          index.toString(),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      )),
                ),
              ),
            ),
            const MenuDivider(),
            MenuButton(
              onTap: () {},
              shortcutText: 'Ctrl+Q',
              text: const Text('Exit'),
              icon: const Icon(Icons.exit_to_app),
            ),
          ],
        ),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MenuBar(
        // Add a list of [MenuButton]. The buttons in this List are
        // displayed as the buttons on the bar itself
        barButtons: _menuBarButtons(),

        // Style the menu bar itself. Hover over BarStyle for all the options
        barStyle: const BarStyle(backgroundColor: Colors.red),

        // Style the menu bar buttons. Hover over BarButtonStyle for all the options
        barButtonStyle: const BarButtonStyle(),

        // Style the menus and submenus. Hover over MenuStyle for all the options
        menuStyle: const MenuStyle(),

        // Style the menu and submenu buttons. Hover over MenuButtonStyle for all the options
        menuButtonStyle: const MenuButtonStyle(),

        // Enable or disable the bar
        enabled: true,

        // Set the child, i.e. the application under the menu bar
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Menu Bar Example'),
          ),
          body: const Center(
            child: Text(
              'My application',
              style: TextStyle(
                fontSize: 32.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}