FluentDropdownStyle class

The visual configuration of a FluentDropdown — trigger and popup.

Shaped like FluentButtonStyle: every visual property is a WidgetStateProperty, so hover, pressed and disabled values live on the property rather than being branched on at build time.

The popup surface is styled from the same struct rather than a second one. Upstream does the same — useDropdownStyles.styles.ts and useListboxStyles.styles.ts are two files but one component contract — and a caller restyling a dropdown almost always wants both halves to move together. Popup fields are prefixed surface.

Every field is nullable and means "inherit". Resolution order, lowest to highest precedence:

the appearance/size defaults derived from the theme
the nearest FluentDropdownTheme
the widget's own style

Annotations

@immutable

Constructors

FluentDropdownStyle({WidgetStateProperty<Color?>? backgroundColor, WidgetStateProperty<Color?>? foregroundColor, WidgetStateProperty<Color?>? placeholderColor, WidgetStateProperty<Color?>? borderColor, WidgetStateProperty<double?>? borderWidth, WidgetStateProperty<BorderRadius?>? borderRadius, WidgetStateProperty<Color?>? underlineColor, WidgetStateProperty<Color?>? accentColor, WidgetStateProperty<double?>? accentWidth, WidgetStateProperty<TextStyle?>? textStyle, WidgetStateProperty<EdgeInsetsGeometry?>? padding, WidgetStateProperty<double?>? gap, WidgetStateProperty<Color?>? chevronColor, WidgetStateProperty<double?>? chevronSize, WidgetStateProperty<EdgeInsetsGeometry?>? chevronPadding, WidgetStateProperty<Size?>? minimumSize, WidgetStateProperty<MouseCursor?>? mouseCursor, WidgetStateProperty<Color?>? surfaceColor, WidgetStateProperty<Color?>? surfaceBorderColor, WidgetStateProperty<double?>? surfaceBorderWidth, WidgetStateProperty<BorderRadius?>? surfaceRadius, WidgetStateProperty<EdgeInsetsGeometry?>? surfacePadding, WidgetStateProperty<double?>? surfaceGap, WidgetStateProperty<List<BoxShadow>?>? surfaceShadow, WidgetStateProperty<double?>? surfaceMaxHeight, WidgetStateProperty<double?>? surfaceOffset}): Creates a style. Omitted properties inherit.
const

Properties

accentColor → WidgetStateProperty<Color?>?: The brand rule that grows across the bottom edge while the dropdown is focused or open. Upstream's ::after, Figma's InFocus rectangle.
final
accentWidth → WidgetStateProperty<double?>?: Height of the accent rule. FluentStroke.thick (2) per Figma and React.
final
backgroundColor → WidgetStateProperty<Color?>?: Trigger fill.
final
borderColor → WidgetStateProperty<Color?>?: Trigger border colour. Null and transparent are different: Fluent's transparentStroke becomes opaque in high contrast.
final
borderRadius → WidgetStateProperty<BorderRadius?>?: Trigger corner radius.
final
borderWidth → WidgetStateProperty<double?>?: Trigger border width.
final
chevronColor → WidgetStateProperty<Color?>?: Chevron tone.
final
chevronPadding → WidgetStateProperty<EdgeInsetsGeometry?>?: Inset around the chevron inside its slot.
final
chevronSize → WidgetStateProperty<double?>?: Chevron edge length.
final
foregroundColor → WidgetStateProperty<Color?>?: Colour of the selected value's text.
final
gap → WidgetStateProperty<double?>?: Space between the value text and the chevron slot.
final
hashCode → int: The hash code for this object.
no setteroverride
minimumSize → WidgetStateProperty<Size?>?: Minimum trigger size. The width is upstream's minWidth: 250px; past it a dropdown takes its width from its parent.
final
mouseCursor → WidgetStateProperty<MouseCursor?>?: Cursor while hovering the trigger.
final
padding → WidgetStateProperty<EdgeInsetsGeometry?>?: Inset of the value text inside the trigger's border.
final
placeholderColor → WidgetStateProperty<Color?>?: Colour of the placeholder, shown while nothing is selected. A separate ramp, not a dimmed foregroundColor: Figma binds the trigger's text to Neutral/Foreground/4/Rest and upstream's .placeholder rule agrees.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
surfaceBorderColor → WidgetStateProperty<Color?>?: Popup outline colour, painted outside the surface like upstream's CSS outline.
final
surfaceBorderWidth → WidgetStateProperty<double?>?: Popup outline width.
final
surfaceColor → WidgetStateProperty<Color?>?: Popup fill.
final
surfaceGap → WidgetStateProperty<double?>?: Space between two options.
final
surfaceMaxHeight → WidgetStateProperty<double?>?: Tallest the popup grows before its options scroll.
final
surfaceOffset → WidgetStateProperty<double?>?: Vertical distance between the trigger's bottom edge and the popup.
final
surfacePadding → WidgetStateProperty<EdgeInsetsGeometry?>?: Inset between the popup edge and its options.
final
surfaceRadius → WidgetStateProperty<BorderRadius?>?: Popup corner radius.
final
surfaceShadow → WidgetStateProperty<List<BoxShadow>?>?: Popup elevation.
final
textStyle → WidgetStateProperty<TextStyle?>?: Value and placeholder text style. Its colour is overridden by foregroundColor / placeholderColor.
final
underlineColor → WidgetStateProperty<Color?>?: The trigger's bottom border side, when it differs from borderColor.
final

