how to control slider with add and subtract buttons in flutter UI

CodePudding user response：

Try this code :

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  double _currentSliderValue = 20;
  int divisons=20;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            IconButton(
              icon: Icon(Icons.remove),
              onPressed: () {
                setState(() {
                  _currentSliderValue -= divisons;
                });
              },
            ),
            Text(_currentSliderValue.toString()),
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                setState(() {
                  _currentSliderValue  = divisons;
                });
              },
            ),
          ],
        ),
        Slider(
          value: _currentSliderValue,
          max: 100,
          divisions: 5,
          label: _currentSliderValue.round().toString(),
          onChanged: (double value) {
            setState(() {
              _currentSliderValue = value;
            });
          },
        ),
      ],
    );
  }
}

Hope this helps.

CodePudding user response：

Simplified sample

class MyWidget extends StatefulWidget{
  @override
  _MyWidgetState createState() => _MyWidgetState();
}


class _MyWidgetState extends State<MyWidget> {
  int _value = 5;
  double min = 1.0;
  double max = 20.0;
  @override
  Widget build(BuildContext context) {
    return Column(
    children:[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children:[
        IconButton(onPressed:(){
          setState((){
            if(_value < max){
               /// Add as many as you want
              _value  ;
            }
          });
        }, icon: const Icon(Icons.add)),
        IconButton(onPressed:(){
          setState((){
            if(_value > min){
            /// Subtract as many as you want
              _value--;
            }
            
          });
        }, icon: const Icon(Icons.remove)),
      ]
      ),
      Slider(  
                            value: _value.toDouble(),  
                            min: min,  
                            max: max,   
                            activeColor: Colors.green,  
                            inactiveColor: Colors.orange,  
                            label: 'Set volume value',  
                            onChanged: (double newValue) {  
                              setState(() {  
                                _value = newValue.round();  
                                });  
                              },  
                              
                            ),  
    ]);
  }
}

CodePudding user response：

here I have made a demo on learning purpose, it might help u

class _SliderPageState extends State<SliderPage> {
  double _currentSliderValue=15.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
            IconButton(onPressed: (){
              setState(() {
                if(_currentSliderValue<100)
                _currentSliderValue=_currentSliderValue 1;

              });

            }, icon: Icon(Icons.add)),
            Text(_currentSliderValue.round().toString(),style: TextStyle(fontWeight: FontWeight.bold,fontSize: 24),),
            IconButton(onPressed: (){
              setState(() {
                if(_currentSliderValue>1)
                _currentSliderValue=_currentSliderValue-1;

              });
            }, icon: Icon(Icons.remove)),

          ],),
          Slider(
            value: _currentSliderValue,
            max: 100,
            divisions: 100,
            //label: _currentSliderValue.round().toString(),
              onChanged: (double value) {
              setState(() {
                _currentSliderValue = value;
              });
            },
          ),

        ],)
      ),
    );
  }
}