A dropdown select component for choosing from a list of options.

Interactive preview

When to use this

• Form inputs: Collect user selections from predefined options
• Filters: Allow users to filter content by categories or criteria
• Settings: Enable users to choose configuration values
• Data entry: Provide structured input options in forms

Basic implementation

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class SelectExample extends StatefulWidget {
  const SelectExample({super.key});
 
  @override
  State<SelectExample> createState() => _SelectExampleState();
}
 
class _SelectExampleState extends State<SelectExample> {
  String? _selectedValue;
 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      child: RemixSelect(
        trigger: const RemixSelectTrigger(placeholder: 'Text Value'),
        items: [
          RemixSelectItem(
            value: 'option1',
            label: 'Option 1',
            enabled: true,
            style: itemStyle,
          ),
          RemixSelectItem(
            value: 'option2',
            label: 'Option 2',
            enabled: false,
            style: itemStyle,
          ),
        ],
        selectedValue: _selectedValue,
        style: style,
        onChanged: (value) {
          setState(() {
            _selectedValue = value;
          });
        },
      ),
    );
  }
 
  RemixSelectMenuItemStyler get itemStyle {
    return RemixSelectMenuItemStyler()
        .iconSize(16)
        .paddingAll(8)
        .borderRadius(.circular(8))
        .onHovered(.color(Colors.blueGrey.shade50))
        .onDisabled(.text(.color(Colors.grey.shade300)));
  }
 
  RemixSelectStyler get style {
    return RemixSelectStyler()
        .trigger(
          .color(Colors.transparent)
          .border(.color(const Color(0xFF898988)))
          .paddingY(10)
          .paddingX(12)
          .borderRadius(.circular(12)),
        )
        .menuContainer(
          .width(200)
          .marginY(5)
          .paddingAll(6)
          .color(Colors.white)
          .borderRadius(.circular(12)),
        );
  }
}

Fortal widgets

Remix includes a generated Fortal-themed widget for this component:

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class FortalSelectExample extends StatefulWidget {
  const FortalSelectExample({super.key});
 
  @override
  State<FortalSelectExample> createState() => _FortalSelectExampleState();
}
 
class _FortalSelectExampleState extends State<FortalSelectExample> {
  String? _surface;
  String? _soft;
  String? _ghost;
 
  static const _items = [
    RemixSelectItem(value: 'opt1', label: 'Option 1'),
    RemixSelectItem(value: 'opt2', label: 'Option 2'),
  ];
 
  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        FortalSelect.surface(
          trigger: const RemixSelectTrigger(placeholder: 'Surface'),
          items: _items,
          selectedValue: _surface,
          onChanged: (value) => setState(() => _surface = value),
        ),
        FortalSelect.soft(
          trigger: const RemixSelectTrigger(placeholder: 'Soft'),
          items: _items,
          selectedValue: _soft,
          onChanged: (value) => setState(() => _soft = value),
        ),
        FortalSelect.ghost(
          trigger: const RemixSelectTrigger(placeholder: 'Ghost'),
          items: _items,
          selectedValue: _ghost,
          onChanged: (value) => setState(() => _ghost = value),
        ),
      ],
    );
  }
}

Constructor

const RemixSelect({
  Key? key,
  required RemixSelectTrigger trigger,
  required List<RemixSelectItem<T>> items,
  T? selectedValue,
  OverlayPositionConfig positioning = const OverlayPositionConfig(
    targetAnchor: .bottomCenter,
    followerAnchor: .topCenter,
  ),
  ValueChanged<T?>? onChanged,
  VoidCallback? onOpen,
  VoidCallback? onClose,
  bool enabled = true,
  String? semanticLabel,
  bool closeOnSelect = true,
  FocusNode? focusNode,
  RemixSelectStyler style = const RemixSelectStyler.create(),
  RemixSelectSpec? styleSpec,
})

Properties

Widget Properties

key → Key?

Optional. Controls how one widget replaces another widget in the tree.

trigger → RemixSelectTrigger

Required. The trigger data that defines the select’s button.

items → List<RemixSelectItem<T>>

Required. The list of selectable items.

selectedValue → T?

Optional. The currently selected value.

onChanged → ValueChanged<T?>?

Optional. Called when the selected value changes.

onOpen → VoidCallback?

Optional. Called when the dropdown opens.

onClose → VoidCallback?

Optional. Called when the dropdown closes.

enabled → bool

Optional. Whether the select is enabled and can be interacted with.

semanticLabel → String?

Optional. Semantic label for accessibility.

closeOnSelect → bool

Optional. Whether to automatically close the dropdown when an item is selected.

focusNode → FocusNode?

Optional. Optional focus node to control focus behavior.

style → RemixSelectStyler

Optional. The style configuration for the select.

styleSpec → RemixSelectSpec?

Optional. A raw resolved style spec that bypasses fluent style resolution.

Select Style Methods

menuContainer(FlexBoxStyler value)

Configures the select menu overlay container.

trigger(RemixSelectTriggerStyler value)

Configures the select trigger style.

item(RemixSelectMenuItemStyler value)

Configures the default style for every option. A RemixSelectItem.style merges on top as an optional row-level override.

animate(AnimationConfig value)

Configures implicit animation for style transitions.

variants(List<VariantStyle<RemixSelectSpec>> value)

