MobileMockupsGridBlock class

A responsive grid and carousel component for showcasing mobile screen mockups with associated entity metadata.

Figma Specifications (Node 810:10819 - MobileMockupsGridBlock):

  • PC Device Mode:
    • User controls container width; height is hug contents.
    • Hosts 4 MobileMockupBlock cards of variant scale=Width filling the width with 24px gaps.
    • Each card height is auto-deduced based on the 428:926 aspect ratio.
    • isCarousel=False (810:10818): Static 4-column row of 4 MobileMockupBlock cards.
    • isCarousel=True (811:11752): 4-card visible sliding carousel with CarouselControl chevrons.
    • Bottom section: BiographyBlock (type=Tall, device=Web) with logo, title, subtitle, and badges.
  • Mobile Device Mode:
    • Regardless of isCarousel (true or false), always renders the single thumb-based scroll carousel (810:10991).
    • Hosts MobileMockupBlock cards of variant scale=Height (height 480px, width auto-deduced ~221.86px).
    • Viewport peek cue via mobileViewportFraction (default ~0.78).
    • Bottom section: BiographyBlock in mobile compact mode (hasLogo: false, hasBadgeBar: false).
Inheritance

Constructors

MobileMockupsGridBlock({Key? key, MobileMockupsGridBlockDevice device = MobileMockupsGridBlockDevice.auto, bool isCarousel = false, double? width, double breakpoint = 600.0, double gap = 24.0, double? mobileContainerHeight, double mobileViewportFraction = 0.78, int pcItemsPerView = 4, List<String>? imageUrls, List<String>? videoUrls, bool playInViewportOnly = true, Duration autoPlayDelay = const Duration(milliseconds: 1200), List<Widget>? items, int? itemCount, IndexedWidgetBuilder? itemBuilder, ValueChanged<int>? onItemTap, Widget? bioMarker, String title = 'Title', Widget? titleWidget, bool hasSubtitle = true, String subtitle = 'Subtitle', Widget? subtitleWidget, bool hasDescription = false, String description = 'Description', Widget? descriptionWidget, Widget? logoWidget, String? logoAssetPath, VoidCallback? onLogoTap, bool? hasBadgeBar, bool hasBadgeOne = false, String badge1Label = 'Label', bool hasBadgeTwo = true, String badge2Label = 'Label', bool hasBadgeThree = true, String badge3Label = 'Label', List<Widget>? badges})
Creates a MobileMockupsGridBlock instance.
const
MobileMockupsGridBlock.builder({Key? key, MobileMockupsGridBlockDevice device = MobileMockupsGridBlockDevice.auto, bool isCarousel = false, double? width, double breakpoint = 600.0, double gap = 24.0, double? mobileContainerHeight, double mobileViewportFraction = 0.78, int pcItemsPerView = 4, bool playInViewportOnly = true, Duration autoPlayDelay = const Duration(milliseconds: 1200), required int count, required IndexedWidgetBuilder builder, ValueChanged<int>? onItemTap, Widget? bioMarker, String title = 'Title', Widget? titleWidget, bool hasSubtitle = true, String subtitle = 'Subtitle', Widget? subtitleWidget, bool hasDescription = false, String description = 'Description', Widget? descriptionWidget, Widget? logoWidget, String? logoAssetPath, VoidCallback? onLogoTap, bool? hasBadgeBar, bool hasBadgeOne = false, String badge1Label = 'Label', bool hasBadgeTwo = true, String badge2Label = 'Label', bool hasBadgeThree = true, String badge3Label = 'Label', List<Widget>? badges})
Convenience builder constructor for dynamic list rendering.
const

Properties

autoPlayDelay → Duration
Delay before video starts playing once entering the viewport (defaults to 1.2 seconds / 1200ms).
final
badge1Label → String
Label for badge 1.
final
badge2Label → String
Label for badge 2.
final
badge3Label → String
Label for badge 3.
final
badges → List<Widget>?
Custom widget list for badge bar.
final
bioMarker → Widget?
Custom widget override for the bottom BioMarker.
final
breakpoint → double
Width threshold for auto-responsive switching between PC and Mobile layouts (defaults to 600.0).
final
description → String
Description body text.
final
descriptionWidget → Widget?
Custom widget override for description.
final
device → MobileMockupsGridBlockDevice
Viewport mode (auto, pc, or mobile).
final
gap → double
Spacing gap between mobile marker items (defaults to 24px per Figma).
final
hasBadgeBar → bool?
Whether the badge bar is displayed. If null, automatically true on PC and false on Mobile per Figma.
final
hasBadgeOne → bool
Whether badge 1 is displayed.
final
hasBadgeThree → bool
Whether badge 3 is displayed (defaults to true).
final
hasBadgeTwo → bool
Whether badge 2 is displayed (defaults to true).
final
hasDescription → bool
Whether description is displayed (defaults to false).
final
hashCode → int
The hash code for this object.
no setterinherited
Whether the logo container is displayed. If null, automatically true on PC and false on Mobile per Figma.
final
hasSubtitle → bool
Whether subtitle is displayed (defaults to true).
final
imageUrls → List<String>?
List of image URLs for the mobile screen mockups.
final
isCarousel → bool
Whether the items are presented in a horizontally sliding/swiping carousel or a static 4-column grid.
final
itemBuilder → IndexedWidgetBuilder?
Builder for generating items dynamically.
final
itemCount → int?
Total count of items when using itemBuilder.
final
items → List<Widget>?
List of pre-constructed widgets to render as mobile screen cards.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
Image provider for the entity logo.
final
logoAssetPath → String?
Custom asset path for the logo.
final
logoWidget → Widget?
Custom widget override for the logo.
final
mobileContainerHeight → double?
Optional explicit height override of mobile containers in mobile carousel mode (defaults to null, which auto-deduces to hug card height).
final
mobileViewportFraction → double
Viewport fraction for mobile carousel swipe cue (defaults to 0.78, allowing the next card to peek into view).
final
onItemTap → ValueChanged<int>?
Callback when a mobile screen item is tapped.
final
onLogoTap → VoidCallback?
Callback executed when the logo is tapped.
final
pcItemsPerView → int
Number of items visible at once in PC carousel view (defaults to 4 per Figma).
final
playInViewportOnly → bool
Whether video playback should only occur when the widget is visible in the viewport (defaults to true).
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
subtitle → String
Subtitle descriptive text.
final
subtitleWidget → Widget?
Custom widget override for subtitle.
final
title → String
Title text for the entity metadata.
final
titleWidget → Widget?
Custom widget override for title.
final
videoUrls → List<String>?
List of video URLs for autoplay looping video mockups.
final
width → double?
Optional fixed width constraint for the entire grid container.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<MobileMockupsGridBlock>
Creates the mutable state for this widget at a given location in the tree.
override
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

Constants

version → const String
Component version for reference. v1.1.0: Renamed from MobileGrid to MobileMockupsGridBlock matching Figma node 810:10819, moved to lib/web/. v1.0.5: Added viewport-aware autoplay and configurable delay (default 1.2s) support via AlterMediaView. v1.0.4: Added videoUrls parameter for seamless multimedia video mockup lists across carousel and grid views. v1.0.3: Added ambient AlterDeviceScope propagation so child MobileMarkers and bottom BioMarker derive device mode directly from MobileGrid width. v1.0.2: Fixed PC non-carousel equal card heights by placing gap SizedBoxes between Expandeds, and made mobile layout dynamically hug the auto-deduced height of the mobile cards. v1.0.1: Standardized PC layout and unified Mobile layout. v1.0.0: Initial release matching Figma Node 810:10819.