Expandable Menu

The menu system employed in the Focus UI kit is an expendable menu. This functionality is achieved through widget classes such as FUIExpMenu and FUIMenuItem. The menu can be controlled via the FUIExpMenuController.

The necessary menu widget classes could be found in the directory of:

lib/focus_ui_kit/components/menu/

The FUIMenuTheme class is the theme class holds the default theme variables/values for the expendable menu and the menu items.

Accessing the theme

To access the theme class object, do the following:

@override
Widget build(BuildContext context) {
    FUIMenuTheme fuiMenuTheme = context.theme.fuiMenu;
    
    // ...
}

Usage

A general way to use the FUIExpMenu is as follows:

var menuItemKey1 = ValueKey('menuItemKey1');
var menuItemKey2 = ValueKey('menuItemKey2');
var submMenuItemKey1 = ValueKey('submMenuItemKey1');
var submMenuItemKey2 = ValueKey('submMenuItemKey2');

FUIExpMenu(
    fuiMenuItems: [
        FUIMenuItem(
            key: menuItemKey1,
            label: const Text('Item Without Sub-Items'),
            icon: const Icon(LineAwesome.chart_bar),
            selected: true,
            onPressed: () { // Do something... },
        ),
        FUIMenuItem(
            key: menuItemKey2,
            label: const Text('Item With Sub-Items'),
            icon: const Icon(LineAwesome.chart_bar),
            onPressed: () { // Do something... },
            fuiSubMenuItems: [
                FUISubMenuItem(
                    key: submMenuItemKey1,
                    label: const Text('Sub Item 1'),
                    onPressed: () { // Do something... },
                ),
                FUISubMenuItem(
                    key: submMenuItemKey2,
                    label: const Text('Sub Item 2'),
                    onPressed: () { // Do something... },
                ),
            ],
        ),
    ],
);

With a controller (initialization)

To implement a controller that programmatically controls the expansion and collapse of the menu, please ensure that the controller is disposed of when it is no longer in use.

// Do this in a Stateful Widget...

late FUIExpMenuController menuCtrl;

@override
void initState() {
    super.initState();
    menuCtrl = FUIExpMenuController();
}

@override
dispose() {
    menuCtrl.close();
    
    super.dispose();
}

@override
Widget build(BuildContext context) {
    // ...
    
    var menu = FUIExpMenu(
        fuiMenuController: menuCtrl,
        fuiMenuItems: [
            // The rest of the menu items...
        ]
    );
    
    // ...
}

menuCtrl.trigger(
    FUIExpMenuEvent(
        selectedMenuKey: menuItemKey2,
    ),
);

menuCtrl.trigger(
    FUIExpMenuEvent(
        selectedSubMenuKey: submMenuItemKey2,
    ),
);

menuCtrl.trigger(
    FUIExpMenuEvent(
        selectedMenuKey: menuItemKey2,
        selectedSubMenuKey: submMenuItemKey2,
    ),
);

27 March 2025

Focus Theme UI Kit Documentation Help

Widget Class Location

Widget Theme Location

Accessing the theme

Usage

With a controller (initialization)

To select a menu item via controller

To select a sub-menu item

To select a manu & a sub-menu item simultaneously