Sets style variants.

foregroundDecoration(DecorationMix value)

Sets the menu container foreground decoration.

transform(Matrix4 value, {Alignment alignment = .center})

Applies a matrix transformation to the menu container.

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

modifier(WidgetModifierConfig value)

Sets the widget modifier.

call<T>({ ... })

Creates a RemixSelect widget with this style applied.

Select Trigger Style Methods

container(FlexBoxStyler value)

Configures the trigger container style.

label(TextStyler value)

Sets trigger label styling.

icon(IconStyler value)

Sets trigger icon styling.

alignment(Alignment value)

Sets trigger container alignment.

constraints(BoxConstraintsMix value)

Sets trigger size constraints.

decoration(DecorationMix value)

Sets trigger container decoration.

margin(EdgeInsetsGeometryMix value)

Sets trigger container margin.

padding(EdgeInsetsGeometryMix value)

Sets trigger container padding.

foregroundDecoration(DecorationMix value)

Sets a foreground decoration painted on top of the trigger.

transform(Matrix4 value, {Alignment alignment = .center})

Applies a matrix transformation to the trigger.

flex(FlexStyler value)

Configures trigger flex layout properties.

animate(AnimationConfig value)

Configures implicit animation for trigger style transitions.

variants(List<VariantStyle<RemixSelectTriggerSpec>> value)

Sets trigger style variants.

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

modifier(WidgetModifierConfig value)

Sets the trigger widget modifier.

labelStyle(TextStyleMix value)

Sets label/text style using TextStyleMix directly

labelColor(Color value)

Sets label/text color

labelFontSize(double value)

Sets label/text font size

labelFontWeight(FontWeight value)

Sets label/text font weight

labelFontStyle(FontStyle value)

Sets label/text font style (italic/normal)

labelLetterSpacing(double value)

Sets label/text letter spacing

labelDecoration(TextDecoration value)

Sets label/text decoration (underline, strikethrough, etc.)

labelFontFamily(String value)

Sets label/text font family

labelHeight(double value)

Sets label/text line height

labelWordSpacing(double value)

Sets label/text word spacing

labelDecorationColor(Color value)

Sets label/text decoration color

iconColor(Color value)

Sets icon color

iconSize(double value)

Sets icon size

iconOpacity(double value)

Sets icon opacity

iconWeight(double value)

Sets icon weight (useful for variable icons like Material Symbols)

iconGrade(double value)

Sets icon grade (useful for Material Icons)

iconFill(double value)

Sets icon fill (useful for Material Icons filled variants)

iconOpticalSize(double value)

Sets icon optical size (useful for Material Icons)

iconBlendMode(BlendMode value)

Sets icon blend mode

iconTextDirection(TextDirection value)

Sets icon text direction

iconShadows(List<ShadowMix> value)

Sets icon shadows

iconShadow(ShadowMix value)

Sets single icon shadow

Select Menu Item Style Methods

container(FlexBoxStyler value)

Configures the menu item container style.

text(TextStyler value)

Sets menu item text styling.

label(TextStyler value)

Sets menu item text styling through the label alias.

icon(IconStyler value)

Sets menu item icon styling.

alignment(Alignment value)

Sets menu item container alignment.

constraints(BoxConstraintsMix value)

Sets menu item size constraints.

decoration(DecorationMix value)

Sets menu item container decoration.

margin(EdgeInsetsGeometryMix value)

Sets menu item container margin.

padding(EdgeInsetsGeometryMix value)

Sets menu item container padding.

foregroundDecoration(DecorationMix value)

Sets a foreground decoration painted on top of the menu item.

transform(Matrix4 value, {Alignment alignment = .center})

Applies a matrix transformation to the menu item.

flex(FlexStyler value)

Configures menu item flex layout properties.

animate(AnimationConfig value)

Configures implicit animation for menu item style transitions.

variants(List<VariantStyle<RemixSelectMenuItemSpec>> value)

Sets menu item style variants.

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

modifier(WidgetModifierConfig value)

Sets the menu item widget modifier.

labelStyle(TextStyleMix value)

Sets item text style using TextStyleMix directly.

labelColor(Color value)

Sets item text color.

labelFontSize(double value)

Sets item text font size.

labelFontWeight(FontWeight value)

Sets item text font weight.

labelFontStyle(FontStyle value)

Sets item text font style.

labelLetterSpacing(double value)

Sets item text letter spacing.

labelDecoration(TextDecoration value)

Sets item text decoration.

labelFontFamily(String value)

Sets item text font family.

labelHeight(double value)

Sets item text line height.

labelWordSpacing(double value)

Sets item text word spacing.

labelDecorationColor(Color value)

Sets item text decoration color.

iconColor(Color value)

Sets item icon color.

iconSize(double value)

Sets item icon size.

iconOpacity(double value)

Sets item icon opacity.

iconWeight(double value)

Sets item icon weight.

iconGrade(double value)

Sets item icon grade.

iconFill(double value)

Sets item icon fill.

iconOpticalSize(double value)

Sets item icon optical size.

iconBlendMode(BlendMode value)

Sets item icon blend mode.

iconTextDirection(TextDirection value)

Sets item icon text direction.

iconShadows(List<ShadowMix> value)

Sets item icon shadows.

iconShadow(ShadowMix value)

Sets single item icon shadow.