Switch

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

Interactive preview

Resolving preview metadata...

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


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

Prop	Type	Required / Default Value
`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

Method	Description
`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.