MenuItemComponent class

A stateless widget rendering a single menu item with optional icon and text label.

Displays a tappable menu row with an optional leading icon and text label. Used as a building block for menu lists in MenuModal and custom menu implementations.

Rendering Structure:

InkWell (onTap: onPress)
  └─ Container (padding: 10px vertical)
     └─ Row
        ├─ Icon (if icon != null, 20px, white)
        ├─ SizedBox(width: 10) (if icon != null)
        └─ Text (name, 16px, white)

Common Use Cases:

1. Menu with Icon:

   MenuItemComponent(
     options: MenuItemOptions(
       icon: Icons.settings,
       name: "Settings",
       onPress: () {
         Navigator.push(context, MaterialPageRoute(
           builder: (_) => SettingsScreen(),
         ));
       },
     ),
   )
   

2. Menu without Icon:

   MenuItemComponent(
     options: MenuItemOptions(
       name: "About",
       onPress: () => showAboutDialog(context),
     ),
   )
   

3. Menu List:

   Column(
     children: [
       MenuItemComponent(
         options: MenuItemOptions(
           icon: Icons.videocam,
           name: "Video Settings",
           onPress: () => openVideoSettings(),
         ),
       ),
       MenuItemComponent(
         options: MenuItemOptions(
           icon: Icons.mic,
           name: "Audio Settings",
           onPress: () => openAudioSettings(),
         ),
       ),
       MenuItemComponent(
         options: MenuItemOptions(
           icon: Icons.share,
           name: "Share Event",
           onPress: () => shareEvent(),
         ),
       ),
     ],
   )
   

Styling:

• Icon: 20px, white color
• Text: 16px, white color, regular weight
• Padding: 10px vertical (symmetric)
• Icon-to-text spacing: 10px (if icon present)

Interaction:

• Uses InkWell for material ripple effect on tap
• onPress callback invoked immediately on tap
• No built-in loading state or disabled state

Typical Usage Context:

• Menu items in MenuModal
• Custom dropdown menus
• Settings lists
• Action sheets