ToggleSwitchAppi

A customizable toggle switch widget with smooth animations and flexible styling for Flutter applications.

Features

• Smooth Animations: Fluid toggle transitions with customizable duration
• Custom Styling: Configurable colors, sizes, and visual properties
• Interactive States: Hover and focus effects
• Flexible Layout: Optional label text with customizable positioning
• Accessibility: Built-in accessibility support
• Material Design: Follows Material Design guidelines

Usage

bool isEnabled = false;

ToggleSwitchAppi(
  value: isEnabled,
  onChanged: (bool newValue) {
    setState(() {
      isEnabled = newValue;
    });
  },
  label: 'Enable notifications',
)

Parameters

Parameter	Type	Description
value	bool	Required. Current state of the toggle switch
onChanged	ValueChanged<bool>?	Required. Callback when switch state changes
label	String?	Optional text label displayed next to switch
activeColor	Color?	Color when switch is enabled (default: primary color)
activeTrackColor	Color?	Track color when switch is enabled
inactiveThumbColor	Color?	Thumb color when switch is disabled
inactiveTrackColor	Color?	Track color when switch is disabled
activeThumbImage	ImageProvider?	Image for the thumb when enabled
inactiveThumbImage	ImageProvider?	Image for the thumb when disabled
thumbColor	MaterialStateProperty<Color?>?	Thumb color for different states
trackColor	MaterialStateProperty<Color?>?	Track color for different states
materialTapTargetSize	MaterialTapTargetSize?	Size of the tap target
dragStartBehavior	DragStartBehavior	Drag start behavior (default: start)
mouseCursor	MouseCursor?	Mouse cursor when hovering
focusColor	Color?	Color when switch is focused
hoverColor	Color?	Color when switch is hovered
overlayColor	MaterialStateProperty<Color?>?	Color for different interaction states
splashRadius	double?	Radius of the splash effect
focusNode	FocusNode?	Focus node for keyboard navigation
autofocus	bool	Whether to autofocus (default: false)

Examples

Basic Toggle Switch

bool isDarkMode = false;

ToggleSwitchAppi(
  value: isDarkMode,
  onChanged: (bool value) {
    setState(() {
      isDarkMode = value;
    });
  },
  label: 'Dark Mode',
)

Custom Styled Toggle Switch

bool isNotificationsEnabled = true;

ToggleSwitchAppi(
  value: isNotificationsEnabled,
  onChanged: (bool value) {
    setState(() {
      isNotificationsEnabled = value;
    });
  },
  label: 'Push Notifications',
  activeColor: Colors.green,
  activeTrackColor: Colors.green.withOpacity(0.3),
  inactiveThumbColor: Colors.grey,
  inactiveTrackColor: Colors.grey.withOpacity(0.3),
)

Toggle Switch with Material State Properties

ToggleSwitchAppi(
  value: isFeatureEnabled,
  onChanged: (bool value) {
    setState(() {
      isFeatureEnabled = value;
    });
  },
  label: 'Advanced Features',
  thumbColor: MaterialStateProperty.resolveWith<Color?>(
    (Set<MaterialState> states) {
      if (states.contains(MaterialState.disabled)) {
        return Colors.grey.withOpacity(0.5);
      }
      if (states.contains(MaterialState.selected)) {
        return Colors.blue;
      }
      return Colors.white;
    },
  ),
  trackColor: MaterialStateProperty.resolveWith<Color?>(
    (Set<MaterialState> states) {
      if (states.contains(MaterialState.disabled)) {
        return Colors.grey.withOpacity(0.3);
      }
      if (states.contains(MaterialState.selected)) {
        return Colors.blue.withOpacity(0.5);
      }
      return Colors.grey.withOpacity(0.3);
    },
  ),
)

Disabled Toggle Switch

ToggleSwitchAppi(
  value: true,
  onChanged: null, // Disabled
  label: 'This feature is locked',
)

Toggle Switch in Settings List

Column(
  children: [
    ToggleSwitchAppi(
      value: settings.autoSave,
      onChanged: (bool value) {
        setState(() {
          settings.autoSave = value;
        });
      },
      label: 'Auto-save documents',
    ),
    ToggleSwitchAppi(
      value: settings.showTips,
      onChanged: (bool value) {
        setState(() {
          settings.showTips = value;
        });
      },
      label: 'Show helpful tips',
    ),
    ToggleSwitchAppi(
      value: settings.analytics,
      onChanged: (bool value) {
        setState(() {
          settings.analytics = value;
        });
      },
      label: 'Share usage analytics',
    ),
  ],
)

Best Practices

• Always provide an onChanged callback unless the switch should be disabled
• Use clear, descriptive labels that explain what the switch controls
• Consider the visual hierarchy when placing switches in lists or forms
• Use consistent styling across your app for a cohesive experience
• Provide immediate feedback when the switch state changes
• Consider using SwitchListTile for better integration in lists
• Ensure sufficient tap target size for accessibility (minimum 44x44 pixels)