Toggle

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 pressable toggle button that stays visually active when selected.

When to use this

Formatting controls: Toggle bold, italic, alignment, or similar toolbar actions
Segment-like actions: Show a compact on/off choice without a switch track
Filter chips: Let users enable or disable a single filter
Tool states: Represent active tools in editors or drawing surfaces

Basic implementation

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

class ToggleExample extends StatefulWidget {
  const ToggleExample({super.key});

  @override
  State<ToggleExample> createState() => _ToggleExampleState();
}

class _ToggleExampleState extends State<ToggleExample> {
  bool _isBold = false;

  @override
  Widget build(BuildContext context) {
    return RemixToggle(
      selected: _isBold,
      onChanged: (value) => setState(() => _isBold = value),
      icon: Icons.format_bold,
      label: 'Bold',
      style: style,
    );
  }

  ToggleStyler get style {
    return ToggleStyler()
        .padding(.horizontal(12))
        .padding(.vertical(8))
        .spacing(6)
        .color(Colors.grey.shade100)
        .labelColor(Colors.grey.shade700).iconColor(Colors.grey.shade700)
        .borderRadius(.all(const Radius.circular(8)))
        .onHovered(ToggleStyler().color(Colors.grey.shade200))
        .onPressed(ToggleStyler().scale(0.93))
        .onSelected(
          ToggleStyler()
              .color(Colors.deepPurple.shade50)
              .labelColor(Colors.deepPurple).iconColor(Colors.deepPurple),
        )
        .animate(AnimationConfig.easeOut(200.ms));
  }
}

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 FortalToggleExample extends StatefulWidget {
  const FortalToggleExample({super.key});

  @override
  State<FortalToggleExample> createState() => _FortalToggleExampleState();
}

class _FortalToggleExampleState extends State<FortalToggleExample> {
  bool _value = false;

  @override
  Widget build(BuildContext context) {
    return Row(
      spacing: 8,
      children: [
        FortalToggle.ghost(
          selected: _value,
          onChanged: (v) => setState(() => _value = v),
          label: 'Ghost',
        ),
        FortalToggle.outline(
          selected: _value,
          onChanged: (v) => setState(() => _value = v),
          label: 'Outline',
        ),
      ],
    );
  }
}

See the fortalToggleStyle source code for all available options.

Constructor

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

RemixToggle remixToggleConstructor({
  Key? key,
  required bool selected,
  ValueChanged<bool>? onChanged,
  bool enabled = true,
  String? label,
  IconData? icon,
  bool enableFeedback = true,
  FocusNode? focusNode,
  bool autofocus = false,
  String? semanticLabel,
  bool excludeSemantics = false,
  MouseCursor mouseCursor = SystemMouseCursors.click,
  ToggleStyler style = const ToggleStyler.create(),
  ToggleSpec? styleSpec,
}) => throw UnimplementedError();

Properties

`enabled` -> `bool`

Optional. Whether this toggle can be interacted with.

`selected` -> `bool`

Required. Whether the toggle is currently selected.

`onChanged` -> `ValueChanged<bool>?`

Optional. Called with the next selected state when the toggle is pressed. When omitted, the toggle is disabled.

`label` -> `String?`

Optional. Text rendered inside the toggle. At least one of label or icon must be provided.

`icon` -> `IconData?`

Optional. Icon rendered inside the toggle. At least one of label or icon must be provided.

`style` -> `ToggleStyler`

Optional. The style configuration for the toggle.

`styleSpec` → `ToggleSpec?`

Optional. A pre-resolved style spec for the toggle.

`enableFeedback` -> `bool`

Optional. Whether to enable haptic feedback when toggled.

`focusNode` -> `FocusNode?`

Optional. The focus node for the toggle.

`autofocus` -> `bool`

Optional. Whether the toggle should automatically request focus when it is created.

`semanticLabel` -> `String?`

Optional. The semantic label for the toggle.

`excludeSemantics` -> `bool`

Optional. Drops the toggle's own toggled on/off semantics. Use it when an ancestor supplies a different semantics contract, such as selected destination semantics.