Switch

Starting Flutter example…

Live Flutter from this checkout’s component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

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(
      semanticLabel: 'Toggle',
      style: style,
      selected: _selected.value,
      onChanged: (value) {
        setState(() {
          _selected.value = value;
        });
      },
    );
  }

  SwitchStyler get style {
    return SwitchStyler()
        .thumbColor(Colors.grey.shade600)
        .trackColor(Colors.deepPurpleAccent.shade200)
        .size(65, 30)
        .borderRadius(.all(const Radius.circular(40)))
        .alignment(
          _selected.value ? Alignment.centerRight : Alignment.centerLeft,
        )
        .animate(AnimationConfig.easeOut(300.ms))
        .thumb(
          BoxStyler()
              .color(Colors.white)
              .size(40, 30)
              .borderRadius(.circular(40))
              .scale(0.85)
              .decoration(
                .boxShadow([
                  BoxShadowMix(
                    color: Colors.black.withValues(alpha: 0.1),
                    offset: const Offset(2, 4),
                    blurRadius: 4,
                    spreadRadius: 3,
                  ),
                ]),
              ),
        );
  }
}

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

Fortal variants

import 'package:flutter/material.dart';
import 'ui/ui.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,
          semanticLabel: 'Notifications',
          onChanged: (v) => setState(() => _value = v),
        ),
        FortalSwitch.soft(
          selected: _value,
          semanticLabel: 'Notifications',
          onChanged: (v) => setState(() => _value = v),
        ),
      ],
    );
  }
}

See the fortalSwitchStyle source code for all available options.

Constructor

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

RemixSwitch remixSwitchConstructor({
  Key? key,
  required bool selected,
  required String semanticLabel,
  ValueChanged<bool>? onChanged,
  bool enabled = true,
  bool enableFeedback = true,
  FocusNode? focusNode,
  bool autofocus = false,
  bool excludeSemantics = false,
  MouseCursor mouseCursor = SystemMouseCursors.click,
  SwitchStyler style = const SwitchStyler.create(),
  SwitchSpec? styleSpec,
}) => throw UnimplementedError();