CustomToggleButton

A customizable toggle button widget with smooth animations and flexible styling options.

Features

• Visual Customization:
  • Custom active/inactive colors
  • Adjustable border radius
  • Custom text for both states
  • Flexible text styling
• Layout Control:
  • Configurable width and height
  • Custom padding
• Interactive Elements:
  • Smooth transition animations
  • Tap handler with state change callback
• Accessibility:
  • Clear visual state indication
  • Customizable touch target size

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_toggle_button: ^0.0.2

Basic Usage

bool isToggled = false;

CustomToggleButton(
  value: isToggled,
  onChanged: (newValue) => setState(() => isToggled = newValue),
)

Complete Example

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    // Basic toggle
    CustomToggleButton(
      value: _toggleState1,
      onChanged: (val) => setState(() => _toggleState1 = val),
    ),
    
    SizedBox(height: 20),
    
    // Custom styled toggle
    CustomToggleButton(
      value: _toggleState2,
      onChanged: (val) => setState(() => _toggleState2 = val),
      activeText: "ACTIVE",
      inactiveText: "INACTIVE",
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
      width: 150,
      borderRadius: 20,
      activeTextStyle: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
        fontSize: 18
      ),
    ),
    
    SizedBox(height: 20),
    
    // Small toggle with different styling
    CustomToggleButton(
      value: _toggleState3,
      onChanged: (val) => setState(() => _toggleState3 = val),
      height: 30,
      padding: EdgeInsets.symmetric(horizontal: 10),
      activeText: "✓",
      inactiveText: "✗",
      activeTextStyle: TextStyle(fontSize: 20),
      inActiveTextStyle: TextStyle(fontSize: 20),
    ),
  ],
)

Parameter Reference

Core Properties

Parameter	Type	Required	Description
value	bool	Yes	Current toggle state
onChanged	ValueChanged<bool>	Yes	State change callback

Content Options

Parameter	Type	Default	Description
activeText	String	"ON"	Text shown when active
inactiveText	String	"OFF"	Text shown when inactive
activeTextStyle	TextStyle?	White bold 16	Style for active text
inActiveTextStyle	TextStyle?	White bold 16	Style for inactive text

Styling Options

Parameter	Type	Default	Description
activeColor	Color	Colors.green	Background when active
inactiveColor	Color	Colors.red	Background when inactive
borderRadius	double?	30	Corner radius
width	double?	null	Fixed width
height	double?	null	Fixed height
padding	EdgeInsets?	EdgeInsets.symmetric(horizontal: 20, vertical: 10)	Inner padding

Advanced Usage

With Dynamic Sizing

CustomToggleButton(
  value: isEnabled,
  onChanged: (val) => setState(() => isEnabled = val),
  width: MediaQuery.of(context).size.width * 0.7, // 70% of screen width
  height: 50,
)

With Icons Instead of Text

CustomToggleButton(
  value: isDarkMode,
  onChanged: (val) => setState(() => isDarkMode = val),
  activeText: "🌙",
  inactiveText: "☀️",
  activeTextStyle: TextStyle(fontSize: 24),
  inActiveTextStyle: TextStyle(fontSize: 24),
)

As Part of a Form

Form(
  child: Column(
    children: [
      CustomToggleButton(
        value: _acceptTerms,
        onChanged: (val) => setState(() => _acceptTerms = val),
        activeText: "Terms Accepted",
        inactiveText: "Accept Terms",
      ),
      ElevatedButton(
        onPressed: _acceptTerms ? _submitForm : null,
        child: Text("Submit"),
      ),
    ],
  ),
)

Best Practices

1. Accessibility:

   • Ensure sufficient color contrast between states
   • Provide clear text labels
   • Maintain minimum touch target size (48x48dp)

2. Performance:

   • Avoid unnecessary rebuilds
   • Use const constructors for static text styles

3. Internationalization:

   • Localize button text
   • Consider RTL (right-to-left) layouts

4. State Management:

   • For complex apps, consider using state management solutions
   • Persist toggle state when needed

Comparison with Switch/SwitchListTile

Feature	CustomToggleButton	Switch
Custom Text	Yes	No
Color Customization	Full control	Limited
Shape Customization	Yes	No
Animation	Customizable	Material default
Size Control	Full control	Fixed
Accessibility	Manual implementation	Built-in