Slider Widget

Introduction of Slider Widget

The Slider widget in Flutter allows users to select a value from a continuous range by dragging a thumb along a track. It’s commonly used for scenarios like volume controls, brightness adjustments, or any situation where a user needs to choose a value within a range.

Below are some key properties of the Slider widget:

value Property: Represents the current value selected by the slider. It should be linked to a variable that tracks the selected value.

Slider(
  value: _currentValue,
  // Other properties...
)

onChanged Callback: Called whenever the user drags the slider thumb to change the selected value. It provides the new value selected by the user.

Slider(
  onChanged: (newValue) {
    setState(() {
      _currentValue = newValue;
    });
  },
  // Other properties...
)

min and max Properties: Define the minimum and maximum values of the slider range.

Slider(
  min: 0,
  max: 100,
  // Other properties...
)

divisions Property: Specifies the number of discrete intervals on the slider track. These intervals provide visual markers for the user to understand the range.

Slider(
  divisions: 5,
  // Other properties...
)

label Property: A text label that appears alongside the slider thumb to indicate the current selected value.

Slider(
  label: '$_currentValue',
  // Other properties...
)

activeColor and inactiveColor Properties: Set the colors for the slider track when the thumb is active (being dragged) and inactive (not being dragged), respectively.

Slider(
  activeColor: Colors.blue,
  inactiveColor: Colors.grey,
  // Other properties...
)

Usage:

Slider(
  value: _currentValue,
  onChanged: (newValue) {
    setState(() {
      _currentValue = newValue;
    });
  },
  min: 0,
  max: 100,
  divisions: 5,
  label: '$_currentValue',
  activeColor: Colors.blue,
  inactiveColor: Colors.grey,
)

Final Code: This is the final code with some of the above properties.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //Create variable
  double _currentValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            _currentValue.toString(),
            style: TextStyle(fontSize: 40),
          ),
          Slider(
            value: _currentValue,
            min: 0,
            max: 10,
            divisions: 10,
            label: _currentValue.toString(),
            activeColor: Colors.blue,
            thumbColor: Colors.teal,
            onChanged: (value) {
              setState(() {
                _currentValue = value;
              });
            },
          )
        ],
      ),
    );
  }
}

In this example, a Slider widget is configured with various properties, including the current value, onChanged callback to update the selected value, minimum and maximum values, divisions, label, and colors. Adjust these properties to customize the slider according to your application’s requirements.

Thank for visiting Hybrid App Development
Posted by Hussam HM