Flutter Slider Widget

Flutter slider widget – example Code

by


Example of how to create a slider widget in Flutter:

import 'package:flutter/material.dart';

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

class _SliderExampleState extends State<SliderExample> {
  double _mysliderValue = 0.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Slider(
          value: _mysliderValue,
          min: 0.0,
          max: 100.0,
          divisions: 100,
          label: '$_mysliderValue',
          onChanged: (double newValue) {
            setState(() {
              _mysliderValue = newValue;
            });
          },
        ),
        Text('Slider Value: $_mysliderValue'),
      ],
    );
  }
}

This creates a Slider widget with a range of 0 to 100 and a Text widget that displays the current value of the slider. The onChanged callback is used to update the state of the _sliderValue variable and rebuild the widget tree to reflect the changes.

You can customize the look and feel of the slider by using different properties like activeColor, inactiveColor, min, max, divisions, label, etc. You can also customize the thumb shape of the slider using thumbShape and thumbColor properties.

You can also customize the value labels of the slider using valueIndicatorShape and valueIndicatorColor properties. You can also add a semantic label to the slider using semanticFormatterCallback the property.

Read also: Flutter avatar glow animation and Flutter Custom Loading animation

Leave a Comment