In this tutorial, We are going to build a Spotify Clone App using Flutter. for this Part, we are going to focus on the Front end of the app which means we are not going to use API or adding a real music player on it but we will learn how to make a bottom nav bar, and how to navigate between different views using flutter.
Introduction
before we start coding our app, let's take a look at our app
as you can see, our app has a bottom nav bar and 4 fragments. we will first code the main file of our app and we will create four files, one for each fragment. Now let's start coding.
Source code:
main.dart
import 'package:flutter/material.dart';
import 'package:spotifyclone/PlayListPage.dart';
import 'package:spotifyclone/ProfilePage.dart';
import 'package:spotifyclone/SearchPage.dart';
import 'HomePage.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _courentTab = 0;
final Tabs = [
HomePage(),
SearchPage(),
PlayListPage(),
ProfilePage(),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SafeArea(
child: Scaffold(
backgroundColor: Colors.black,
body: Tabs[_courentTab], //HomePage(),tabs[_courentTab],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _courentTab,
type: BottomNavigationBarType.shifting,
items:[
BottomNavigationBarItem(
icon: Icon(Icons.home,color: Colors.white,),
title: Text("Home",style: TextStyle(color: Colors.white),),
backgroundColor: Color.fromARGB(255, 20, 20, 20),
),
BottomNavigationBarItem(
icon: Icon(Icons.search,color: Colors.white,),
title: Text("Search",style: TextStyle(color: Colors.white),),
backgroundColor: Color.fromARGB(255, 20, 20, 20),
),
BottomNavigationBarItem(
icon: Icon(Icons.library_music,color: Colors.white,),
title: Text("Music Library",style: TextStyle(color: Colors.white),),
backgroundColor: Color.fromARGB(255, 20, 20, 20),
),
BottomNavigationBarItem(
icon: Icon(Icons.person,color: Colors.white,),
title: Text("Your Account",style: TextStyle(color: Colors.white),),
backgroundColor: Color.fromARGB(255, 20, 20, 20),
),
],
onTap: (index){
setState(() {
_courentTab = index;
});
},
),
),
),
);
}
}
HomePage.dart
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
List<String> CoverList =[
"https://i.pinimg.com/originals/f5/82/47/f58247463e38a536f442bfb816f62c6b.jpg",
"https://www.designformusic.com/wp-content/uploads/2016/09/electro-synthwave-album-cover-500x500.jpg",
"https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/102342461/original/68ef1e1fab3c4028d51f7fd7cfa9bad2232e576c/create-a-copyright-free-album-cover.jpg",
"https://www.designformusic.com/wp-content/uploads/2016/02/volta-music-trailer-music-album-cover-design.jpg",
"https://www.designformusic.com/wp-content/uploads/2018/07/Digital-World-album-cover-design.jpg",
"https://www.designformusic.com/wp-content/uploads/2016/02/volta-music-trailer-music-album-cover-design.jpg"
];
Widget AlbumContainer(String CoverUrl,String CoverName, String SingerName){
return Container(
child: InkWell(
onTap: (){},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Container(
height: 140.0,
width: 140.0,
child: Image.network(CoverUrl)
),
),
SizedBox(height: 12.0,),
Text(
CoverName,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w800,
fontSize: 22.0
),
),
SizedBox(height: 12.0,),
Text(
SingerName,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w300,
fontSize: 18.0
),
),
],
),
),
);
}
@override
Widget build(BuildContext context) {
return Container(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 40.0,horizontal: 25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
"Recommended for you",
style: TextStyle(
color: Colors.white,
fontSize: 28.0
),
),
SizedBox(
height: 20.0,
),
Expanded(
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
AlbumContainer(CoverList[0], "CoverName", "SingerName"),
SizedBox(width: 28.0,),
AlbumContainer(CoverList[1], "CoverName", "SingerName"),
SizedBox(width: 28.0,),
AlbumContainer(CoverList[2], "CoverName", "SingerName"),
SizedBox(width: 28.0,),
],
),
),
Text(
"New Music",
style: TextStyle(
color: Colors.white,
fontSize: 28.0
),
),
SizedBox(
height: 20.0,
),
Expanded(
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
AlbumContainer(CoverList[3], "CoverName", "SingerName"),
SizedBox(width: 28.0,),
AlbumContainer(CoverList[4], "CoverName", "SingerName"),
SizedBox(width: 28.0,),
AlbumContainer(CoverList[5], "CoverName", "SingerName"),
SizedBox(width: 28.0,),
],
),
)
],
),
),
);
}
}
SearchPage.dart
import 'package:flutter/material.dart';
class SearchPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 15.0),
child: Column(
children: <Widget>[
Center(
child: Text(
"Search",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 48.0,
),
),
),
Padding(
padding: const EdgeInsets.all(18.0),
child: TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
fillColor: Colors.white,
prefixIcon: Icon(Icons.search,color: Colors.black,size: 28.0,),
filled: true,
border: InputBorder.none,
hintText: "Find your music",
),
),
),
Expanded(
child: GridView.count(
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
child: const Text("Pop Music",style: TextStyle(
color: Colors.white,
fontSize: 28.0
),),
color: Colors.deepOrange,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
child: const Text("Rock",style: TextStyle(
color: Colors.white,
fontSize: 28.0
),),
color: Colors.deepPurple,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
child: const Text("Hip Hop",style: TextStyle(
color: Colors.white,
fontSize: 28.0
),),
color: Colors.blueAccent,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
child: const Text("Jazz",style: TextStyle(
color: Colors.white,
fontSize: 28.0
),),
color: Colors.amber,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
child: const Text("House",style: TextStyle(
color: Colors.white,
fontSize: 28.0
),),
color: Colors.green,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
child: const Text("Reggae",style: TextStyle(
color: Colors.white,
fontSize: 28.0
),),
color: Colors.red,
),
),
],
),
)
],
),
)
);
}
}
PlayListPage.dart
import 'package:flutter/material.dart';
class PlayListPage extends StatelessWidget {
List<String> CoverList =[
"https://i.pinimg.com/originals/f5/82/47/f58247463e38a536f442bfb816f62c6b.jpg",
"https://www.designformusic.com/wp-content/uploads/2016/09/electro-synthwave-album-cover-500x500.jpg",
"https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/102342461/original/68ef1e1fab3c4028d51f7fd7cfa9bad2232e576c/create-a-copyright-free-album-cover.jpg",
"https://www.designformusic.com/wp-content/uploads/2016/02/volta-music-trailer-music-album-cover-design.jpg",
"https://www.designformusic.com/wp-content/uploads/2018/07/Digital-World-album-cover-design.jpg",
"https://www.designformusic.com/wp-content/uploads/2016/02/volta-music-trailer-music-album-cover-design.jpg"
];
Widget ListItem(String CoverUrl,String AlbumTitle, String SingerName){
return Column(
children: <Widget>[
InkWell(
onTap: (){},
child: Container(
child: Row(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(4.0),
child: Container(
width: 100.0,
height: 100.0,
child: Image.network(CoverUrl),
),
),
SizedBox(width: 20.0,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
AlbumTitle,
style: TextStyle(
color: Colors.white,
fontSize: 28.0,
fontWeight: FontWeight.w800
),
),
SizedBox(height: 12.0,),
Text(
SingerName,
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w300
),
)
],
)
],
),
),
),
SizedBox(height: 20.0,)
],
);
}
@override
Widget build(BuildContext context) {
return Container(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 35.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
"Your Favorite Music",
style: TextStyle(
color: Colors.white,
fontSize: 28.0
),
),
SizedBox(height: 20.0,),
Expanded(
child: ListView(
children: <Widget>[
ListItem(CoverList[0], "AlbumTitle", "SingerName"),
ListItem(CoverList[1], "AlbumTitle", "SingerName"),
ListItem(CoverList[2], "AlbumTitle", "SingerName"),
ListItem(CoverList[3], "AlbumTitle", "SingerName"),
ListItem(CoverList[4], "AlbumTitle", "SingerName"),
ListItem(CoverList[5], "AlbumTitle", "SingerName"),
],
),
)
],
),
),
);
}
}
ProfilePage.dart
import 'package:flutter/material.dart';
class ProfilePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 30.0,horizontal: 22.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 70,
backgroundImage: NetworkImage("https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1276&q=80"),
),
SizedBox(
height: 20.0,
),
Text(
"Doctor Code",
style: TextStyle(
color: Colors.white,
fontSize: 28.0
),
),
SizedBox(
height: 50.0,
),
Row(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Text("501",style: TextStyle(
color: Colors.white,
fontSize: 35.0
),),
SizedBox(height: 5.0,),
Text("Music",style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.w300
),),
],
),
),
Expanded(
child: Column(
children: <Widget>[
Text("20.1K",style: TextStyle(
color: Colors.white,
fontSize: 35.0
),),
SizedBox(height: 5.0,),
Text("Followers",style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.w300
),),
],
),
),
Expanded(
child: Column(
children: <Widget>[
Text("1.2k",style: TextStyle(
color: Colors.white,
fontSize: 35.0
),),
SizedBox(height: 5.0,),
Text("Follow",style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.w300
),),
],
),
),
],
),
SizedBox(
height: 30.0,
),
Padding(
padding: EdgeInsets.all(22.0),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0,vertical: 18.0),
child: Text("Edit Profile", style: TextStyle(
color: Colors.white,
fontSize: 22.0
),),
),
color: Color(0xFF1DD860),
onPressed: (){},
),
)
],
),
)
);
}
}
I hope that this tutorial was helpful, if you liked it you can put on the comment what do you want for future project
Make a Spotify Clone App Using Flutter
Reviewed by Medics
on
July 18, 2020
Rating:
Reviewed by Medics
on
July 18, 2020
Rating:
very good
ReplyDeleteSite positivo, de onde você tirou as informações desta postagem? Eu li alguns dos artigos em seu site agora e gosto muito do seu estilo. Muito obrigado e por favor, continuem com o trabalho eficaz. como rastrear whatsapp
ReplyDeleteThis article is an appealing wealth of informative data that is interesting and well-written. I commend your hard work on this and thank you for this information. You’ve got what it takes to get attention. buy spotify followers
ReplyDelete