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;
}))
],
);
}),
],
),
),
);
}
}
Create a data class with sliderValue and option. Then create a list in this data class object type. Try this code snippet: