A toggle switch component for binary on/off states with smooth animations.
When to use this
- Feature toggles: Enable or disable features or settings
- Binary choices: Represent yes/no or on/off decisions
- Settings panels: Control boolean preferences in settings
- Quick actions: Provide instant state changes without confirmation
Basic implementation
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
class SwitchExample extends StatefulWidget {
const SwitchExample({super.key});
@override
State<SwitchExample> createState() => _SwitchExampleState();
}
class _SwitchExampleState extends State<SwitchExample> {
final ValueNotifier<bool> _selected = ValueNotifier(false);
@override
void dispose() {
_selected.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return RemixSwitch(
style: style,
selected: _selected.value,
onChanged: (value) {
setState(() {
_selected.value = value;
});
},
);
}
RemixSwitchStyle get style {
return RemixSwitchStyle()
.thumbColor(Colors.grey.shade600)
.trackColor(Colors.deepPurpleAccent.shade200)
.size(65, 30)
.borderRadiusAll(const Radius.circular(40))
.alignment(
_selected.value ? Alignment.centerRight : Alignment.centerLeft,
)
.animate(AnimationConfig.easeOut(300.ms))
.thumb(
BoxStyler()
.color(Colors.white)
.size(40, 30)
.borderRounded(40)
.scale(0.85)
.shadowOnly(
color: Colors.black.withValues(alpha: 0.1),
offset: const Offset(2, 4),
blurRadius: 4,
spreadRadius: 3,
),
);
}
}Fortal styles
Remix includes Fortal-themed style helpers for this component:
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
class FortalSwitchExample extends StatefulWidget {
const FortalSwitchExample({super.key});
@override
State<FortalSwitchExample> createState() => _FortalSwitchExampleState();
}
class _FortalSwitchExampleState extends State<FortalSwitchExample> {
bool _value = false;
@override
Widget build(BuildContext context) {
return Column(
spacing: 16,
children: [
RemixSwitch(
selected: _value,
onChanged: (v) => setState(() => _value = v),
style: FortalSwitchStyle.solid(),
),
RemixSwitch(
selected: _value,
onChanged: (v) => setState(() => _value = v),
style: FortalSwitchStyle.soft(),
),
],
);
}
}See the FortalSwitchStyle source code for all available options.
Constructor
const RemixSwitch({
Key? key,
required bool selected,
required ValueChanged<bool>? onChanged,
bool enabled = true,
MouseCursor mouseCursor = SystemMouseCursors.click,
bool enableFeedback = true,
FocusNode? focusNode,
bool autofocus = false,
String? semanticLabel,
RemixSwitchStyle style = const RemixSwitchStyle.create(),
RemixSwitchSpec? styleSpec,
})Properties
Widget Properties
key → Key?
Optional. Controls how one widget replaces another widget in the tree.
enabled → bool
Optional. Whether this switch is enabled.
selected → bool
Required. Whether the switch is currently selected.
onChanged → ValueChanged<bool>
Required. Called when the user toggles the switch.
style → RemixSwitchStyle
Optional. The style configuration for the switch.
styleSpec → RemixSwitchSpec?
Optional. The style spec for the switch.
enableFeedback → bool
Optional. Whether to enable haptic feedback when toggled.
focusNode → FocusNode?
Optional. The focus node for the switch.
autofocus → bool
Optional. Whether the switch should automatically request focus when it is created.
semanticLabel → String?
Optional. The semantic label for the switch.
mouseCursor → MouseCursor
Optional. Cursor when hovering over the switch.
Style Methods
thumbColor(Color value)
Sets thumb color
thumb(BoxStyler value)
Sets thumb styling
alignment(Alignment value)
Sets container alignment
wrap(WidgetModifierConfig value)
Applies widget modifiers such as clipping, opacity, or scaling.
animate(AnimationConfig config)
Configures implicit animation for style transitions.
constraints(BoxConstraintsMix value)
Sets size constraints on the component.
decoration(DecorationMix value)
Sets the container decoration.
margin(EdgeInsetsGeometryMix value)
Sets the container margin.
padding(EdgeInsetsGeometryMix value)
Sets the container padding.
foregroundDecoration(DecorationMix value)
Sets a foreground decoration painted on top of the component.
transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)
Applies a matrix transformation to the component.