Display Slider in Flutter

Display Slider in Flutter

A slider is input control that allows to select a value from within a given range.

A Slider class is used to create a slider. The minimum and maximum values are specified by min and max properties. The divisions property defines the number of divisions in a slider. For example, if min is 0.0 and max is 100.0 and divisions is 5, then we can select one of these values: 0.0, 20.0, 40.0, 60.0, 80.0, and 100.0. The onChanged callback is called when the user selects the value in a slider. The value property holds currently selected value.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Slider')),
        body: Center(
            child: Slider(
          min: 0.0,
          max: 100.0,
          divisions: 5,
          label: "$_value",
          value: _value,
          onChanged: (value) {
            setState(() => _value = value);
          },
        )));
  }
}

Leave a Comment

Cancel reply

Your email address will not be published.