Switch
A toggle switch component for binary on/off states with smooth animations
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
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)
.color(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:
Fortal variants
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
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,
})