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:

1. 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,
     ),
   )
   

2. 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],
     ),
   )
   

3. 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,
         ),
       ],
     ),
   )
   

4. 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(),
           ],
         );
       },
     ),
   )
   

5. 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