MainGridComponentOptions class

Configuration options for the MainGridComponent.

Provides properties to customize the main video grid container, including dimensions, background styling, child widgets (participant videos), and optional meeting timer display.

Core Display Properties:

  • children: List of child widgets (typically VideoCard/AudioCard components)
  • showAspect: If false, hides entire component; useful for conditional visibility
  • backgroundColor: Background color for grid container (default: transparent)

Dimensions:

  • width: Container width in pixels
  • height: Container height in pixels
  • mainSize: Main component size as percentage (0-100); affects layout proportions

Meeting Timer:

  • showTimer: If true, displays MeetingProgressTimer overlay (default: true)
  • meetingProgressTime: Timer display text (e.g., "00:45:30")
  • timeBackgroundColor: Timer background color (default: transparent)
  • timerOptions: MeetingProgressTimerOptions for custom timer styling
  • timerBuilder: Custom timer widget builder (overrides default MeetingProgressTimer)

Styling:

  • decoration: BoxDecoration for container (overrides backgroundColor if provided)
  • padding: Padding inside container
  • margin: Margin around container
  • clipBehavior: Clip behavior for container (default: Clip.none)

Builder Hooks (2):

  • containerBuilder: Override outer Container; receives MainGridComponentContainerContext + default
  • childrenBuilder: Override Stack children arrangement; receives MainGridComponentChildrenContext + defaultChildren

Usage Patterns:

  1. Basic Grid with Videos:

    MainGridComponent(
  options: MainGridComponentOptions(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    mainSize: 80,
    backgroundColor: Colors.black,
    children: videoParticipants.map((p) => VideoCard(...)).toList(),
    meetingProgressTime: formattedTime,
  ),
)

  2. Grid with Custom Timer:

    MainGridComponent(
  options: MainGridComponentOptions(
    width: screenWidth,
    height: screenHeight,
    mainSize: 70,
    backgroundColor: Colors.grey[900]!,
    children: participantWidgets,
    showTimer: true,
    timerOptions: MeetingProgressTimerOptions(
      backgroundColor: Colors.blue,
      textColor: Colors.white,
      fontSize: 16,
    ),
    meetingProgressTime: '01:23:45',
  ),
)

  3. Hide Timer:

    MainGridComponent(
  options: MainGridComponentOptions(
    width: width,
    height: height,
    mainSize: 100,
    backgroundColor: Colors.black87,
    children: videoCards,
    showTimer: false,
    meetingProgressTime: '',
  ),
)

  4. Custom Children Layout:

    MainGridComponent(
  options: MainGridComponentOptions(
    width: width,
    height: height,
    mainSize: 75,
    backgroundColor: Colors.black,
    children: participants,
    meetingProgressTime: time,
    childrenBuilder: (context, defaultChildren) {
      return [
        ...defaultChildren,
        Positioned(
          bottom: 16,
          right: 16,
          child: FloatingActionButton(
            onPressed: openSettings,
            child: Icon(Icons.settings),
          ),
        ),
      ];
    },
  ),
)

Override Integration: Can be overridden via MediasfuUICustomOverrides:

overrides: MediasfuUICustomOverrides(
  mainGridOptions: ComponentOverride<MainGridComponentOptions>(
    builder: (existingOptions) => MainGridComponentOptions(
      width: existingOptions.width,
      height: existingOptions.height,
      mainSize: existingOptions.mainSize,
      backgroundColor: Colors.deepPurple[900]!,
      children: existingOptions.children,
      meetingProgressTime: existingOptions.meetingProgressTime,
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [Colors.black, Colors.deepPurple[900]!]),
      ),
    ),
  ),
),

Timer Integration:

  • Timer positioned at top-center of grid (Positioned top: 0, left/right: 0)
  • Timer renders above all child widgets (in Stack)
  • timerOptions provides styling: backgroundColor, textColor, fontSize, padding, etc.
  • timerBuilder allows full timer replacement for custom implementations

Implementation Notes:

  • Uses Stack to layer children + timer overlay
  • Container dimensions controlled by width/height props (no automatic sizing)
  • mainSize affects internal layout calculations (used by parent components)
  • showAspect=false makes entire component invisible (Visibility widget)

Constructors

MainGridComponentOptions({required Color backgroundColor, required List<Widget> children, required double mainSize, required double height, required double width, bool showAspect = true, Color timeBackgroundColor = Colors.transparent, bool showTimer = true, required String meetingProgressTime, Decoration? decoration, EdgeInsetsGeometry? padding, EdgeInsetsGeometry? margin, Clip clipBehavior = Clip.none, MeetingProgressTimerOptions? timerOptions, MeetingProgressTimerType? timerBuilder, MainGridComponentContainerBuilder? containerBuilder, MainGridComponentChildrenBuilder? childrenBuilder})
Constructs a MainGridComponentOptions object.
const

Properties

backgroundColor → Color
The background color of the main grid container.
final
children → List<Widget>
The list of child widgets to be displayed inside the main grid.
final
childrenBuilder → MainGridComponentChildrenBuilder?
Builder to override child composition inside the stack.
final
clipBehavior → Clip
Clip behavior for the container.
final
containerBuilder → MainGridComponentContainerBuilder?
Builder to override the container composition.
final
decoration → Decoration?
Custom decoration for the grid container.
final
hashCode → int
The hash code for this object.
no setterinherited
height → double
The height of the main grid container.
final
mainSize → double
The main size percentage (0-100) of the primary component within the grid.
final
margin → EdgeInsetsGeometry?
Optional margin for the grid container.
final
meetingProgressTime → String
The meeting progress time to display on the timer.
final
padding → EdgeInsetsGeometry?
Optional padding for the grid container.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
showAspect → bool
A flag indicating whether to show the aspect ratio of the grid.
final
showTimer → bool
A flag indicating whether to show the meeting progress timer.
final
timeBackgroundColor → Color
The background color of the meeting progress timer.
final
timerBuilder → MeetingProgressTimerType?
Custom timer builder (defaults to MeetingProgressTimer).
final
timerOptions → MeetingProgressTimerOptions?
Custom timer options (overrides deprecated timer fields when provided).
final
width → double
The width of the main grid container.
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