GraphicsBlock class

A responsive project and portfolio card molecule combining banner media / carousel and an entity BiographyBlock.

Figma Specifications (Node 795:6004 - GraphicsBlock):

  • Variants:
    • device=PC, isCarousel=False (795:3760): Single 16:9 banner media + BioMarker with logo and badge bar.
    • device=Mobile, isCarousel=False (795:6005): Single 16:9 banner media + compact BioMarker (no logo, no badge bar).
    • device=PC, isCarousel=True (813:12021): Multi-column side-by-side carousel with smooth animated sliding and CarouselControl overlay.
    • device=Mobile, isCarousel=True (819:2595): Thumb-swipeable carousel with peek cue (default ~86% viewport fraction) without chevrons.
  • Multimedia Support:
    • Supports Images, animated GIFs, and muted looping autoplay Videos without controllers across single media and carousel modes.
  • Sizing:
    • Width: Fills available container width (or constrained by optional width).
    • Height: Hugs content (MainAxisSize.min).
    • Media container aspect ratio: 16 / 9 for images/videos with 20px radius and 2px #F3F4F6 border.
  • Child components:
Inheritance

Constructors

GraphicsBlock({Key? key, double? width, GraphicsBlockDevice device = GraphicsBlockDevice.auto, double breakpoint = 380.0, bool isCarousel = false, int pcItemsPerView = 2, double mobileViewportFraction = 0.86, double carouselGap = 24.0, Duration animationDuration = const Duration(milliseconds: 350), Curve animationCurve = Curves.easeInOutCubic, ImageProvider<Object>? image, String? imageUrl, String? imageAssetPath, String? videoUrl, String? videoAssetPath, VideoPlayerController? videoController, bool autoPlay = true, bool playInViewportOnly = true, Duration autoPlayDelay = const Duration(milliseconds: 1200), bool loop = true, bool isMuted = true, Widget? imageWidget, List<ImageProvider<Object>>? carouselImages, List<String>? carouselImageUrls, List<String>? carouselImageAssetPaths, List<String>? carouselVideoUrls, List<String>? carouselVideoAssetPaths, List<AlterMediaView>? carouselMediaViews, List<Widget>? carouselItems, int carouselIndex = 0, ValueChanged<int>? onCarouselIndexChanged, VoidCallback? onPrevious, VoidCallback? onNext, double aspectRatio = 16 / 9, BorderRadius? imageBorderRadius, ValueChanged<int>? onImageTap, String title = 'Title', Widget? titleWidget, bool hasSubtitle = true, String subtitle = 'Subtitle', Widget? subtitleWidget, Widget? logoWidget, String? logoAssetPath, VoidCallback? onLogoTap, bool? hasBadgeBar, bool hasBadgeOne = false, String badgeOneLabel = 'Label', Widget? badgeOneWidget, bool hasBadgeTwo = true, String badgeTwoLabel = 'Label', Widget? badgeTwoWidget, bool hasBadgeThree = true, String badgeThreeLabel = 'Label', Widget? badgeThreeWidget, List<Widget>? badges, bool hasDescription = false, String description = 'Description', Widget? descriptionWidget})
Creates a GraphicsBlock instance.
const

Properties

