MainGridComponent class

A stateless widget rendering the main participant video grid with optional timer overlay.

Displays a fixed-size container holding participant video/audio cards in a Stack layout, with an optional MeetingProgressTimer positioned at the top center. Commonly used as the primary display area in video conferencing interfaces.

Rendering Logic:

  1. If showAspect=false → returns invisible Container (Visibility.visible=false)
  2. Builds Container with width/height from options
  3. Creates Stack containing:
    • All children from options.children (participant cards)
    • MeetingProgressTimer (if showTimer=true) positioned at top-center
  4. Applies containerBuilder hook if provided
  5. Applies childrenBuilder hook if provided

Layout Structure:

Visibility (showAspect)
  └─ Container (containerBuilder)
     ├─ width/height/backgroundColor/decoration
     └─ Stack
        ├─ ...children (VideoCard/AudioCard widgets)
        └─ Positioned (top: 0, left/right: 0) [IF showTimer]
           └─ Align (center)
              └─ MeetingProgressTimer (timerBuilder)

Timer Positioning:

  • Positioned at top of Stack (top: 0, left: 0, right: 0)
  • Aligned to Alignment.topCenter
  • Renders above all participant cards (last child in Stack)
  • Shows elapsed meeting time (e.g., "00:45:30")

Builder Hook Priorities:

  • containerBuilder: Wraps outer Container; receives context + default container
  • childrenBuilder: Wraps Stack children list; receives context + dimensions + defaultChildren
  • Both hooks receive MainGridComponentOptions for access to all config

Common Use Cases:

  1. Standard Video Grid:

    MainGridComponent(
  options: MainGridComponentOptions(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height * 0.7,
    mainSize: 80,
    backgroundColor: Colors.black,
    children: participants.map((p) => VideoCard(options: VideoCardOptions(...))).toList(),
    meetingProgressTime: formatDuration(meetingDuration),
    showTimer: true,
  ),
)

  2. Responsive Grid:

    LayoutBuilder(
  builder: (context, constraints) {
    return MainGridComponent(
      options: MainGridComponentOptions(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        mainSize: 75,
        backgroundColor: Colors.grey[900]!,
        children: buildParticipantCards(participants, constraints),
        meetingProgressTime: meetingTime,
      ),
    );
  },
)

  3. Grid with Custom Overlay:

    MainGridComponent(
  options: MainGridComponentOptions(
    width: width,
    height: height,
    mainSize: 100,
    backgroundColor: Colors.black,
    children: videoCards,
    meetingProgressTime: time,
    childrenBuilder: (context, defaultChildren) {
      return [
        ...defaultChildren,
        Positioned(
          bottom: 20,
          left: 20,
          child: Text(
            'Recording in progress',
            style: TextStyle(color: Colors.red, fontSize: 16),
          ),
        ),
      ];
    },
  ),
)

  4. Hide Grid Conditionally:

    MainGridComponent(
  options: MainGridComponentOptions(
    width: width,
    height: height,
    mainSize: 80,
    backgroundColor: Colors.black,
    children: participants,
    meetingProgressTime: time,
    showAspect: isGridVisible, // Toggle visibility
  ),
)

Override Integration: Integrates with MediasfuUICustomOverrides for global styling:

overrides: MediasfuUICustomOverrides(
  mainGridOptions: ComponentOverride<MainGridComponentOptions>(
    builder: (existingOptions) => MainGridComponentOptions(
      width: existingOptions.width,
      height: existingOptions.height,
      mainSize: existingOptions.mainSize,
      backgroundColor: Colors.black,
      children: existingOptions.children,
      meetingProgressTime: existingOptions.meetingProgressTime,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.black, Colors.grey[900]!],
        ),
      ),
      timerOptions: MeetingProgressTimerOptions(
        backgroundColor: Colors.blue[700],
        textColor: Colors.white,
        fontSize: 18,
      ),
    ),
  ),
),

Meeting Timer Features:

  • Displays elapsed meeting time (format: "HH:MM:SS")
  • Updates via meetingProgressTime prop (parent manages timer state)
  • Customizable via timerOptions (colors, fonts, padding)
  • Can be fully replaced via timerBuilder hook
  • Hidden if showTimer=false

Dimension Management:

  • Fixed dimensions via width/height props (no automatic sizing)
  • Parent responsible for responsive sizing (typically uses LayoutBuilder)
  • mainSize prop passed to options but not directly used in rendering (used by parent layouts)

Performance Notes:

  • Stateless widget (no internal state)
  • Stack renders all children (no virtualization)
  • Suitable for typical meeting sizes (2-50 participants)
  • For larger meetings, consider implementing pagination or virtualization

Implementation Details:

  • Uses Visibility widget for showAspect toggling
  • Stack allows overlaying timer on top of participant grid
  • Container provides background and dimensions
  • Timer positioned absolutely at top-center
  • Builder hooks called during build (not cached)
Inheritance

Constructors

MainGridComponent({Key? key, required MainGridComponentOptions options})
Constructs a MainGridComponent widget.
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 → MainGridComponentOptions
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