我想在用户单击该卡时向我的卡显示音频滑块它将播放歌曲并仅向该卡显示滑块

Question

this is my listtile of songs

这是卡片列表中包含卡片的 img

帮助我像这样向我的音乐应用程序显示滑块

帮助我在我的 flutter 应用程序中显示这样的滑块

**这是在卡片列表中包含卡片的 img **

帮助我像这样向我的音乐应用程序显示滑块

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;
                                  });
                                }
                              }),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
    );
  }
}

Answer 1

您可以将滑块包裹在 Visibility and can control its visibility and functionality of slider or playing music using a GestureDetector 包裹您的 listtile 或卡片小部件。以下是当您单击列表项时显示和隐藏滑块的示例代码：

@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(),
                ],
              ),
            );
          },
        ),
      ),
    );
  }