i want show audio slider to my card when user click on that card it will play song and show the slider to that card only

Issue

this is my listtile of songs

here is the img which contain card in the card the listtile

help me to show the slider to my this music app such like this

help me to show such slider to my flutter app

**here is the img which contain card in the card the listtile **

help me to show the slider to my this music app such like this

this is how i want to show the slider in my app


    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:audioplayers/audioplayers.dart';
import 'package:punjabi_collection/services/music_model.dart' as mu;
import '../services/api_manage.dart';

class Musicplaylist extends StatefulWidget {
  @override
  _MusicplaylistState createState() => _MusicplaylistState();
}

class _MusicplaylistState extends State<Musicplaylist> {
  AudioPlayer audioPlayer = new AudioPlayer();
  Duration duration = new Duration();
  Duration position = new Duration();
  bool playing = false;

  mu.Data _data;
  List<mu.Audio> _audio = [];
  bool _loading;
  @override
  void initState() {
    super.initState();
    _loading = true;
    _getData();
    initPlayer();
  }

  _getData() async {
    _data = await Services.getData();
    _audio = _data.audio;

    setState(() {
      _loading = false;
    });
  }

  void initPlayer() {
    audioPlayer = new AudioPlayer();

    audioPlayer.durationHandler = (d) => setState(() {
          duration = d;
        });

    audioPlayer.positionHandler = (p) => setState(() {
          position = p;
        });
  }

  void seekToSecond(int second) {
    Duration newDuration = Duration(seconds: second);

    audioPlayer.seek(newDuration);
  }

  Widget slider() {
    return Slider.adaptive(
        activeColor: Colors.blue,
        inactiveColor: Colors.orange,
        min: 0.0,
        value: position.inSeconds.toDouble(),
        max: duration.inSeconds.toDouble(),
        onChanged: (double value) {
          setState(() {
            seekToSecond(value.toInt());
            value = value;
          });
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        title: Text('Punjabi songs',
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.black, fontSize: 20.0)),
        actions: [
          IconButton(
              icon: Icon(Icons.search, size: 30.0, color: Colors.black),
              onPressed: null),
          IconButton(
              icon: Icon(Icons.favorite, size: 30.0, color: Colors.redAccent),
              onPressed: () {})
        ],
      ),
      body: _loading
          ? Center(
              child: CircularProgressIndicator(
              backgroundColor: Colors.amber,
            ))
          : Container(
              child: ListView.builder(
                // physics: ScrollPhysics(),
                shrinkWrap: true,
                itemCount: _data.audio.length,
                itemBuilder: (BuildContext context, int index) {
                
                  mu.Audio audio = _audio[index];
                  return Card(
                    elevation: 0.0,
                    child: Column(
                      children: [
                        ListTile(
                          onTap: () async {
                            audioPlayer.pause();
                            debugPrint('${audio.title}');
                            // await audioPlayer.setUrl(
                            //     
                            //         audio.image);
                          },
                          leading: Image(
                            image: audio.hashCode.hashCode.hashCode.isEven
                                ? AssetImage(
                                    './assets/blue.png',
                                  )
                                : AssetImage('./assets/playb.png'),
                            fit: BoxFit.cover,
                          ),
                          title: Text(
                            audio.title,
                          ),
                          trailing: IconButton(
                              icon: Icon(
                                Icons.favorite_border_rounded,
                                size: 30.0,
                                color: Colors.red,
                              ),
                              onPressed: () async {
                                int status = await audioPlayer.play(
                                  
                                      audio.image.replaceAll(" ", "%20"),
                                );
                                if (status == 1) {
                                  setState(() {
                                    playing = true;
                                  });
                                } else {
                                  setState(() {
                                    playing = false;
                                  });
                                }
                              }),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
    );
  }
}

Solution

You can wrap slider inside Visibility and can control its visibility and functionality of slider or playing music using a GestureDetector wrapping your listtile or card widget. Here is sample code for you that shows and hides the slider when you click on the list item:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 500,
        alignment: Alignment.center,
        child: ListView.builder(
          scrollDirection: Axis.vertical,
          //   physics: AlwaysScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: items == null ? 0 : items.length,
          padding: EdgeInsets.all(2.0),

          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: () {
                setState(() {
                  if (selected != items[index])
                    selected = items[index];
                  else
                    selected = null;
                });
              },
              child: Column(
                children: [
                  Row(
                    children: [
                      CircleAvatar(
                        child: Center(
                          child: Text(
                            items[index][0].toUpperCase(),
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 8,
                      ),
                      Expanded(child: Text(items[index])),
                    ],
                  ),
                  Visibility(
                    visible: selected == items[index],
                    child: slider(),
                  ),
                  Divider(),
                ],
              ),
            );
          },
        ),
      ),
    );
  }

Answered By – Asad Rehman

Answer Checked By – Timothy Miller (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.