HeroBlock class

A responsive hero banner section block for landing pages.

Figma Specifications (Node 761:6375 - HeroBlock):

  • Variants:
    • device=PC (761:6374):
      • Graphic Container: 84x84px with 24px border radius (BorderRadius.circular(24)).
      • Title: 80px Geist SemiBold, lineHeight 1.0 (80px), letterSpacing -0.05em, textPrimary.
      • Subtitle: 20px Geist SemiBold (Headings/h2), lineHeight 24px, textSecondary.
      • Actions: Primary + Gray ButtonText with leading icons (hasIcon: true), 12px gap.
    • device=Mobile (761:6392):
      • Graphic Container: 84x84px with 24px border radius (BorderRadius.circular(24)).
      • Title: 48px Geist SemiBold, lineHeight 1.0 (48px), letterSpacing -0.0833em, textPrimary.
      • Subtitle: 16px Geist SemiBold (Headings/h4), lineHeight 20px, textSecondary.
      • Actions: Primary + Gray ButtonText without icons (hasIcon: false), 12px gap.
  • Spacing & Structure:
    • Vertical gap between sections: 24px.
    • Text alignment: Center aligned.
    • Sizing: Fills available parent width (or constrained by optional width), hugs vertical height.
Inheritance

Constructors

HeroBlock({Key? key, double? width, HeroBlockDevice device = HeroBlockDevice.auto, double breakpoint = 500.0, ImageProvider<Object>? avatar, String? avatarUrl, String? avatarAssetPath, Widget? avatarWidget, double avatarSize = 84.0, BorderRadius? avatarRadius, bool hasAvatar = true, String title = 'Hi, I am Nayan &\nI build things.', Widget? titleWidget, bool hasSubtitle = true, String subtitle = 'Principal UX Designer & Engineer @SIG', Widget? subtitleWidget, bool hasActions = true, String primaryButtonLabel = 'Book a call', IconData? primaryButtonIcon = Icons.videocam_outlined, bool? hasPrimaryButtonIcon, VoidCallback? onPrimaryTap, bool hasPrimaryButton = true, String secondaryButtonLabel = 'Download CV', IconData? secondaryButtonIcon = Icons.description_outlined, bool? hasSecondaryButtonIcon, VoidCallback? onSecondaryTap, bool hasSecondaryButton = true, List<Widget>? actions})
Creates a HeroBlock instance.
const

Properties

actions → List<Widget>?
Custom widget list for action buttons bar.
final
avatar → ImageProvider<Object>?
Image provider for the top avatar/graphic container.
final
avatarAssetPath → String?
Local asset path for the avatar image.
final
avatarRadius → BorderRadius?
Corner radius of the avatar container (defaults to 24px).
final
avatarSize → double
Dimensions (width & height) for the avatar container (defaults to 84.0).
final
avatarUrl → String?
Network URL for the avatar image.
final
avatarWidget → Widget?
Custom widget override for the avatar/graphic container.
final
breakpoint → double
Width threshold below which mobile layout is activated (defaults to 500.0).
final
device → HeroBlockDevice
Viewport mode (auto, pc, or mobile).
final
hasActions → bool
Whether action buttons bar is displayed (defaults to true).
final
hasAvatar → bool
Whether the avatar/graphic container is displayed (defaults to true).
final
hashCode → int
The hash code for this object.
no setterinherited
hasPrimaryButton → bool
Whether primary action button is displayed (defaults to true).
final
hasPrimaryButtonIcon → bool?
Whether primary button displays an icon. If null, defaults to true on PC and false on Mobile per Figma.
final
hasSecondaryButton → bool
Whether secondary action button is displayed (defaults to true).
final
hasSecondaryButtonIcon → bool?
Whether secondary button displays an icon. If null, defaults to true on PC and false on Mobile per Figma.
final
hasSubtitle → bool
Whether subtitle is displayed (defaults to true).
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
onPrimaryTap → VoidCallback?
Callback executed when primary action button is tapped.
final
onSecondaryTap → VoidCallback?
Callback executed when secondary action button is tapped.
final
primaryButtonIcon → IconData?
Icon for primary action button (defaults to Icons.videocam_outlined).
final
primaryButtonLabel → String
Label for primary action button (defaults to 'Book a call').
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
secondaryButtonIcon → IconData?
Icon for secondary action button (defaults to Icons.description_outlined).
final
secondaryButtonLabel → String
Label for secondary action button (defaults to 'Download CV').
final
subtitle → String
Subtitle descriptive text.
final
subtitleWidget → Widget?
Custom widget override for subtitle.
final
title → String
Main headline title text.
final
titleWidget → Widget?
Custom widget override for title.
final
width → double?
Optional fixed width constraint for the entire hero 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

Constants

version → const String
Component version for reference. v1.0.0: Initial release matching Figma Node 761:6375 (HeroBlock: device=PC/Mobile).