'I am confused on how to utilize this package with my current code, in order to switch songs [closed]
Currently I am making a music app with some special features, but currently I am stuck on the most basic features. One of which being the control panel, I have integrated firebase within the code for servers and a databse, resulting in me creating this browse section.
class _BrowseState extends State<Browse> {
Future getdata() async {
QuerySnapshot qn =
await FirebaseFirestore.instance.collection('songs').get();
return qn.docs;
}
DocumentSnapshot documentSnapshot;
List<DocumentSnapshot> _list;
@override
Widget build(BuildContext context, ) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
centerTitle: true,
title: Text('Home'),
bottom: TabBar(
tabs: [
Tab(text: 'Following'),
Tab(text: 'MP3'),
Tab(text: 'MVs')
],
),
shape: Border(bottom: BorderSide(color: Colors.grey[50], width: 0.3)),
),
body: TabBarView(
children: [
Container(child: Text('Following', style: TextStyle(color: Colors.grey),)),
Container(child: songsection(),),
Container(child: videosection(),)
],),
));
}
Widget songsection(){
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
SizedBox(height: 3,),
Row(children: [SizedBox(height: 10, width: 10), Text('New Songs', style: TextStyle(color: Colors.grey[400],fontSize: 15, fontWeight: FontWeight.bold))]),
StreamBuilder(
stream: FirebaseFirestore.instance
.collection('songs')
.orderBy('song_title')
.snapshots(),
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
} else {
_list = snapshot.data.docs;
return Expanded(
child: ListView.custom(
physics: ScrollPhysics(),
childrenDelegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return songCard(context, _list[index]);
},
childCount: _list.length,
)));
}
},
),])));
}
Widget songList(BuildContext context, DocumentSnapshot documentSnapshot) {
return ListView.builder(
shrinkWrap: true,
itemBuilder: (context, index){
return songCard(context, documentSnapshot);
});
}
Widget songCard(BuildContext context, DocumentSnapshot documentSnapshot){
return GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Songspage(
song_title: documentSnapshot.data()["song_title"],
artist_name: documentSnapshot.data()["artist_name"],
song_url: documentSnapshot.data()["song_url"],
image_url: documentSnapshot.data()["image_url"],
))),
child: Container(
child: Column(
children: [
SizedBox(height: 7,),
SizedBox(width: 3),
Row(
children: <Widget>[
SizedBox(height: 16, width: 10),
Column(
children: [
CircleAvatar(
backgroundColor: Colors.grey,
backgroundImage: NetworkImage(documentSnapshot.data()['image_url']),
radius: 23,
),
SizedBox(height: 10,)]),
SizedBox(height: 4,),
SizedBox(
width: 17.0,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
documentSnapshot.data()['song_title'],
style: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.w400,
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Text(
documentSnapshot.data()['artist_name'],
style: TextStyle(
fontSize: 12.0,
color: Colors.grey,
)
,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
SizedBox(height: 4,)
]),
),
]
),
],
),
decoration: BoxDecoration( border: Border(bottom: BorderSide(color: Colors.grey[50], width: 0.2)),),
),
);
}
now the songcard leads to this page. Ps. this is my package I am using music_player: ^0.1.5
class Songspage extends StatefulWidget {
String song_title, image_url, song_url, artist_name;
Songspage({this.song_title, this.image_url, this.song_url, this.artist_name,
});
@override
_SongspageState createState() => _SongspageState();
}
class _SongspageState extends State<Songspage> {
MusicPlayer musicPlayer;
bool isplaying1 = false;
@override
void initState() {
super.initState();
initPlatformState();
}
Future<void> initPlatformState() async {
musicPlayer = MusicPlayer();
musicPlayer.play(MusicItem(
trackName: widget.song_title==null?'':widget.song_title,
albumName: '',
artistName: widget.artist_name==null?'':widget.artist_name,
url: widget.song_url==null?'':widget.song_url,
coverUrl: widget.image_url==null?'':widget.image_url,
duration: null,
));
musicPlayer.onPlayNext();
}
@override
Widget build(BuildContext context, ) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
centerTitle: true,
title: Image.asset('assets/images/1.png', height: 95, width: 95),
actions: [
GestureDetector(
onTap: () {
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => Home()));
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Icon(Icons.arrow_drop_down_outlined, color: Colors.blue[700], size: 30)),
)
],
),
body: Center(
child: Column(
children: <Widget>[
SizedBox(
height: 30.0,
),
Padding(
padding: const EdgeInsets.all(30.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image.network(widget.image_url,
fit: BoxFit.cover,
height: 175,),
),),
SizedBox(
height: 10.0,
),
Text(
widget.song_title,
style: TextStyle(
fontSize: 25.0, color: Colors.white
)
),
SizedBox(
height: 15.0,
),
GestureDetector(
onTap: () {
Navigator.pushReplacement(
context, MaterialPageRoute(
builder: (context) => ArtistPage(
artist_name: widget.artist_name,
)));
},
child: Text(
widget.artist_name,
style: TextStyle(
fontSize: 17.0,
color: Colors.white
),
)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.skip_previous),
iconSize: 40.0,
color: Colors.blue[700], onPressed: () => musicPlayer.onPlayNext),
SizedBox(width: 10.0,),
IconButton(
icon: Icon(isplaying1 ? Icons.play_arrow_outlined:Icons.pause_outlined),
iconSize: 60.0,
color: isplaying1? Colors.blue[700]:Colors.blue[700],
onPressed: (){
if(isplaying1){
musicPlayer.resume();
setState(() {
isplaying1=false;
});
}
else{
musicPlayer.pause();
setState(() {
isplaying1=true;
});
}}),
SizedBox(
width: 10,
),
IconButton(
icon: Icon(Icons.skip_next),
iconSize: 40.0,
color: Colors.blue[700], onPressed: () => musicPlayer.onPlayNext(
))
],
),
]
),
)
);
}
Now into the main problem I want to create a next, and previous button but I am totally stumped. I have no clue as to how to do this. I know I have to integrate Firebase but I am confused how to, and should I rework my previous code or is the answer simple? Any help would be appreciated
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|