MobileMockupBlock class

A responsive mobile screen showcase and entity card combining an iPhone 14 Plus container (428:926) with an optional BiographyBlock.

Figma Specifications (Node 810:10719 - MobileMockupBlock):

  • Variants:
    • scale=Width (810:10718): Width is controlled; height is auto-deduced and hugs content.
    • scale=Height (810:10720): Height is controlled; width is auto-deduced and hugs content.
  • Multimedia Support:
    • Supports Images, animated GIFs, and muted looping autoplay Videos without controllers rendered via AlterMediaView.
  • Sizing & Media Container:
    • Aspect Ratio: 428 / 926 (iPhone 14 Plus screen ratio ~0.4622).
    • Border: 1px #F3F4F6 (AlterSemanticTokens.stroke100).
    • Border Radius: 20px (BorderRadius.circular(20)).
  • Bottom Section:
Inheritance

Constructors

MobileMockupBlock({Key? key, MobileMockupBlockScale scale = MobileMockupBlockScale.width, MobileMockupBlockDevice device = MobileMockupBlockDevice.auto, double? width, double? height, double aspectRatio = 428 / 926, ImageProvider<Object>? image, String? imageUrl, String? imageAssetPath, String? videoUrl, String? videoAssetPath, Widget mediaBuilder(BuildContext context)?, bool autoPlay = true, bool playInViewportOnly = true, Duration autoPlayDelay = const Duration(milliseconds: 1200), bool loop = true, bool isMuted = true, Widget? imageWidget, BorderRadius? imageBorderRadius, VoidCallback? onImageTap, bool hasBiographyBlock = true, bool? hasBioMarker, 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 = false, bool hasBadgeOne = false, String badge1Label = 'Label', bool hasBadgeTwo = false, String badge2Label = 'Label', bool hasBadgeThree = false, String badge3Label = 'Label', List<Widget>? badges})
Creates a MobileMockupBlock instance.
const

Properties

aspectRatio → double
Aspect ratio of the mobile container (defaults to 428 / 926).
final
autoPlay → bool
Whether video should start playing automatically (defaults to true).
final
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
description → String
Description body text.
final
descriptionWidget → Widget?
Custom widget override for description.
final
device → MobileMockupBlockDevice
Viewport device mode (auto, pc, or mobile).
final
hasBadgeBar → bool
Whether the badge bar is displayed.
final
hasBadgeOne → bool
Whether badge 1 is displayed.
final
hasBadgeThree → bool
Whether badge 3 is displayed.
final
hasBadgeTwo → bool
Whether badge 2 is displayed.
final
hasBiographyBlock → bool
Whether the BiographyBlock is displayed below the mobile container.
final
hasBioMarker → bool
Backwards compatibility alias for hasBiographyBlock.
no setter
hasDescription → bool
Whether description is displayed.
final
hashCode → int
The hash code for this object.
no setterinherited
Whether the logo container is displayed.
final
hasSubtitle → bool
Whether subtitle is displayed.
final
height → double?
Explicit height constraint when scale is MobileMarkerScale.height (defaults to 692.34px per Figma).
final
image → ImageProvider<Object>?
Image provider for the mobile mockup screen.
final
imageAssetPath → String?
Custom asset path for mockup image.
final
imageBorderRadius → BorderRadius?
Corner radius of the mobile container (defaults to 20px).
final
imageUrl → String?
Convenience URL string for network mockup images or animated GIFs.
final
imageWidget → Widget?
Custom widget override for the mockup screen container.
final
isMuted → bool
Whether video is muted (defaults to true).
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
loop → bool
Whether video should loop infinitely (defaults to true).
final
mediaBuilder → Widget Function(BuildContext context)?
Optional media slot / builder for the mobile screen (e.g. VideoPlayer, Lottie, custom widget).
final
onImageTap → VoidCallback?
Callback executed when the mobile mockup is tapped.
final
onLogoTap → VoidCallback?
Callback executed when the logo is tapped.
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
scale → MobileMockupBlockScale
Scale mode: whether width or height drives the auto-deduced sizing.
final
subtitle → String
Subtitle descriptive text.
final
subtitleWidget → Widget?
Custom widget override for subtitle.
final
title → String
Main entity title text.
final
titleWidget → Widget?
Custom widget override for title.
final
videoAssetPath → String?
Custom asset path for autoplay video inside the mobile screen mockup.
final
videoUrl → String?
Network URL for autoplay video inside the mobile screen mockup.
final
width → double?
Explicit width constraint when scale is MobileMarkerScale.width (defaults to fill available width).
final

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

Constants

version → const String
Component version for reference. v1.3.0: Renamed from MobileMarker to MobileMockupBlock matching Figma node 810:10719, moved to lib/web/. v1.2.0: Added viewport-aware autoplay and configurable delay (default 1.2s) support via AlterMediaView. v1.1.0: Added native multimedia support for animated GIFs and autoplay looping videos without controllers via AlterMediaView. v1.0.1: Added device parameter and AlterDeviceScope inheritance so MobileMarker and its BioMarker derive device mode directly from parent grids. v1.0.0: Initial release matching Figma Node 810:10719 (MobileMockupBlock: scale=Width/Height, iPhone 14 Plus 428:926 container + BioMarker).