Issue
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)