Slider widget and Attributes

Slider widget and Attributes

ยท

2 min read

The Slider widget in Flutter is a user interface element that allows users to select a value from a continuous range by dragging a thumb along a track. It's commonly used for settings, adjusting volume, brightness, or any other numerical values.

Attributes:

  1. value (double):

    • The current value of the slider.
  2. onChanged (ValueChanged<double>):

    • A callback function that is called whenever the value of the slider changes.
  3. min (double):

    • The minimum value of the slider's range.
  4. max (double):

    • The maximum value of the slider's range.
  5. divisions (int):

    • The number of discrete divisions or intervals within the slider's range.
  6. label (String):

    • A text label that is displayed above the slider when it's active.
  7. activeColor (Color):

    • The color of the track and thumb when the slider is active (being dragged).
  8. inactiveColor (Color):

    • The color of the track when the slider is inactive (not being dragged).

Example:

import 'package:flutter/material.dart';

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

class _SliderExampleState extends State<SliderExample> {
  double _currentValue = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Value: $_currentValue'),
            SizedBox(height: 16),
            Slider(
              value: _currentValue,
              min: 0,
              max: 100,
              divisions: 10,
              label: '$_currentValue',
              onChanged: (value) {
                setState(() {
                  _currentValue = value;
                });
              },
              activeColor: Colors.blue,
              inactiveColor: Colors.grey,
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: SliderExample(),
  ));
}

In this example, a Slider widget is used to allow users to select a value between 0 and 100. The current value of the slider is displayed as text below it. When the user drags the thumb, the value is updated accordingly. The activeColor is set to blue, and the inactiveColor is set to grey. This demonstrates how you can use the Slider widget to create interactive and customizable sliders in your Flutter app.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย