Flutter ListView changing values - list

Question

I have a question:
I have a ListView.builder in Flutter with Songs and every Song item has a Play Button on the left. So I click the play button the Icon changes and the song gets played.
When I click another song in the list how can I set the Icon to stop from the previous song? Like in this Video:
https://youtu.be/zAXN1QQMM-4
So just setting the icon/bool of the previous icon to false and the new one to true.

Answer 1

I believe this is what you are looking for.
You should create a state variable, in this case _index. This value holds the index of the item that is currently being played. In the builder method of the ListView widget you can check if it's index is the same as the state's index.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: App()));
class App extends StatefulWidget {
const App({
Key? key,
}) : super(key: key);
#override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
/// The song that is currently selected.
int? _index;
void _updateSelected(int index) => setState(() => _index = index);
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
// Check whether the index is the selected index.
final _isSelected = index == _index;
return ListTile(
title: Text('Song title'),
// Change the icon based on `isSelected`.
leading: Icon(_isSelected ? Icons.pause : Icons.play_arrow),
// Call the method when the tile is tapped.
onTap: () => _updateSelected(index),
);
},
);
}
}