Flutter Switch & Slider

Interactive toggle and range selection widgets

🎚️ What are Switch & Slider?

Switch toggles between on/off states for binary choices. Slider lets users select values from a range by dragging. Both provide intuitive, touch-friendly controls for settings and adjustments. 


// Simple switch
Switch(
  value: true,
  onChanged: (bool value) {},
)

Output:

Widget Types

🔄

Switch

Toggle on/off states 

Switch(
  value: isOn,
  onChanged: (value) {},
)
📋

SwitchListTile

Switch with label 

SwitchListTile(
  title: Text('WiFi'),
  value: isOn,
  onChanged: (value) {},
)
🎚️

Slider

Select from range 

Slider(
  value: 50,
  min: 0,
  max: 100,
  onChanged: (value) {},
)
🎯

RangeSlider

Select value range 

RangeSlider(
  values: RangeValues(20, 80),
  min: 0,
  max: 100,
  onChanged: (values) {},
)

🔹 Basic Switch

Simple on/off toggle switch: 

class SwitchExample extends StatefulWidget {
  @override
  _SwitchExampleState createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Enable Feature'),
        Switch(
          value: isSwitched,
          onChanged: (bool value) {
            setState(() {
              isSwitched = value;
            });
          },
          activeColor: Colors.green,
        ),
      ],
    );
  }
}

Output:

Enable Feature

🔹 SwitchListTile

Switch with built-in title and subtitle: 

bool _darkMode = false;
bool _notifications = true;
bool _autoUpdate = false;

Column(
  children: [
    SwitchListTile(
      title: Text('Dark Mode'),
      subtitle: Text('Use dark theme'),
      value: _darkMode,
      onChanged: (bool value) {
        setState(() {
          _darkMode = value;
        });
      },
      secondary: Icon(Icons.dark_mode),
    ),
    SwitchListTile(
      title: Text('Notifications'),
      subtitle: Text('Receive push notifications'),
      value: _notifications,
      onChanged: (bool value) {
        setState(() {
          _notifications = value;
        });
      },
      secondary: Icon(Icons.notifications),
      activeColor: Colors.blue,
    ),
    SwitchListTile(
      title: Text('Auto Update'),
      value: _autoUpdate,
      onChanged: (bool value) {
        setState(() {
          _autoUpdate = value;
        });
      },
    ),
  ],
)

Output:

🌙
Dark Mode
Use dark theme
🔔
Notifications
Receive push notifications

🔹 Basic Slider

Select a value from a continuous range: 

class SliderExample extends StatefulWidget {
  @override
  _SliderExampleState createState() => _SliderExampleState();
}

class _SliderExampleState extends State {
  double _currentValue = 50;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Volume: ${_currentValue.round()}'),
        Slider(
          value: _currentValue,
          min: 0,
          max: 100,
          divisions: 10,
          label: _currentValue.round().toString(),
          onChanged: (double value) {
            setState(() {
              _currentValue = value;
            });
          },
        ),
      ],
    );
  }
}

Output:

Volume: 50

🔹 Slider with Labels

Display value labels on slider: 

double _brightness = 0.5;

Column(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Icon(Icons.brightness_low),
        Expanded(
          child: Slider(
            value: _brightness,
            min: 0.0,
            max: 1.0,
            divisions: 10,
            label: '${(_brightness * 100).round()}%',
            activeColor: Colors.amber,
            inactiveColor: Colors.grey[300],
            onChanged: (double value) {
              setState(() {
                _brightness = value;
              });
            },
          ),
        ),
        Icon(Icons.brightness_high),
      ],
    ),
    Text('Brightness: ${(_brightness * 100).round()}%'),
  ],
)

Output:

🔅 🔆
Brightness: 50%

🔹 RangeSlider

Select a range of values with two thumbs: 

class RangeSliderExample extends StatefulWidget {
  @override
  _RangeSliderExampleState createState() => _RangeSliderExampleState();
}

class _RangeSliderExampleState extends State {
  RangeValues _currentRange = RangeValues(20, 80);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          'Price Range: \$${_currentRange.start.round()} - \$${_currentRange.end.round()}',
        ),
        RangeSlider(
          values: _currentRange,
          min: 0,
          max: 100,
          divisions: 20,
          labels: RangeLabels(
            '\$${_currentRange.start.round()}',
            '\$${_currentRange.end.round()}',
          ),
          onChanged: (RangeValues values) {
            setState(() {
              _currentRange = values;
            });
          },
        ),
      ],
    );
  }
}

Output:

Price Range: $20 - $80

🔹 Custom Slider Styling

Customize slider appearance with themes: 

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    activeTrackColor: Colors.purple,
    inactiveTrackColor: Colors.purple[100],
    thumbColor: Colors.purple,
    overlayColor: Colors.purple.withOpacity(0.2),
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12),
    overlayShape: RoundSliderOverlayShape(overlayRadius: 20),
  ),
  child: Slider(
    value: _value,
    min: 0,
    max: 100,
    onChanged: (value) {
      setState(() {
        _value = value;
      });
    },
  ),
)

🧠 Test Your Knowledge

Which widget is used for on/off toggle?