animationCurve → Curve
Animation curve for PC carousel sliding (defaults to Curves.easeInOutCubic).
final
animationDuration → Duration
Duration of the sliding animation on PC carousel navigation (defaults to 350ms).
final
aspectRatio → double
Aspect ratio for banner images/videos (defaults to 16 / 9).
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
badgeOneLabel → String
Label for badge 1.
final
badgeOneWidget → Widget?
Custom widget override for badge 1.
final
badges → List<Widget>?
Custom widget list for badge bar.
final
badgeThreeLabel → String
Label for badge 3.
final
badgeThreeWidget → Widget?
Custom widget override for badge 3.
final
badgeTwoLabel → String
Label for badge 2.
final
badgeTwoWidget → Widget?
Custom widget override for badge 2.
final
breakpoint → double
Viewport width breakpoint below which mobile layout is activated (defaults to 380.0).
final
carouselGap → double
Spacing gap between adjacent media items in carousel mode (defaults to 24px).
final
carouselImageAssetPaths → List<String>?
List of asset paths for carousel mode.
final
carouselImages → List<ImageProvider<Object>>?
List of image providers for carousel mode.
final
carouselImageUrls → List<String>?
List of image URLs for carousel mode.
final
carouselIndex → int
Active carousel page index.
final
carouselItems → List<Widget>?
Custom widget items for carousel mode.
final
carouselMediaViews → List<AlterMediaView>?
List of pre-configured AlterMediaView items for carousel mode.
final
carouselVideoAssetPaths → List<String>?
List of video asset paths for carousel mode.
final
carouselVideoUrls → List<String>?
List of video URLs for carousel mode.
final
description → String
Description text.
final
descriptionWidget → Widget?
Custom widget override for description.
final
device → GraphicsBlockDevice
Viewport mode (auto responsive, pc, or mobile).
final
hasBadgeBar → bool?
Explicit control for badge bar visibility (defaults to true on PC, false on Mobile).
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 text is displayed.
final
hashCode → int
The hash code for this object.
no setterinherited
Explicit control for entity logo visibility (defaults to true on PC, false on Mobile).
final
hasSubtitle → bool
Whether subtitle is displayed.
final
image → ImageProvider<Object>?
Single image provider (used when isCarousel is false or as fallback).
final
imageAssetPath → String?
Custom asset path for a single banner image or GIF.
final
imageBorderRadius → BorderRadius?
Corner radius of the banner media container (defaults to 20px).
final
imageUrl → String?
Convenience URL string for a single network image or animated GIF.
final
imageWidget → Widget?
Custom widget override for single banner media.
final
isCarousel → bool
Whether the media section operates in carousel mode.
final
isMuted → bool
Whether video is muted (defaults to true for web autoplay compliance).
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
mobileViewportFraction → double
Viewport fraction occupied by the active card in mobile carousel mode (defaults to 0.86 for 44px peek cue per Figma).
final
onCarouselIndexChanged → ValueChanged<int>?
Callback triggered when carousel page index changes.
final
onImageTap → ValueChanged<int>?
Callback executed when the banner media is tapped.
final
onLogoTap → VoidCallback?
Callback executed when the logo is tapped.
final
onNext → VoidCallback?
Callback for next slide action.
final
onPrevious → VoidCallback?
Callback for previous slide action.
final
pcItemsPerView → int
Number of simultaneous cards visible in PC carousel mode (defaults to 2 per Figma, configurable to 3, etc.).
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
Main entity title text.
final
titleWidget → Widget?
Custom widget override for title.
final
videoAssetPath → String?
Custom asset path for single banner video.
final
videoController → VideoPlayerController?
Optional pre-configured VideoPlayerController instance for single banner.
final
videoUrl → String?
Network URL for single banner video.
final
width → double?
Optional fixed width for the overall GraphicsBlock (defaults to fill available parent width).
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<GraphicsBlock>
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.5.0: Renamed from ProjectMarker to GraphicsBlock matching Figma node 795:6004, moved to lib/web/. v1.4.0: Added viewport-aware autoplay and configurable delay (default 1.2s) support via AlterMediaView. v1.3.0: Added native multimedia support for animated GIFs and autoplay looping videos without controllers via AlterMediaView across both single media and carousel modes. v1.2.2: Added ambient AlterDeviceScope inheritance so ProjectMarker derives device mode directly from parent ProjectGrid without judging its own narrow cell width, and propagates device mode to BioMarker. v1.2.1: Adjusted auto-responsive breakpoint to 380.0 (and made configurable via breakpoint property). v1.2.0: Implemented smooth hardware-accelerated animated sliding for PC carousel navigation via ScrollController with easeInOutCubic curve. v1.1.0: Added configurable pcItemsPerView (default 2), mobileViewportFraction (default 0.86 with peek cue), and native touch-first PageView for mobile carousels. v1.0.0: Initial release matching Figma Node 795:6004 (GraphicsBlock: PC/Mobile, Single/Carousel variants).