ControlButtonsAltComponent class

A stateless widget rendering an alternative control button bar with flexible positioning.

Displays a row or column of interactive buttons (AltButton) with customizable alignment, layout direction, and styling. Alternative to ControlButtonsComponent with different layout options (position/location props vs fixed positioning).

Rendering Logic:

  1. If showAspect=false → returns empty Container
  2. If customBuilder provided → delegates full rendering
  3. Filters buttons: only renders buttons where show=true
  4. Builds layout: Row (horizontal) or Column (vertical) containing buttons
  5. Wraps layout in Container with alignment (position/location)
  6. Applies builder hooks at each layer

Layout Structure:

Container (wrapperBuilder)
  └─ Container (containerBuilder)
     └─ Align (position/location → Alignment)
        └─ Row/Column (layoutBuilder)
           ├─ GestureDetector (buttonBuilder)
           │  └─ Container (button background)
           │     └─ Column
           │        ├─ Icon (or alternateIcon if active)
           │        └─ Text (button.name)
           ├─ GestureDetector ...
           └─ ...

Button Rendering: Each AltButton becomes:

  • GestureDetector (onTap → button.onPress)
  • Container (background color: defaultBackgroundColor or pressedBackgroundColor if active)
  • Column with:
    • Icon (uses icon or alternateIcon based on active state)
    • Text (button.name)
  • Icon color: activeColor if active, else inActiveColor
  • Opacity: 0.5 if disabled, else 1.0

Position/Location Mapping:

  • position='left' + location='top' → Alignment.topLeft
  • position='center' + location='bottom' → Alignment.bottomCenter
  • position='right' + location='center' → Alignment.centerRight
  • All 9 combinations of (left/center/right) × (top/center/bottom) supported

Builder Hook Priorities:

  • customBuilder → full widget replacement (ignores all other props)
  • wrapperBuilder → wraps outer container; receives child + default
  • containerBuilder → wraps inner container; receives child + default
  • layoutBuilder → wraps Row/Column; receives buttons list + default
  • buttonBuilder → wraps individual button; receives AltButton + default

Common Use Cases:

  1. Bottom Control Bar:

    ControlButtonsAltComponent(
  options: ControlButtonsAltComponentOptions(
    buttons: [
      AltButton(name: 'Mic', icon: Icons.mic_off, onPress: toggleMic),
      AltButton(name: 'Video', icon: Icons.videocam_off, onPress: toggleVideo),
      AltButton(name: 'Share', icon: Icons.screen_share, onPress: shareScreen),
    ],
    direction: 'horizontal',
    position: 'center',
    location: 'bottom',
  ),
)

  2. Right Sidebar (Vertical):

    ControlButtonsAltComponent(
  options: ControlButtonsAltComponentOptions(
    buttons: quickActions,
    direction: 'vertical',
    position: 'right',
    location: 'center',
    buttonsContainerStyle: BoxDecoration(color: Colors.black54),
  ),
)

  3. Conditional Button Visibility:

    ControlButtonsAltComponent(
  options: ControlButtonsAltComponentOptions(
    buttons: [
      AltButton(name: 'Host Controls', icon: Icons.settings, onPress: openHostMenu, show: isHost),
      AltButton(name: 'Leave', icon: Icons.exit_to_app, onPress: leaveRoom),
    ],
    position: 'left',
    location: 'top',
  ),
)

  4. Custom Button Wrapper:

    ControlButtonsAltComponent(
  options: ControlButtonsAltComponentOptions(
    buttons: buttons,
    buttonBuilder: (context) {
      final button = context.button;
      return Badge(
        label: button.active ? Text('ON') : null,
        child: context.defaultButton,
      );
    },
  ),
)

Override Integration: Integrates with MediasfuUICustomOverrides for global styling:

overrides: MediasfuUICustomOverrides(
  controlButtonsAltOptions: ComponentOverride<ControlButtonsAltComponentOptions>(
    builder: (existingOptions) => ControlButtonsAltComponentOptions(
      buttons: existingOptions.buttons,
      direction: existingOptions.direction,
      position: 'center',
      location: 'bottom',
      buttonsContainerStyle: BoxDecoration(
        color: Colors.black87,
        borderRadius: BorderRadius.circular(32),
        boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 8)],
      ),
    ),
  ),
),

Active State Behavior:

  • When active=true: uses alternateIcon (if provided) and activeColor
  • When active=false: uses icon and inActiveColor
  • Background color switches between defaultBackgroundColor and pressedBackgroundColor

Disabled State:

  • Reduces opacity to 0.5
  • onPress callback still fires (caller should handle disabled logic)

Implementation Notes:

  • Filters buttons before rendering (only show=true buttons)
  • Direction prop directly maps to Row (horizontal) or Column (vertical)
  • Position+location props combined into single Alignment value
  • Builder hooks receive both context and default widget for wrapping patterns
Inheritance

Constructors

ControlButtonsAltComponent({Key? key, required ControlButtonsAltComponentOptions options})
const

Properties

hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
options → ControlButtonsAltComponentOptions
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

build(BuildContext context) → Widget
Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited