ControlButtonsComponentTouchOptions class

Configuration options for the ControlButtonsComponentTouch.

Provides extensive customization for touch-optimized control button bars with per-button styling, state colors, accessibility, and six builder hooks. Most comprehensive variant of control buttons with mobile/tablet touch targets in mind.

Core Properties:

buttons: List of ButtonTouch objects (each button fully customizable)
showAspect: If false, hides entire component; useful for conditional visibility

Layout Configuration:

direction: Button arrangement: 'horizontal' (default) or 'vertical'
position: Horizontal alignment: 'left' (default), 'right', 'center'
location: Vertical alignment: 'top' (default), 'bottom', 'center'
gap: Spacing between buttons (default: null, no spacing)

Container Styling:

containerDecoration: BoxDecoration for button group wrapper
containerPadding: Padding around button group (default: EdgeInsets.symmetric(vertical: 10))
containerMargin: Margin for button group container
containerAlignment: Alignment override (default: computed from position+location)
containerClipBehavior: Clip behavior (default: Clip.none)

Global Button Styling (applied to all buttons unless overridden per-button):

buttonBackgroundColors: ControlButtonsTouchStateColors with default/active/disabled/pressed colors
buttonColor: Default icon color
activeIconColor: Icon color when button.active=true
inactiveIconColor: Icon color when button.active=false
iconSize: Icon dimensions
textStyle: Label text styling
buttonPadding/buttonMargin: Spacing for each button
buttonDecoration: BoxDecoration for button containers
buttonBorderRadius: Border radius for buttons
buttonConstraints: Size constraints for buttons

Content Layout (icon+label arrangement):

contentPadding: Padding within button content area
contentMainAxisAlignment: Alignment along button's main axis
contentCrossAxisAlignment: Alignment along button's cross axis
contentGap: Spacing between icon and label
labelPadding: Padding around label text
iconPadding: Padding around icon

Icon Components:

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

Builder Hooks (6):

containerBuilder: Override outer Container; receives ControlButtonsTouchContainerContext + default
buttonsBuilder: Override Row/Column layout; receives ControlButtonsTouchButtonsContext + default
buttonBuilder: Override individual button wrapper; receives ControlButtonsTouchButtonContext + default
buttonContentBuilder: Override icon+label layout; receives ControlButtonsTouchButtonContentContext + default
iconBuilder: Override icon widget; receives ControlButtonsTouchButtonIconContext + default
labelBuilder: Override label text; receives ControlButtonsTouchButtonLabelContext + default

ButtonTouch Properties (per-button customization): 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
color: Base icon color (overrides global buttonColor)
activeColor/inActiveColor: Icon tint colors (override global colors)
active: Toggle state (affects icon and background color)
show: If false, hides this button
disabled: If true, makes button non-interactive and applies disabled color
backgroundColor: Map with 'default', 'pressed', 'active', 'disabled' color keys
padding/margin/decoration/constraints: Per-button layout props
contentPadding/contentMainAxisAlignment/contentCrossAxisAlignment/contentGap: Per-button content layout
iconSize: Per-button icon size override
textStyle: Per-button label styling
labelPadding/iconPadding: Per-button spacing
iconWidget/alternateIconWidget: Custom icon widgets
customComponent: Full button replacement widget
contentBuilder/buttonBuilder/iconBuilder/labelBuilder: Per-button builder hooks
semanticsLabel: Accessibility label (important for screen readers)

Usage Patterns:

Basic Touch Bar:

ControlButtonsComponentTouch(
  options: ControlButtonsComponentTouchOptions(
    buttons: [
      ButtonTouch(
        name: 'Mic',
        icon: Icons.mic_off,
        alternateIcon: Icons.mic,
        onPress: toggleMic,
        active: isMicOn,
        semanticsLabel: 'Toggle microphone',
      ),
      ButtonTouch(
        name: 'Camera',
        icon: Icons.videocam_off,
        alternateIcon: Icons.videocam,
        onPress: toggleCamera,
        active: isCameraOn,
        semanticsLabel: 'Toggle camera',
      ),
    ],
    direction: 'horizontal',
    position: 'center',
    location: 'bottom',
    gap: 16,
  ),
)

State Colors:

ControlButtonsComponentTouch(
  options: ControlButtonsComponentTouchOptions(
    buttons: buttons,
    buttonBackgroundColors: ControlButtonsTouchStateColors(
      defaultColor: Colors.grey[800],
      activeColor: Colors.green,
      disabledColor: Colors.grey[600],
      pressedColor: Colors.blue,
    ),
    activeIconColor: Colors.white,
    inactiveIconColor: Colors.grey[400],
  ),
)

Per-Button Customization:

ControlButtonsComponentTouch(
  options: ControlButtonsComponentTouchOptions(
    buttons: [
      ButtonTouch(
        name: 'Record',
        icon: Icons.fiber_manual_record,
        onPress: startRecording,
        backgroundColor: {'default': Colors.red, 'pressed': Colors.red[700]},
        iconSize: 32,
        textStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
      ),
      ButtonTouch(
        name: 'Stop',
        icon: Icons.stop,
        onPress: stopRecording,
        disabled: !isRecording,
      ),
    ],
  ),
)

Custom Button Content:

ControlButtonsComponentTouch(
  options: ControlButtonsComponentTouchOptions(
    buttons: buttons,
    buttonContentBuilder: (context, defaultContent) {
      final button = context.button;
      return Column(
        children: [
          Badge(
            label: button.active ? Text('ON') : null,
            child: context.icon ?? SizedBox(),
          ),
          if (button.name != null) context.label ?? SizedBox(),
        ],
      );
    },
  ),
)

Accessibility-Enhanced:

ControlButtonsComponentTouch(
  options: ControlButtonsComponentTouchOptions(
    buttons: [
      ButtonTouch(
        icon: Icons.mic_off,
        onPress: toggleMic,
        semanticsLabel: isMicOn ? 'Mute microphone' : 'Unmute microphone',
        active: isMicOn,
      ),
    ],
    buttonConstraints: BoxConstraints(minWidth: 48, minHeight: 48), // WCAG touch target
  ),
)

Override Integration: Can be overridden via MediasfuUICustomOverrides:

overrides: MediasfuUICustomOverrides(
  controlButtonsTouchOptions: ComponentOverride<ControlButtonsComponentTouchOptions>(
    builder: (existingOptions) => ControlButtonsComponentTouchOptions(
      buttons: existingOptions.buttons,
      position: 'center',
      location: 'bottom',
      gap: 20,
      containerDecoration: BoxDecoration(
        gradient: LinearGradient(colors: [Colors.black87, Colors.black54]),
        borderRadius: BorderRadius.circular(24),
      ),
      buttonBackgroundColors: ControlButtonsTouchStateColors(
        defaultColor: Colors.transparent,
        activeColor: Colors.blue[700],
        pressedColor: Colors.blue[800],
      ),
      iconSize: 28,
    ),
  ),
),

Touch Optimization:

Default button constraints ensure minimum 48x48 touch targets (WCAG 2.1 guideline)
Larger icon sizes (default 16, recommended 24-32 for touch)
Spacing via gap prop prevents accidental touches
Disabled state visually distinct (color + opacity)
Semantics labels for screen reader support

Differences from Other Variants:

vs ControlButtonsComponent: More extensive per-button customization, state colors, accessibility props
vs ControlButtonsAltComponent: Uses ButtonTouch model (richer than AltButton), 6 builder hooks vs 4, state color system
Most comprehensive: Supports per-button builders, semantics, state colors, content layout customization

Constructors

ControlButtonsComponentTouchOptions({required List<ButtonTouch> buttons, String position = 'left', String location = 'top', String direction = 'horizontal', BoxDecoration? containerDecoration, EdgeInsetsGeometry? containerPadding, EdgeInsetsGeometry? containerMargin, AlignmentGeometry? containerAlignment, Clip containerClipBehavior = Clip.none, bool showAspect = true, ControlButtonsTouchStateColors? buttonBackgroundColors, Color? buttonColor, Color? activeIconColor, Color? inactiveIconColor, double? iconSize, TextStyle? textStyle, EdgeInsetsGeometry? buttonPadding, EdgeInsetsGeometry? buttonMargin, BoxDecoration? buttonDecoration, BorderRadiusGeometry? buttonBorderRadius, BoxConstraints? buttonConstraints, EdgeInsetsGeometry? contentPadding, MainAxisAlignment? contentMainAxisAlignment, CrossAxisAlignment? contentCrossAxisAlignment, double? contentGap, EdgeInsetsGeometry? labelPadding, EdgeInsetsGeometry? iconPadding, double? gap, Widget? alternateIconComponent, Widget? iconComponent, ControlButtonsTouchContainerBuilder? containerBuilder, ControlButtonsTouchButtonsBuilder? buttonsBuilder, ControlButtonsTouchButtonBuilder? buttonBuilder, ControlButtonsTouchButtonContentBuilder? buttonContentBuilder, ControlButtonsTouchButtonIconBuilder? iconBuilder, ControlButtonsTouchButtonLabelBuilder? labelBuilder}): const

Properties

activeIconColor → Color?: final
alternateIconComponent → Widget?: final
buttonBackgroundColors → ControlButtonsTouchStateColors?: final
buttonBorderRadius → BorderRadiusGeometry?: final
buttonBuilder → ControlButtonsTouchButtonBuilder?: final
buttonColor → Color?: final
buttonConstraints → BoxConstraints?: final
buttonContentBuilder → ControlButtonsTouchButtonContentBuilder?: final
buttonDecoration → BoxDecoration?: final
buttonMargin → EdgeInsetsGeometry?: final
buttonPadding → EdgeInsetsGeometry?: final
buttons → List<ButtonTouch>: final
buttonsBuilder → ControlButtonsTouchButtonsBuilder?: final
containerAlignment → AlignmentGeometry?: final
containerBuilder → ControlButtonsTouchContainerBuilder?: final
containerClipBehavior → Clip: final
containerDecoration → BoxDecoration?: final
containerMargin → EdgeInsetsGeometry?: final
containerPadding → EdgeInsetsGeometry?: final
contentCrossAxisAlignment → CrossAxisAlignment?: final
contentGap → double?: final
contentMainAxisAlignment → MainAxisAlignment?: final
contentPadding → EdgeInsetsGeometry?: final
direction → String: final
gap → double?: final
hashCode → int: The hash code for this object.
no setterinherited
iconBuilder → ControlButtonsTouchButtonIconBuilder?: final
iconComponent → Widget?: final
iconPadding → EdgeInsetsGeometry?: final
iconSize → double?: final
inactiveIconColor → Color?: final
labelBuilder → ControlButtonsTouchButtonLabelBuilder?: final
labelPadding → EdgeInsetsGeometry?: final
location → String: final
position → String: final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
showAspect → bool: final
textStyle → TextStyle?: 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

ControlButtonsComponentTouchOptions class

Constructors

Properties

Methods

Operators

control_buttons_component_touch library