Select
A dropdown select component for choosing options from a list
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
Basic implementation
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;
});
},
),
);
}
RemixSelectMenuItemStyle get itemStyle {
return RemixSelectMenuItemStyle()
.iconSize(16)
.paddingAll(8)
.borderRadiusAll(const Radius.circular(8))
.onHovered(RemixSelectMenuItemStyle().color(Colors.blueGrey.shade50))
.onDisabled(
RemixSelectMenuItemStyle().labelColor(Colors.grey.shade300),
);
}
RemixSelectStyle get style {
return RemixSelectStyle()
.trigger(
RemixSelectTriggerStyle()
.color(Colors.transparent)
.borderAll(color: const Color(0xFF898988))
.paddingY(10)
.paddingX(12)
.borderRadiusAll(const Radius.circular(12)),
)
.menuContainer(
FlexBoxStyler()
.width(200)
.marginY(5)
.paddingAll(6)
.color(Colors.white)
.borderRadiusAll(const Radius.circular(12)),
);
}
}
Fortal styles
Remix includes Fortal-themed style helpers for this component:
Fortal base style
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? _selected;
@override
Widget build(BuildContext context) {
return RemixSelect(
trigger: const RemixSelectTrigger(placeholder: 'Select option'),
items: [
RemixSelectItem(
value: 'opt1',
label: 'Option 1',
style: FortalSelectMenuItemStyle.base(),
),
RemixSelectItem(
value: 'opt2',
label: 'Option 2',
style: FortalSelectMenuItemStyle.base(),
),
],
selectedValue: _selected,
onChanged: (value) => setState(() => _selected = value),
style: FortalSelectStyle.base(),
);
}
}
See the FortalSelectStyle source code for all available options.
Constructor
Constructor
const RemixSelect({
Key? key,
required RemixSelectTrigger trigger,
required List<RemixSelectItem> items,
required T? selectedValue,
Alignment? targetAnchor,
Alignment? followerAnchor,
required ValueChanged<T?>? onChanged,
RemixSelectStyle style = const RemixSelectStyle.create(),
RemixSelectSpec? styleSpec,
})