A toggle switch component for binary on/off states with smooth animations.

Interactive preview

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;
        });
      },
    );
  }
 
  RemixSwitchStyler get style {
    return RemixSwitchStyler()
        .thumbColor(Colors.grey.shade600)
        .trackColor(Colors.deepPurpleAccent.shade200)
        .size(65, 30)
        .borderRadius(.circular(40))
        .alignment(_selected.value ? .centerRight : .centerLeft)
        .animate(.easeOut(300.ms))
        .thumb(
          .color(Colors.white)
              .size(40, 30)
              .borderRounded(40)
              .scale(0.85)
              .shadowOnly(
                color: Colors.black.withValues(alpha: 0.1),
                offset: const .new(2, 4),
                blurRadius: 4,
                spreadRadius: 3,
              ),
        );
  }
}

Fortal widgets

Remix includes a generated Fortal-themed widget 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: [
        FortalSwitch.surface(
          selected: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
        FortalSwitch.soft(
          selected: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
      ],
    );
  }
}

Constructor

const RemixSwitch({
  Key? key,
  required bool selected,
  ValueChanged<bool>? onChanged,
  bool enabled = true,
  bool enableFeedback = true,
  FocusNode? focusNode,
  bool autofocus = false,
  String? semanticLabel,
  MouseCursor mouseCursor = SystemMouseCursors.click,
  RemixSwitchStyler style = const RemixSwitchStyler.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>?

Optional. Called when the user toggles the switch. When omitted, the switch is disabled.

style → RemixSwitchStyler

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

container(BoxStyler value)

Configures the switch track container style.

alignment(Alignment value)

Sets container alignment

trackColor(Color value)

Sets the track background color.

color(Color value)

Sets the track background color.

onSelected(RemixSwitchStyler value)

Applies a style while the switch is selected.

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

animate(AnimationConfig value)

Configures implicit animation for style transitions.

variants(List<VariantStyle<RemixSwitchSpec>> value)

Sets custom style variants.

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, {Alignment alignment = .center})

Applies a matrix transformation to the component.

call({ ... })

Creates a RemixSwitch widget with this style applied.