ControlButtonsAltComponentOptions class

Configuration options for the ControlButtonsAltComponent.

Provides properties to customize an alternative control button bar with flexible positioning, alignment, and layout direction. Similar to ControlButtonsComponent but with different default styling and layout options.

Core Properties:

  • buttons: List of AltButton objects defining each button (icon, callback, colors, active state)
  • showAspect: If false, hides entire component; useful for conditional visibility

Layout Configuration:

  • direction: Button arrangement: 'horizontal' (default) or 'vertical'
  • position: Horizontal alignment: 'left', 'right', 'center' (default: 'left')
  • location: Vertical alignment: 'top' (default), 'bottom', 'center'

Styling:

  • buttonsContainerStyle: BoxDecoration for button group container
  • containerPadding/containerMargin/containerAlignment: Outer container layout

Icon Components:

  • iconComponent: Custom widget replacing default inactive icon display
  • alternateIconComponent: Custom widget replacing default active icon display

Builder Hooks (4):

  • customBuilder: Full widget replacement; receives ControlButtonsAltComponentOptions
  • wrapperBuilder: Override outer wrapper; receives child + default
  • containerBuilder: Override container; receives child + default
  • layoutBuilder: Override button layout (Row/Column); receives buttons + default
  • buttonBuilder: Override individual buttons; receives AltButton + default

AltButton Properties: Each button in buttons array supports:

  • name: Display label text
  • icon: Primary icon (inactive state)
  • alternateIcon: Icon shown when active=true
  • onPress: Callback function on tap
  • defaultBackgroundColor: Background when inactive
  • pressedBackgroundColor: Background when active
  • active: Toggle state (affects icon and color)
  • activeColor/inActiveColor: Icon tint colors
  • textColor: Label text color
  • show: If false, hides this button
  • disabled: If true, makes button non-interactive
  • customComponent: Custom widget replacing icon+label

Usage Patterns:

  1. Basic Horizontal Bar:

    ControlButtonsAltComponent(
  options: ControlButtonsAltComponentOptions(
    buttons: [
      AltButton(
        name: 'Mic',
        icon: Icons.mic_off,
        alternateIcon: Icons.mic,
        onPress: toggleMic,
        active: isMicOn,
        activeColor: Colors.green,
        inActiveColor: Colors.red,
      ),
      AltButton(
        name: 'Camera',
        icon: Icons.videocam_off,
        alternateIcon: Icons.videocam,
        onPress: toggleCamera,
        active: isCameraOn,
      ),
    ],
    direction: 'horizontal',
    position: 'center',
    location: 'bottom',
  ),
)

  2. Vertical Sidebar:

    ControlButtonsAltComponent(
  options: ControlButtonsAltComponentOptions(
    buttons: controlButtons,
    direction: 'vertical',
    position: 'right',
    location: 'center',
    buttonsContainerStyle: BoxDecoration(
      color: Colors.black54,
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

  3. Custom Button Renderer:

    ControlButtonsAltComponent(
  options: ControlButtonsAltComponentOptions(
    buttons: buttons,
    buttonBuilder: (context) {
      final button = context.button;
      return Tooltip(
        message: button.name ?? '',
        child: context.defaultButton,
      );
    },
  ),
)

  4. Conditional Visibility:

    ControlButtonsAltComponent(
  options: ControlButtonsAltComponentOptions(
    buttons: [
      AltButton(name: 'Share', icon: Icons.screen_share, onPress: shareScreen, show: canShare),
      AltButton(name: 'Record', icon: Icons.fiber_manual_record, onPress: startRecord, show: isHost),
    ],
    showAspect: isMediaControlsVisible,
  ),
)

Override Integration: Can be overridden via MediasfuUICustomOverrides:

overrides: MediasfuUICustomOverrides(
  controlButtonsAltOptions: ComponentOverride<ControlButtonsAltComponentOptions>(
    builder: (existingOptions) => ControlButtonsAltComponentOptions(
      buttons: existingOptions.buttons,
      position: 'center',
      location: 'bottom',
      buttonsContainerStyle: BoxDecoration(
        gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
        borderRadius: BorderRadius.circular(24),
      ),
    ),
  ),
),

Differences from ControlButtonsComponent:

  • Uses AltButton model (different properties than ControlButton)
  • position/location props for flexible alignment (vs fixed positioning)
  • Simpler layout (no row/column gap props)
  • Different default styling approach
  • No icon+content separate builders (unified buttonBuilder)

Constructors

ControlButtonsAltComponentOptions({required List<AltButton> buttons, String position = 'left', String location = 'top', String direction = 'horizontal', BoxDecoration? buttonsContainerStyle, Widget? alternateIconComponent, Widget? iconComponent, bool showAspect = true, ControlButtonsAltComponentType? customBuilder, EdgeInsetsGeometry? containerPadding, EdgeInsetsGeometry? containerMargin, AlignmentGeometry? containerAlignment, ControlButtonsAltWrapperBuilder? wrapperBuilder, ControlButtonsAltContainerBuilder? containerBuilder, ControlButtonsAltLayoutBuilder? layoutBuilder, ControlButtonsAltButtonBuilder? buttonBuilder})

Properties

alternateIconComponent → Widget?
A custom widget to display in place of the default icon component when the button is active.
final
buttonBuilder → ControlButtonsAltButtonBuilder?
Builder to override individual buttons.
final
buttons → List<AltButton>
An array of button configurations to render within the component.
final
buttonsContainerStyle → BoxDecoration?
Additional styling for the container holding the buttons.
final
containerAlignment → AlignmentGeometry?
Alignment of the container's child.
final
containerBuilder → ControlButtonsAltContainerBuilder?
Builder to override the top-level container.
final
containerMargin → EdgeInsetsGeometry?
Margin applied to the container wrapping the buttons.
final
containerPadding → EdgeInsetsGeometry?
Padding applied to the container wrapping the buttons.
final
customBuilder → ControlButtonsAltComponentType?
Custom builder to replace the entire component.
final
direction → String
Determines the layout direction of the buttons. Options: 'horizontal', 'vertical'.
final
hashCode → int
The hash code for this object.
no setterinherited
iconComponent → Widget?
A custom widget to display in place of the default icon component when the button is inactive.
final
layoutBuilder → ControlButtonsAltLayoutBuilder?
Builder to override the layout that arranges the buttons.
final
location → String
Specifies the vertical alignment of the buttons within the container. Options: 'top', 'bottom', 'center'.
final
position → String
Specifies the horizontal alignment of the buttons within the container. Options: 'left', 'right', 'center'.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
showAspect → bool
Controls the visibility of the widget.
final
wrapperBuilder → ControlButtonsAltWrapperBuilder?
Builder to override the wrapper surrounding the layout.
final

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

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