When i update slider in a ListView.Builder it updates all sliders at once

Issue

I have a list of sliders in my listview.builder, when I slide one slider, it automatically updates the rest of the sliders with the same value. I want each slider to update its value independently

class ApplyForMeScreen extends StatefulWidget {
  const ApplyForMeScreen({Key? key}) : super(key: key);

  static const String routeName = "/ApplyForMeScreen";

  @override
  _AppyForMeScreenState createState() => _AppyForMeScreenState();
}

class _AppyForMeScreenState extends State<ApplyForMeScreen> {
  double sliderValue = 20;
  final options = ['volume 1','volume 2','volume 3','volume 4','volume 5'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Slider"),
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            ListView.builder(
                physics: const BouncingScrollPhysics(),
                shrinkWrap: true,
                itemCount: options.length,
                itemBuilder: (context, index) {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(options[index]),
                      Slider(
                          value: sliderValue,
                          min: 0,
                          max: 100,
                          onChanged: (value) => setState(() {
                                sliderValue = value;
                              }))
                    ],
                  );
                }),
          ],
        ),
      ),
    );
  }
}

View Screenshot

View Screenshot

Solution

Create a data class with sliderValue and option. Then create a list in this data class object type. Try this code snippet:

import 'package:flutter/material.dart';

class SliderData {
  double sliderValue = 0;
  String option = "";

  SliderData(this.option, this.sliderValue);
}

class ApplyForMeScreen extends StatefulWidget {
  const ApplyForMeScreen({Key? key}) : super(key: key);

  static const String routeName = "/ApplyForMeScreen";

  @override
  _AppyForMeScreenState createState() => _AppyForMeScreenState();
}

class _AppyForMeScreenState extends State<ApplyForMeScreen> {
  final slidersData = [
    SliderData('volume 1', 20),
    SliderData('volume 2', 20),
    SliderData('volume 3', 20),
    SliderData('volume 4', 20),
    SliderData('volume 5', 20)
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Slider"),
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            ListView.builder(
              physics: const BouncingScrollPhysics(),
              shrinkWrap: true,
              itemCount: slidersData.length,
              itemBuilder: (context, index) {
                var sliderData = slidersData[index];

                return Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text(sliderData.option),
                    Slider(
                      value: sliderData.sliderValue,
                      min: 0,
                      max: 100,
                      onChanged: (value) => setState(() {
                        sliderData.sliderValue = value;
                      }),
                    )
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Answered By – Zakaria Hossain

Answer Checked By – Pedro (FlutterFixes Volunteer)