Switch

In ProgressDark modeRTL

A toggle switch for boolean values.

7:21

Airplane Mode

Dark Mode

Notifications

Receive push notifications

Sync

Installation

Copy the component into your project using the CLI:

$ronakcn add switch

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart

import 'package:flutter/material.dart';
import '../components/switch/switch.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnSwitch Example')),
      body: Center(
        child: RcnSwitch(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Switch ships with the following variants:

default

A standard toggle switch.

7:21

Airplane Mode

Dark Mode

Notifications

Receive push notifications

Sync

checked

Switch in the on state.

7:21

Airplane Mode

Dark Mode

Notifications

Receive push notifications

Sync

unchecked

Switch in the off state.

7:21

Airplane Mode

Dark Mode

Notifications

Receive push notifications

Sync

disabled

Non-interactive disabled switch.

7:21

Airplane Mode

Dark Mode

Notifications

Receive push notifications

Sync

with-label

Switch with an inline label.

7:21

Airplane Mode

Dark Mode

Notifications

Receive push notifications

Sync

with-description

Switch with label and helper text.

7:21

Airplane Mode

Dark Mode

Notifications

Receive push notifications

Sync

Props

Prop	Type	Default	Description
`value`	`bool`	`false`	Current toggle state.
`onChanged`*	`ValueChanged<bool>`	—	Called when toggled.
`label`	`String?`	`null`	Label beside the switch.
`description`	`String?`	`null`	Helper text below the label.
`enabled`	`bool`	`true`	Whether the switch is interactive.

Source files

lib/components/ui/switch.dart

import 'package:flutter/material.dart';

class RcnSwitch extends StatelessWidget {
  const RcnSwitch({
    super.key,
    this.value = false,
    required this.onChanged,
    this.label,
    this.description,
    this.enabled = true,
  });

  final bool value;
  final ValueChanged<bool> onChanged;
  final String? label;
  final String? description;
  final bool enabled;

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    return Row(
      children: [
        if (label != null)
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(label!, style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: enabled ? colors.onSurface : colors.onSurface.withOpacity(0.4))),
                if (description != null)
                  Text(description!, style: TextStyle(fontSize: 12, color: colors.onSurface.withOpacity(0.5))),
              ],
            ),
          ),
        Switch(
          value: value,
          onChanged: enabled ? onChanged : null,
          activeColor: colors.primary,
        ),
      ],
    );
  }
}

Version 0.1.0 · input category