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;
}))
],
);
}),
],
),
),
);
}
}
CodePudding user response:
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;
}),
)
],
);
},
),
],
),
),
);
}
}