HeroProjectsBlock class

A responsive project case study hero block with logo, title, metadata grid, notice banner, tech stack, and action links.

Figma Specifications (Node 802:8220 - HeroProjectsBlock):

  • Variants:
    • device=PC (802:8221): Width 896px, Column layout, 24px gap.
      • Logo Container: 84x84px, 24px corner radius, #FFFFFF bg, 1px #F3F4F6 stroke.
      • Title: 40px Geist Bold (AlterTypography.displayBold), lineHeight 52px, textPrimary (#000000).
      • Description: 16px Geist Regular (AlterTypography.bodyLg), lineHeight 20px, textSecondary (#4A5565).
      • Details: Row, 32px gap, 4 columns (16px label + 20px value).
      • Notice: Toast banner with status=Caution (yellow #FDC700, 16px radius).
      • StackBar: Row (64px gap) containing "Built with" tech icons (48x48px, 12px radius) and "Available on" action ButtonText buttons.
    • device=Mobile (802:8605): Width 316px, Column layout, 24px gap.
      • Logo Container: 48x48px, 16px corner radius, #FFFFFF bg, 1px #F3F4F6 stroke.
      • Title: 30px Geist Bold (AlterTypography.h1Bold), lineHeight 36px, textPrimary (#000000).
      • Description: 16px Geist Regular (AlterTypography.bodyLg), lineHeight 20px, textSecondary (#4A5565).
      • Details: 2x2 Grid, 16px gap (14px label + 18px value).
      • Notice: Toast banner with status=Caution.
      • StackBar: Column (24px gap) containing "Built with" tech icons and "Available on" ButtonIcon 48x48px buttons.
Inheritance

Constructors

HeroProjectsBlock({Key? key, double? width, HeroProjectsBlockDevice device = HeroProjectsBlockDevice.auto, double breakpoint = 500.0, String title = 'Title -\nSubtitle', Widget? titleWidget, String? description = 'Description of the project', Widget? descriptionWidget, bool hasDescription = true, String? logoUrl, String? logoAssetPath, Widget? logoWidget, List<ProjectDetailItem>? details, bool hasDetails = true, bool hasNotice = true, String noticeText = 'Feedback Text', ToastStatus noticeStatus = ToastStatus.caution, Widget? noticeWidget, String techStackLabel = 'Built with', bool hasTechStack = true, List<Widget>? techLogos, String availabilityLabel = 'Available on', bool hasAvailability = true, List<ProjectHeroAction>? actions, Widget? actionsWidget})
Creates a HeroProjectsBlock instance.
const

Properties

actions → List<ProjectHeroAction>?
List of availability actions.
final
actionsWidget → Widget?
Custom widget override for the availability action bar.
final
availabilityLabel → String
Section label for availability (defaults to 'Available on').
final
breakpoint → double
Width threshold below which mobile layout is activated (defaults to 500.0).
final
description → String?
Project description text.
final
descriptionWidget → Widget?
Custom widget override for the description.
final
details → List<ProjectDetailItem>?
List of project metadata key-value items (Client, Platform, Year, Status).
final
device → HeroProjectsBlockDevice
Viewport mode (auto, pc, or mobile).
final
hasAvailability → bool
Whether availability actions are displayed (defaults to true).
final
hasDescription → bool
Whether the description is displayed (defaults to true).
final
hasDetails → bool
Whether the details metadata section is displayed (defaults to true).
final
hashCode → int
The hash code for this object.
no setterinherited
Whether the logo container is displayed (defaults to true).
final
hasNotice → bool
Whether the notice / toast banner is displayed (defaults to true).
final
hasTechStack → bool
Whether the technology stack is displayed (defaults to true).
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
Image provider for the project logo.
final
logoAssetPath → String?
Local asset path for the project logo.
final
logoUrl → String?
Network URL for the project logo.
final
logoWidget → Widget?
Custom widget override for the logo.
final
noticeStatus → ToastStatus
Status theme for the notice banner (defaults to ToastStatus.caution).
final
noticeText → String
Text for the notice / toast banner.
final
noticeWidget → Widget?
Custom widget override for the notice banner.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
techLogos → List<Widget>?
List of technology stack logo widgets or icons.
final
techStackLabel → String
Section label for the technology stack (defaults to 'Built with').
final
title → String
Project headline title text.
final
titleWidget → Widget?
Custom widget override for the title.
final
width → double?
Optional fixed width constraint for the block.
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

Static Methods

defaultActions() → List<ProjectHeroAction>
Default availability actions matching Figma Node 802:8220.
defaultDetails() → List<ProjectDetailItem>
Default metadata items matching Figma Node 802:8220.
defaultTechLogos() → List<Widget>
Default technology logo tiles matching Figma Node 802:8220.

Constants

version → const String
Component version for reference. v1.1.0: Renamed from ProjectHeroBlock to HeroProjectsBlock to match Figma node 802:8220, moved to lib/web/. v1.0.0: Initial release matching Figma Node 802:8220 (HeroProjectsBlock: device=PC/Mobile).