The ChromiaToggleButton is a widget that toggles the state of a single setting on or off.
Basic Usage
import 'package:chromia_ui/chromia_ui.dart';
bool isEnabled = false;
ChromiaToggleButton(
value: isEnabled,
onChanged: (value) => setState(() => isEnabled = value),
)
With Label
Add a label next to the toggle button:
ChromiaToggleButton(
value: isEnabled,
label: 'Enable notifications',
onChanged: (value) => setState(() => isEnabled = value),
)
// Small
ChromiaToggleButton(
value: isEnabled,
size: ChromiaToggleButtonSize.small,
onChanged: (value) => setState(() => isEnabled = value),
)
// Medium (default)
ChromiaToggleButton(
value: isEnabled,
size: ChromiaToggleButtonSize.medium,
onChanged: (value) => setState(() => isEnabled = value),
)
// Large
ChromiaToggleButton(
value: isEnabled,
size: ChromiaToggleButtonSize.large,
onChanged: (value) => setState(() => isEnabled = value),
)
Custom Colors
Customize the active and inactive colors:
ChromiaToggleButton(
value: isEnabled,
activeColor: Colors.green,
inactiveColor: Colors.grey,
thumbColor: Colors.white,
onChanged: (value) => setState(() => isEnabled = value),
)
Disabled State
Disable the toggle button by setting onChanged to null:
ChromiaToggleButton(
value: isEnabled,
label: 'Disabled toggle',
onChanged: null,
)
ChromiaToggleButton Parameters
Whether the toggle button is on or off.
onChanged
ValueChanged<bool>?
required
Called when the user toggles the button. Set to null to disable.
Optional label text displayed next to the toggle.
Color when the toggle button is on.
Color when the toggle button is off.
Color of the thumb (circular indicator).
size
ChromiaToggleButtonSize
default:"medium"
Size of the toggle button. Options: small, medium, large.
ChromiaListTileToggleButton
A toggle button with a tile layout, similar to Flutter’s SwitchListTile.
Basic Usage
ChromiaListTileToggleButton(
value: isOn,
onChanged: (value) => setState(() => isOn = value),
title: Text('Dark Mode'),
subtitle: Text('Enable dark theme'),
)
With Secondary Widget
Add an icon or widget before the content:
ChromiaListTileToggleButton(
value: isWifiEnabled,
title: Text('Wi-Fi'),
subtitle: Text('Connect to wireless networks'),
secondary: Icon(Icons.wifi),
onChanged: (value) => setState(() => isWifiEnabled = value),
)
With Custom Padding
ChromiaListTileToggleButton(
value: isEnabled,
title: Text('Auto-update'),
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
onChanged: (value) => setState(() => isEnabled = value),
)
Custom Colors and Size
ChromiaListTileToggleButton(
value: isPremium,
title: Text('Premium Features'),
subtitle: Text('Unlock all premium features'),
activeColor: Colors.purple,
size: ChromiaToggleButtonSize.large,
onChanged: (value) => setState(() => isPremium = value),
)
ChromiaListTileToggleButton Parameters
Whether the switch is on or off.
onChanged
ValueChanged<bool>?
required
Called when the user toggles the switch.
Additional content displayed below the title.
A widget to display before the toggle.
Color when the switch is on.
Color when the switch is off.
size
ChromiaToggleButtonSize
default:"medium"
Size of the switch.
Use Cases
Settings Panel
Column(
children: [
ChromiaListTileToggleButton(
value: notificationsEnabled,
title: Text('Push Notifications'),
subtitle: Text('Receive push notifications'),
secondary: Icon(Icons.notifications),
onChanged: (value) => setState(() => notificationsEnabled = value),
),
ChromiaListTileToggleButton(
value: darkModeEnabled,
title: Text('Dark Mode'),
subtitle: Text('Use dark theme'),
secondary: Icon(Icons.dark_mode),
onChanged: (value) => setState(() => darkModeEnabled = value),
),
ChromiaListTileToggleButton(
value: locationEnabled,
title: Text('Location Services'),
subtitle: Text('Allow location access'),
secondary: Icon(Icons.location_on),
onChanged: (value) => setState(() => locationEnabled = value),
),
],
)
Feature Toggles
Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Features', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
SizedBox(height: 16),
ChromiaToggleButton(
value: autoSaveEnabled,
label: 'Auto-save',
onChanged: (value) => setState(() => autoSaveEnabled = value),
),
SizedBox(height: 12),
ChromiaToggleButton(
value: offlineModeEnabled,
label: 'Offline mode',
onChanged: (value) => setState(() => offlineModeEnabled = value),
),
SizedBox(height: 12),
ChromiaToggleButton(
value: analyticsEnabled,
label: 'Analytics',
onChanged: (value) => setState(() => analyticsEnabled = value),
),
],
),
),
)
Privacy Settings
Column(
children: [
ChromiaListTileToggleButton(
value: showEmail,
title: Text('Show Email'),
subtitle: Text('Display email on your profile'),
onChanged: (value) => setState(() => showEmail = value),
),
ChromiaListTileToggleButton(
value: showPhone,
title: Text('Show Phone Number'),
subtitle: Text('Display phone number on your profile'),
onChanged: (value) => setState(() => showPhone = value),
),
ChromiaListTileToggleButton(
value: allowMessages,
title: Text('Allow Messages'),
subtitle: Text('Receive messages from other users'),
onChanged: (value) => setState(() => allowMessages = value),
),
],
)
Inline Toggle
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Enable two-factor authentication'),
ChromiaToggleButton(
value: twoFactorEnabled,
size: ChromiaToggleButtonSize.small,
onChanged: (value) => setState(() => twoFactorEnabled = value),
),
],
)
