Select

Starting Flutter example…

Live Flutter from this checkout’s component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

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

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

Anatomy

The select trigger is a fixed horizontal row with four visual slots:

container — layout, fill, border, effects, and spacing for the trigger.
icon — an optional content icon before the label or placeholder.
label / placeholder — the selected item label or empty-state text.
indicator — the affordance that communicates collapsed or expanded state. It is styled separately from icon.

Customize the indicator glyph for either state through RemixSelectTrigger:

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

void main() {
  RemixSelectTrigger(
    placeholder: 'Select an option',
    icon: Icons.language,
    collapsedIcon: Icons.add,
    expandedIcon: Icons.remove,
  );
}

Each state falls back independently. A null collapsedIcon uses the built-in downward chevron, while a null expandedIcon uses the built-in upward chevron. Those defaults are internal vector paths and do not require Material icons.

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;
          });
        },
      ),
    );
  }

  SelectMenuItemStyler get itemStyle {
    return SelectMenuItemStyler()
        .iconSize(16)
        .padding(.all(8))
        .borderRadius(.all(const Radius.circular(8)))
        .onHovered(SelectMenuItemStyler().color(Colors.blueGrey.shade50))
        .onDisabled(
          SelectMenuItemStyler().labelColor(Colors.grey.shade300),
        );
  }

  SelectStyler get style {
    return SelectStyler()
        .trigger(
          SelectTriggerStyler()
              .color(Colors.transparent)
              .border(.color(const Color(0xFF898988)))
              .padding(.vertical(10))
              .padding(.horizontal(12))
              .borderRadius(.all(const Radius.circular(12))),
        )
        .menuContainer(
          FlexBoxStyler()
              .width(200)
              .margin(.vertical(5))
              .padding(.all(6))
              .color(Colors.white)
              .borderRadius(.all(const Radius.circular(12))),
        );
  }
}

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

Fortal variants

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
import 'ui/ui.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),
        ),
      ],
    );
  }
}

FortalSelect applies matching trigger, menu container, and default item styles. Set RemixSelectItem.style only for a row-level override. See the fortalSelectStyle source code for all available options.

Constructor

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

RemixSelect<T> remixSelectConstructor<T>({
  Key? key,
  required RemixSelectTrigger trigger,
  required List<RemixSelectItem<T>> items,
  T? selectedValue,
  OverlayPositionConfig positioning = const OverlayPositionConfig(
    side: OverlaySide.bottom,
    alignment: OverlayAlignment.center,
  ),
  ValueChanged<T?>? onChanged,
  VoidCallback? onOpen,
  VoidCallback? onClose,
  bool enabled = true,
  MouseCursor mouseCursor = SystemMouseCursors.click,
  String? semanticLabel,
  bool closeOnSelect = true,
  FocusNode? focusNode,
  SelectStyler style = const SelectStyler.create(),
  SelectSpec? styleSpec,
}) => throw UnimplementedError();

On this page