How to connect A ListTile to an Audio Widget in flutter

Question

I want to connect 2 ListTiles together. I have a list of ListTiles that I created using ListView.builder.I have also an audio package that requires URLs to play the audio widget.

My ListView.Builder is like this:

ListView.builder(
        padding: const EdgeInsets.all(8),
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(items[index].name),
            trailing: Icon(Icons.play_arrow),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => Audio(),
                ),
              );
            },
          );
        },
      ),

My Audio Widget is like this:

I am using Audio Players package for Audio link is like this.

typedef OnError = void Function(Exception exception);

const kurl =
    'https://download.quranicaudio.com/quran/mishaari_raashid_al_3afaasee/001.mp3';

const kurl2 =
    'https://download.quranicaudio.com/quran/mishaari_raashid_al_3afaasee/002.mp3';

class Audio extends StatefulWidget {
  @override
  _AudioAppState createState() => _AudioAppState();
}

class _AudioAppState extends State<Audio> {
  AudioPlayer advancedPlayer = AudioPlayer();

  Widget remoteUrl() {
    return SingleChildScrollView(
      child: TabWrapper(
        children: [
          Text(
            items.length.toString(),
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
          ),
          PlayerWidget(url: kurl),
          Text(
            items.length.toString(),
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
          ),
          PlayerWidget(url: kurl2),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        StreamProvider<Duration>.value(
          initialData: const Duration(),
          value: advancedPlayer.onAudioPositionChanged,
        ),
      ],
      child: DefaultTabController(
        length: 1,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(text: 'Remote Url'),
              ],
            ),
            title: const Center(
              child: Text(
                'Quran Audio',
                style: TextStyle(fontSize: 30),
              ),
            ),
          ),
          body: remoteUrl(),
        ),
      ),
    );
  }
}

My goal is that the ListTiles that I created When I click on one of them I will be taken to a separate page each containing I audio player widget which has a play button so I can listen to the audio afterwards.Any suggestions will be great. Any answers will be helpfull.

Answer 1

All you simply have to do is add an "Item" model class as a required property for the audio widget. I say "Item" but it's really whatever items[index] is.

Here's what it should look like in the Audio Widget Implementation:

class Audio extends StatefulWidget {
  const Audio(this.item);


  final /*Class Name of items[index]*/ item;

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

class _AudioAppState extends State<Audio> {
  AudioPlayer advancedPlayer = AudioPlayer();

  Widget remoteUrl() {
    return SingleChildScrollView(
      child: TabWrapper(
        children: [
          Text(
            widget.item.length.toString(),
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
          ),
          PlayerWidget(url: kurl),
          Text(
            widget.item.length.toString(),
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
          ),
          PlayerWidget(url: kurl2),
        ],
      ),
    );
  }
...

And then in the ListView.builder() simply pass in items[index].

ListView.builder(
    padding: const EdgeInsets.all(8),
    itemCount: items.length,
    itemBuilder: (BuildContext context, int index) {
      return ListTile(
        title: Text(items[index].name),
        trailing: Icon(Icons.play_arrow),
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => Audio(items[index]),
            ),
          );
        },
      );
    },
  ),
...

I'm not 100% if this is the setup you're looking for, but if this doesn't work please provide a little more information on how you want it.