Methods

copyWith({WidgetStateProperty<Color?>? backgroundColor, WidgetStateProperty<Color?>? foregroundColor, WidgetStateProperty<Color?>? placeholderColor, WidgetStateProperty<Color?>? borderColor, WidgetStateProperty<double?>? borderWidth, WidgetStateProperty<BorderRadius?>? borderRadius, WidgetStateProperty<Color?>? underlineColor, WidgetStateProperty<Color?>? accentColor, WidgetStateProperty<double?>? accentWidth, WidgetStateProperty<TextStyle?>? textStyle, WidgetStateProperty<EdgeInsetsGeometry?>? padding, WidgetStateProperty<double?>? gap, WidgetStateProperty<Color?>? chevronColor, WidgetStateProperty<double?>? chevronSize, WidgetStateProperty<EdgeInsetsGeometry?>? chevronPadding, WidgetStateProperty<Size?>? minimumSize, WidgetStateProperty<MouseCursor?>? mouseCursor, WidgetStateProperty<Color?>? surfaceColor, WidgetStateProperty<Color?>? surfaceBorderColor, WidgetStateProperty<double?>? surfaceBorderWidth, WidgetStateProperty<BorderRadius?>? surfaceRadius, WidgetStateProperty<EdgeInsetsGeometry?>? surfacePadding, WidgetStateProperty<double?>? surfaceGap, WidgetStateProperty<List<BoxShadow>?>? surfaceShadow, WidgetStateProperty<double?>? surfaceMaxHeight, WidgetStateProperty<double?>? surfaceOffset}) → FluentDropdownStyle: This style with the given properties replaced.
merge(FluentDropdownStyle? other) → FluentDropdownStyle: This style with the non-null properties of other layered on top.
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toString() → String: A string representation of this object.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
override

Static Methods

from({Color? backgroundColor, Color? foregroundColor, Color? placeholderColor, Color? borderColor, double? borderWidth, BorderRadius? borderRadius, Color? underlineColor, Color? accentColor, double? accentWidth, TextStyle? textStyle, EdgeInsetsGeometry? padding, double? gap, Color? chevronColor, double? chevronSize, EdgeInsetsGeometry? chevronPadding, Size? minimumSize, MouseCursor? mouseCursor, Color? surfaceColor, Color? surfaceBorderColor, double? surfaceBorderWidth, BorderRadius? surfaceRadius, EdgeInsetsGeometry? surfacePadding, double? surfaceGap, List<BoxShadow>? surfaceShadow, double? surfaceMaxHeight, double? surfaceOffset}) → FluentDropdownStyle: Convenience for the common case of one value across every state.