Checkbox

A selectable checkbox component for toggling options on and off.

When to use this

• Multi-select lists: Allow users to select multiple items from a list
• Form inputs: Collect boolean preferences or agreement confirmations
• Settings panels: Enable/disable features or options
• Bulk actions: Select multiple items for batch operations

Basic implementation

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

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

  @override
  State<CheckboxExample> createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  bool _isChecked = true;

  @override
  Widget build(BuildContext context) {
    return RemixCheckbox(
      selected: _isChecked,
      onChanged: (value) {
        setState(() {
          _isChecked = value ?? false;
        });
      },
      style: style,
    );
  }

  RemixCheckboxStyle get style {
    return RemixCheckboxStyle()
        .size(24, 24)
        .icon(IconStyler().size(20).color(Colors.white))
        .onSelected(RemixCheckboxStyle().color(Colors.grey.shade900))
        .borderRadiusAll(const Radius.circular(3))
        .border(
          BoxBorderMix.all(
            BorderSideMix().color(Colors.black87).width(2),
          ),
        );
  }
}

Fortal styles

Remix includes Fortal-themed style helpers for this component:

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

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

  @override
  State<FortalCheckboxExample> createState() => _FortalCheckboxExampleState();
}

class _FortalCheckboxExampleState extends State<FortalCheckboxExample> {
  bool _isChecked = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        RemixCheckbox(
          selected: _isChecked,
          onChanged: (value) => setState(() => _isChecked = value ?? false),
          style: FortalCheckboxStyle.solid(),
        ),
        RemixCheckbox(
          selected: _isChecked,
          onChanged: (value) => setState(() => _isChecked = value ?? false),
          style: FortalCheckboxStyle.soft(),
        ),
      ],
    );
  }
}

Constructor

const RemixCheckbox({
  Key? key,
  required bool selected,
  required ValueChanged<bool?>? onChanged,
  bool enabled = true,
  bool? indeterminate,
  MouseCursor mouseCursor = SystemMouseCursors.click,
  bool enableFeedback = true,
  FocusNode? focusNode,
  bool autofocus = false,
  String? semanticLabel,
  RemixCheckboxIconBuilder? iconBuilder,
  RemixCheckboxStyle style = const RemixCheckboxStyle.create(),
  RemixCheckboxSpec? styleSpec,
})

Properties

Widget Properties

key → Key?

Optional. Controls how one widget replaces another widget in the tree.

enabled → bool

Optional. Whether the checkbox is enabled for interaction.

selected → bool?

Required. Whether the checkbox is currently selected. When [tristate] is true, can be null for indeterminate state.

tristate → bool

Optional. Whether the checkbox can be true, false, or null (indeterminate).

onChanged → ValueChanged<bool?>?

Optional. The callback function that is called when the checkbox is tapped. When [tristate] is true, the value can be null.

autofocus → bool

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

checkedIcon → IconData

Optional. The icon to display when the checkbox is checked.

uncheckedIcon → IconData?

Optional. The icon to display when the checkbox is unchecked.

indeterminateIcon → IconData

Optional. The icon to display when the checkbox is in indeterminate state (null value).

enableFeedback → bool

Optional. Whether to provide haptic feedback when the checkbox is toggled. Defaults to true.

style → RemixCheckboxStyle

Optional. The style configuration for the checkbox.

styleSpec → RemixCheckboxSpec?

Optional. The style spec for the checkbox.

focusNode → FocusNode?

Optional. The focus node for the checkbox.

semanticLabel → String?

Optional. The semantic label for the checkbox.

mouseCursor → MouseCursor

Optional. Cursor when hovering over the checkbox.

Style Methods

checkboxSize(double value)

Sets checkbox size by constraining the container.

checkboxBorderRadius(double radius)

Sets checkbox border radius on the container.

border(BoxBorderMix value)

Sets checkbox border on the container.

indicatorColor(Color value)

Sets indicator color.

alignment(Alignment value)

Sets container alignment.

onIndeterminate(RemixCheckboxStyle value)

icon(IconStyler value)

padding(EdgeInsetsGeometryMix value)

Sets container padding.

color(Color value)

Sets checkbox background color on the container.

size(double width, double height)

Sets checkbox size with separate width and height.

borderRadius(BorderRadiusGeometryMix radius)

Sets border radius on the outer container.

animate(AnimationConfig animation)

Sets animation configuration.

wrap(WidgetModifierConfig value)

constraints(BoxConstraintsMix value)

decoration(DecorationMix value)

margin(EdgeInsetsGeometryMix value)

foregroundDecoration(DecorationMix value)

transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)

iconColor(Color value)

Sets icon color

iconSize(double value)

Sets icon size

iconOpacity(double value)

Sets icon opacity

iconWeight(double value)

Sets icon weight (useful for variable icons like Material Symbols)

iconGrade(double value)

Sets icon grade (useful for Material Icons)

iconFill(double value)

Sets icon fill (useful for Material Icons filled variants)

iconOpticalSize(double value)

Sets icon optical size (useful for Material Icons)

iconBlendMode(BlendMode value)

Sets icon blend mode

iconTextDirection(TextDirection value)

Sets icon text direction

iconShadows(List<ShadowMix> value)

Sets icon shadows

iconShadow(ShadowMix value)

Sets single icon shadow