├── .vscode └── settings.json ├── ios ├── Flutter │ ├── Debug.xcconfig │ ├── Release.xcconfig │ └── AppFrameworkInfo.plist ├── Runner │ ├── Runner-Bridging-Header.h │ ├── Assets.xcassets │ │ ├── LaunchImage.imageset │ │ │ ├── LaunchImage.png │ │ │ ├── LaunchImage@2x.png │ │ │ ├── LaunchImage@3x.png │ │ │ ├── README.md │ │ │ └── Contents.json │ │ └── AppIcon.appiconset │ │ │ ├── Icon-App-20x20@1x.png │ │ │ ├── Icon-App-20x20@2x.png │ │ │ ├── Icon-App-20x20@3x.png │ │ │ ├── Icon-App-29x29@1x.png │ │ │ ├── Icon-App-29x29@2x.png │ │ │ ├── Icon-App-29x29@3x.png │ │ │ ├── Icon-App-40x40@1x.png │ │ │ ├── Icon-App-40x40@2x.png │ │ │ ├── Icon-App-40x40@3x.png │ │ │ ├── Icon-App-60x60@2x.png │ │ │ ├── Icon-App-60x60@3x.png │ │ │ ├── Icon-App-76x76@1x.png │ │ │ ├── Icon-App-76x76@2x.png │ │ │ ├── Icon-App-1024x1024@1x.png │ │ │ ├── Icon-App-83.5x83.5@2x.png │ │ │ └── Contents.json │ ├── AppDelegate.swift │ ├── Base.lproj │ │ ├── Main.storyboard │ │ └── LaunchScreen.storyboard │ └── Info.plist ├── Runner.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ ├── WorkspaceSettings.xcsettings │ │ └── IDEWorkspaceChecks.plist ├── Runner.xcodeproj │ ├── project.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ ├── WorkspaceSettings.xcsettings │ │ │ └── IDEWorkspaceChecks.plist │ ├── xcshareddata │ │ └── xcschemes │ │ │ └── Runner.xcscheme │ └── project.pbxproj └── .gitignore ├── assets ├── images │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ ├── 9.jpg │ └── thumbnail.png ├── fonts │ ├── Proxima Nova Black.otf │ ├── Proxima Nova Bold.otf │ ├── Proxima Nova Thin.otf │ ├── ProximaNova-Regular.otf │ └── Proxima Nova Extrabold.otf └── icons │ ├── dot.svg │ ├── arrow_left.svg │ ├── down_chevron.svg │ ├── library.svg │ ├── search.svg │ ├── play.svg │ ├── next.svg │ ├── devices.svg │ ├── back.svg │ ├── home.svg │ ├── actions.svg │ ├── spotify.svg │ ├── minus_circle.svg │ ├── shuffle.svg │ ├── heart.svg │ ├── share.svg │ └── gear.svg ├── lib ├── models │ ├── artist_model.dart │ ├── song_model.dart │ └── playlist_model.dart ├── main.dart ├── widgets │ ├── song_controller.g.dart │ ├── sp_slider.g.dart │ ├── playlist_item.g.dart │ ├── shuffle_button.g.dart │ ├── user_playlist_item.g.dart │ ├── playing_navigation.g.dart │ ├── song_item.g.dart │ ├── playlist_section.g.dart │ ├── sp_button.g.dart │ ├── sp_button.dart │ ├── shuffle_button.dart │ ├── sp_bottom_navigation.g.dart │ ├── sp_slider.dart │ ├── song_controller.dart │ ├── playlist_item.dart │ ├── playlist_section.dart │ ├── user_playlist_item.dart │ ├── playing_navigation.dart │ ├── song_item.dart │ └── sp_bottom_navigation.dart ├── helpers │ └── page_routes.dart ├── screens │ ├── home │ │ ├── home_screen.g.dart │ │ └── home_screen.dart │ ├── playlist_detail │ │ ├── playlist_detail_screen.g.dart │ │ └── playlist_detail_screen.dart │ └── song_detail │ │ ├── song_detail_screen.g.dart │ │ └── song_detail_screen.dart ├── constants.dart └── data │ └── playlists.dart ├── android ├── gradle.properties ├── app │ ├── src │ │ ├── main │ │ │ ├── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── drawable │ │ │ │ │ └── launch_background.xml │ │ │ │ └── values │ │ │ │ │ └── styles.xml │ │ │ ├── kotlin │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ └── spotify_ui_clone │ │ │ │ │ └── MainActivity.kt │ │ │ └── AndroidManifest.xml │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ └── profile │ │ │ └── AndroidManifest.xml │ └── build.gradle ├── gradle │ └── wrapper │ │ └── gradle-wrapper.properties ├── .gitignore ├── settings.gradle ├── build.gradle └── spotify_ui_clone_android.iml ├── .idea ├── runConfigurations │ └── main_dart.xml ├── modules.xml ├── libraries │ ├── KotlinJavaRuntime.xml │ └── Dart_SDK.xml └── workspace.xml ├── .metadata ├── README.md ├── .gitignore ├── spotify_ui_clone.iml ├── LICENSE ├── test └── widget_test.dart └── pubspec.yaml /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "window.zoomLevel": 3 3 | } -------------------------------------------------------------------------------- /ios/Flutter/Debug.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Generated.xcconfig" 2 | -------------------------------------------------------------------------------- /ios/Flutter/Release.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Generated.xcconfig" 2 | -------------------------------------------------------------------------------- /ios/Runner/Runner-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | #import "GeneratedPluginRegistrant.h" 2 | -------------------------------------------------------------------------------- /assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/1.jpg -------------------------------------------------------------------------------- /assets/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/10.jpg -------------------------------------------------------------------------------- /assets/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/11.jpg -------------------------------------------------------------------------------- /assets/images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/12.jpg -------------------------------------------------------------------------------- /assets/images/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/13.jpg -------------------------------------------------------------------------------- /assets/images/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/14.jpg -------------------------------------------------------------------------------- /assets/images/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/15.jpg -------------------------------------------------------------------------------- /assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/2.jpg -------------------------------------------------------------------------------- /assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/3.jpg -------------------------------------------------------------------------------- /assets/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/4.jpg -------------------------------------------------------------------------------- /assets/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/5.jpg -------------------------------------------------------------------------------- /assets/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/6.jpg -------------------------------------------------------------------------------- /assets/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/7.jpg -------------------------------------------------------------------------------- /assets/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/8.jpg -------------------------------------------------------------------------------- /assets/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/9.jpg -------------------------------------------------------------------------------- /lib/models/artist_model.dart: -------------------------------------------------------------------------------- 1 | class Artist { 2 | final String name; 3 | 4 | Artist({this.name}); 5 | } 6 | -------------------------------------------------------------------------------- /assets/images/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/images/thumbnail.png -------------------------------------------------------------------------------- /assets/fonts/Proxima Nova Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/fonts/Proxima Nova Black.otf -------------------------------------------------------------------------------- /assets/fonts/Proxima Nova Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/fonts/Proxima Nova Bold.otf -------------------------------------------------------------------------------- /assets/fonts/Proxima Nova Thin.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/fonts/Proxima Nova Thin.otf -------------------------------------------------------------------------------- /assets/fonts/ProximaNova-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/fonts/ProximaNova-Regular.otf -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | org.gradle.jvmargs=-Xmx1536M 2 | android.enableR8=true 3 | android.useAndroidX=true 4 | android.enableJetifier=true 5 | -------------------------------------------------------------------------------- /assets/fonts/Proxima Nova Extrabold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/assets/fonts/Proxima Nova Extrabold.otf -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /assets/icons/dot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jameelsocorro/spotify_ui_clone/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png -------------------------------------------------------------------------------- /ios/Runner.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /android/app/src/main/kotlin/com/example/spotify_ui_clone/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.example.spotify_ui_clone 2 | 3 | import io.flutter.embedding.android.FlutterActivity 4 | 5 | class MainActivity: FlutterActivity() { 6 | } 7 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Fri Jun 23 08:50:38 CEST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip 7 | -------------------------------------------------------------------------------- /lib/models/song_model.dart: -------------------------------------------------------------------------------- 1 | import 'package:spotify_ui_clone/models/artist_model.dart'; 2 | 3 | class Song { 4 | final String title; 5 | final String image; 6 | final List artists; 7 | final bool active; 8 | 9 | Song({this.title, this.image, this.artists, this.active = false}); 10 | } 11 | -------------------------------------------------------------------------------- /ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PreviewsEnabled 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/runConfigurations/main_dart.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /assets/icons/arrow_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/down_chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /android/.gitignore: -------------------------------------------------------------------------------- 1 | gradle-wrapper.jar 2 | /.gradle 3 | /captures/ 4 | /gradlew 5 | /gradlew.bat 6 | /local.properties 7 | GeneratedPluginRegistrant.java 8 | 9 | # Remember to never publicly share your keystore. 10 | # See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app 11 | key.properties 12 | -------------------------------------------------------------------------------- /assets/icons/library.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PreviewsEnabled 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /lib/models/playlist_model.dart: -------------------------------------------------------------------------------- 1 | import 'package:spotify_ui_clone/models/song_model.dart'; 2 | 3 | class Playlist { 4 | final String title; 5 | final String image; 6 | final bool shuffle; 7 | final String likes; 8 | final List songs; 9 | 10 | Playlist({this.title, this.image, this.shuffle, this.likes, this.songs}); 11 | } 12 | -------------------------------------------------------------------------------- /.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled and should not be manually edited. 5 | 6 | version: 7 | revision: bbfbf1770cca2da7c82e887e4e4af910034800b6 8 | channel: stable 9 | 10 | project_type: app 11 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /android/app/src/profile/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md: -------------------------------------------------------------------------------- 1 | # Launch Screen Assets 2 | 3 | You can customize the launch screen with your own desired assets by replacing the image files in this directory. 4 | 5 | You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images. -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /ios/Runner/AppDelegate.swift: -------------------------------------------------------------------------------- 1 | import UIKit 2 | import Flutter 3 | 4 | @UIApplicationMain 5 | @objc class AppDelegate: FlutterAppDelegate { 6 | override func application( 7 | _ application: UIApplication, 8 | didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? 9 | ) -> Bool { 10 | GeneratedPluginRegistrant.register(with: self) 11 | return super.application(application, didFinishLaunchingWithOptions: launchOptions) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /assets/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | 3 | def localPropertiesFile = new File(rootProject.projectDir, "local.properties") 4 | def properties = new Properties() 5 | 6 | assert localPropertiesFile.exists() 7 | localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) } 8 | 9 | def flutterSdkPath = properties.getProperty("flutter.sdk") 10 | assert flutterSdkPath != null, "flutter.sdk not set in local.properties" 11 | apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle" 12 | -------------------------------------------------------------------------------- /lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:spotify_ui_clone/screens/home/home_screen.dart'; 3 | 4 | void main() { 5 | runApp(MyApp()); 6 | } 7 | 8 | class MyApp extends StatelessWidget { 9 | // This widget is the root of your application. 10 | @override 11 | Widget build(BuildContext context) { 12 | return MaterialApp( 13 | debugShowCheckedModeBanner: false, 14 | theme: ThemeData(fontFamily: 'Proxima Nova'), 15 | home: HomeScreen(), 16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /android/app/src/main/res/drawable/launch_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /lib/widgets/song_controller.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'song_controller.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class SongController extends StatelessWidget { 10 | const SongController({Key key}) : super(key: key); 11 | 12 | @override 13 | Widget build(BuildContext _context) => songController(_context); 14 | } 15 | -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchImage.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchImage@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchImage@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /lib/widgets/sp_slider.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'sp_slider.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class SpSlider extends StatelessWidget { 10 | const SpSlider({Key key, this.value}) : super(key: key); 11 | 12 | final double value; 13 | 14 | @override 15 | Widget build(BuildContext _context) => spSlider(_context, value: value); 16 | } 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # spotify_ui_clone 2 | 3 | This repository is based on converting this mockup into a flutter app. 4 | 5 | ![app](assets/images/thumbnail.png?raw=true) 6 | 7 | ## Youtube 8 | You may watch it here: https://youtu.be/JBI78K7G5sg 9 | >Make sure to like + subscribe my [youtube](https://www.youtube.com/c/jameelsocorro) for more! 10 | 11 | 12 | ## Support Me 13 | 14 | **BTC**: 33K7ie7b5vHzypAV3VZZLf9JY5Zahm5zt9 15 | 16 | **ETH**: 0x451e22d4ef070eedbb5a7eec3bf62f7d0fee9b54 17 | 18 | **BCH**: prv7c2juzp5yrwej0mkmuq7z42ccxc3crvase72jcn 19 | 20 | Enjoy! 21 | -------------------------------------------------------------------------------- /lib/widgets/playlist_item.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'playlist_item.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class PlaylistItem extends StatelessWidget { 10 | const PlaylistItem({Key key, @required this.data}) : super(key: key); 11 | 12 | final Playlist data; 13 | 14 | @override 15 | Widget build(BuildContext _context) => playlistItem(_context, data: data); 16 | } 17 | -------------------------------------------------------------------------------- /lib/widgets/shuffle_button.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'shuffle_button.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class ShuffleButton extends StatelessWidget { 10 | const ShuffleButton({Key key, this.onTap}) : super(key: key); 11 | 12 | final Function onTap; 13 | 14 | @override 15 | Widget build(BuildContext _context) => shuffleButton(_context, onTap: onTap); 16 | } 17 | -------------------------------------------------------------------------------- /lib/widgets/user_playlist_item.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'user_playlist_item.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class UserPlaylistItem extends StatelessWidget { 10 | const UserPlaylistItem({Key key, @required this.data}) : super(key: key); 11 | 12 | final Playlist data; 13 | 14 | @override 15 | Widget build(BuildContext _context) => userPlaylistItem(_context, data: data); 16 | } 17 | -------------------------------------------------------------------------------- /lib/widgets/playing_navigation.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'playing_navigation.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class PlayingNavigation extends StatelessWidget { 10 | const PlayingNavigation({Key key, @required this.currentSong}) 11 | : super(key: key); 12 | 13 | final Song currentSong; 14 | 15 | @override 16 | Widget build(BuildContext _context) => 17 | playingNavigation(_context, currentSong: currentSong); 18 | } 19 | -------------------------------------------------------------------------------- /lib/widgets/song_item.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'song_item.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class SongItem extends StatelessWidget { 10 | const SongItem({Key key, @required this.playlist, @required this.data}) 11 | : super(key: key); 12 | 13 | final Playlist playlist; 14 | 15 | final Song data; 16 | 17 | @override 18 | Widget build(BuildContext _context) => 19 | songItem(_context, playlist: playlist, data: data); 20 | } 21 | -------------------------------------------------------------------------------- /assets/icons/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.idea/libraries/KotlinJavaRuntime.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /ios/.gitignore: -------------------------------------------------------------------------------- 1 | *.mode1v3 2 | *.mode2v3 3 | *.moved-aside 4 | *.pbxuser 5 | *.perspectivev3 6 | **/*sync/ 7 | .sconsign.dblite 8 | .tags* 9 | **/.vagrant/ 10 | **/DerivedData/ 11 | Icon? 12 | **/Pods/ 13 | **/.symlinks/ 14 | profile 15 | xcuserdata 16 | **/.generated/ 17 | Flutter/App.framework 18 | Flutter/Flutter.framework 19 | Flutter/Flutter.podspec 20 | Flutter/Generated.xcconfig 21 | Flutter/app.flx 22 | Flutter/app.zip 23 | Flutter/flutter_assets/ 24 | Flutter/flutter_export_environment.sh 25 | ServiceDefinitions.json 26 | Runner/GeneratedPluginRegistrant.* 27 | 28 | # Exceptions to above rules. 29 | !default.mode1v3 30 | !default.mode2v3 31 | !default.pbxuser 32 | !default.perspectivev3 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://www.dartlang.org/guides/libraries/private-files 2 | 3 | # Files and directories created by pub 4 | .dart_tool/ 5 | .packages 6 | build/ 7 | # If you're building an application, you may want to check-in your pubspec.lock 8 | pubspec.lock 9 | 10 | # Directory created by dartdoc 11 | # If you don't generate documentation locally you can remove this line. 12 | doc/api/ 13 | 14 | # Avoid committing generated Javascript files: 15 | *.dart.js 16 | *.info.json # Produced by the --dump-info flag. 17 | *.js # When generated by dart2js. Don't specify *.js if your 18 | # project includes source files written in JavaScript. 19 | *.js_ 20 | *.js.deps 21 | *.js.map 22 | -------------------------------------------------------------------------------- /lib/widgets/playlist_section.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'playlist_section.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class PlaylistSection extends StatelessWidget { 10 | const PlaylistSection( 11 | {Key key, @required this.title, @required this.playlists}) 12 | : super(key: key); 13 | 14 | final String title; 15 | 16 | final List playlists; 17 | 18 | @override 19 | Widget build(BuildContext _context) => 20 | playlistSection(_context, title: title, playlists: playlists); 21 | } 22 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext.kotlin_version = '1.3.50' 3 | repositories { 4 | google() 5 | jcenter() 6 | } 7 | 8 | dependencies { 9 | classpath 'com.android.tools.build:gradle:3.5.0' 10 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 11 | } 12 | } 13 | 14 | allprojects { 15 | repositories { 16 | google() 17 | jcenter() 18 | } 19 | } 20 | 21 | rootProject.buildDir = '../build' 22 | subprojects { 23 | project.buildDir = "${rootProject.buildDir}/${project.name}" 24 | } 25 | subprojects { 26 | project.evaluationDependsOn(':app') 27 | } 28 | 29 | task clean(type: Delete) { 30 | delete rootProject.buildDir 31 | } 32 | -------------------------------------------------------------------------------- /lib/widgets/sp_button.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'sp_button.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class SpButton extends StatelessWidget { 10 | const SpButton({Key key, this.title, this.onPressed, this.height, this.width}) 11 | : super(key: key); 12 | 13 | final String title; 14 | 15 | final Function onPressed; 16 | 17 | final double height; 18 | 19 | final double width; 20 | 21 | @override 22 | Widget build(BuildContext _context) => spButton(_context, 23 | title: title, onPressed: onPressed, height: height, width: width); 24 | } 25 | -------------------------------------------------------------------------------- /lib/widgets/sp_button.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 3 | import 'package:spotify_ui_clone/constants.dart'; 4 | 5 | part 'sp_button.g.dart'; 6 | 7 | @widget 8 | Widget spButton( 9 | BuildContext context, { 10 | String title, 11 | Function onPressed, 12 | double height, 13 | double width, 14 | }) { 15 | return Container( 16 | height: height ?? kSpacingUnit * 4, 17 | width: height ?? kSpacingUnit * 10, 18 | decoration: BoxDecoration( 19 | color: kGreenColor, 20 | borderRadius: BorderRadius.circular(kSpacingUnit * 3), 21 | ), 22 | child: Center( 23 | child: Text( 24 | title, 25 | style: kBodyTextStyle.copyWith( 26 | fontWeight: FontWeight.bold, 27 | ), 28 | ), 29 | ), 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /assets/icons/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /lib/widgets/shuffle_button.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 3 | import 'package:flutter_svg/flutter_svg.dart'; 4 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 5 | import 'package:spotify_ui_clone/constants.dart'; 6 | 7 | part 'shuffle_button.g.dart'; 8 | 9 | @widget 10 | Widget shuffleButton(BuildContext context, {Function onTap}) { 11 | return GestureDetector( 12 | onTap: onTap, 13 | child: Container( 14 | height: kSpacingUnit * 1.2, 15 | width: kSpacingUnit * 1.6, 16 | decoration: BoxDecoration( 17 | color: kGreyColor, 18 | borderRadius: BorderRadius.circular(4.w), 19 | ), 20 | child: Padding( 21 | padding: EdgeInsets.all(2.w), 22 | child: SvgPicture.asset('assets/icons/shuffle.svg'), 23 | ), 24 | ), 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /ios/Flutter/AppFrameworkInfo.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | $(DEVELOPMENT_LANGUAGE) 7 | CFBundleExecutable 8 | App 9 | CFBundleIdentifier 10 | io.flutter.flutter.app 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | App 15 | CFBundlePackageType 16 | FMWK 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1.0 23 | MinimumOSVersion 24 | 8.0 25 | 26 | 27 | -------------------------------------------------------------------------------- /assets/icons/devices.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /spotify_ui_clone.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/icons/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /lib/helpers/page_routes.dart: -------------------------------------------------------------------------------- 1 | import 'package:animations/animations.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | class SharedAxisPageRoute extends PageRouteBuilder { 5 | SharedAxisPageRoute({ 6 | Widget page, 7 | SharedAxisTransitionType transitionType = SharedAxisTransitionType.horizontal, 8 | }) : super( 9 | pageBuilder: ( 10 | BuildContext context, 11 | Animation primaryAnimation, 12 | Animation secondaryAnimation, 13 | ) => 14 | page, 15 | transitionsBuilder: ( 16 | BuildContext context, 17 | Animation primaryAnimation, 18 | Animation secondaryAnimation, 19 | Widget child, 20 | ) { 21 | return SharedAxisTransition( 22 | animation: primaryAnimation, 23 | secondaryAnimation: secondaryAnimation, 24 | transitionType: transitionType, 25 | child: child, 26 | ); 27 | }, 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /lib/screens/home/home_screen.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'home_screen.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class HomeScreen extends StatelessWidget { 10 | const HomeScreen({Key key}) : super(key: key); 11 | 12 | @override 13 | Widget build(BuildContext _context) => homeScreen(_context); 14 | } 15 | 16 | class HomePreferredPlaylistSection extends StatelessWidget { 17 | const HomePreferredPlaylistSection({Key key}) : super(key: key); 18 | 19 | @override 20 | Widget build(BuildContext _context) => homePreferredPlaylistSection(_context); 21 | } 22 | 23 | class HomeUserPlaylist extends StatelessWidget { 24 | const HomeUserPlaylist({Key key, @required this.playlist}) : super(key: key); 25 | 26 | final List playlist; 27 | 28 | @override 29 | Widget build(BuildContext _context) => 30 | homeUserPlaylist(_context, playlist: playlist); 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Jameel Socorro 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /lib/widgets/sp_bottom_navigation.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'sp_bottom_navigation.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class SpBottomNavigation extends HookWidget { 10 | const SpBottomNavigation({Key key, this.songIsPlaying = false}) 11 | : super(key: key); 12 | 13 | final bool songIsPlaying; 14 | 15 | @override 16 | Widget build(BuildContext _context) => 17 | spBottomNavigation(_context, songIsPlaying: songIsPlaying); 18 | } 19 | 20 | class SpBottomNavigationItem extends StatelessWidget { 21 | const SpBottomNavigationItem( 22 | {Key key, this.title, this.icon, this.onTap, this.active}) 23 | : super(key: key); 24 | 25 | final String title; 26 | 27 | final String icon; 28 | 29 | final Function onTap; 30 | 31 | final bool active; 32 | 33 | @override 34 | Widget build(BuildContext _context) => spBottomNavigationItem(_context, 35 | title: title, icon: icon, onTap: onTap, active: active); 36 | } 37 | -------------------------------------------------------------------------------- /assets/icons/actions.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /test/widget_test.dart: -------------------------------------------------------------------------------- 1 | // This is a basic Flutter widget test. 2 | // 3 | // To perform an interaction with a widget in your test, use the WidgetTester 4 | // utility that Flutter provides. For example, you can send tap and scroll 5 | // gestures. You can also use WidgetTester to find child widgets in the widget 6 | // tree, read text, and verify that the values of widget properties are correct. 7 | 8 | import 'package:flutter/material.dart'; 9 | import 'package:flutter_test/flutter_test.dart'; 10 | 11 | import 'package:spotify_ui_clone/main.dart'; 12 | 13 | void main() { 14 | testWidgets('Counter increments smoke test', (WidgetTester tester) async { 15 | // Build our app and trigger a frame. 16 | await tester.pumpWidget(MyApp()); 17 | 18 | // Verify that our counter starts at 0. 19 | expect(find.text('0'), findsOneWidget); 20 | expect(find.text('1'), findsNothing); 21 | 22 | // Tap the '+' icon and trigger a frame. 23 | await tester.tap(find.byIcon(Icons.add)); 24 | await tester.pump(); 25 | 26 | // Verify that our counter has incremented. 27 | expect(find.text('0'), findsNothing); 28 | expect(find.text('1'), findsOneWidget); 29 | }); 30 | } 31 | -------------------------------------------------------------------------------- /assets/icons/spotify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.idea/libraries/Dart_SDK.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /lib/widgets/sp_slider.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 3 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 4 | import 'package:spotify_ui_clone/constants.dart'; 5 | 6 | part 'sp_slider.g.dart'; 7 | 8 | @widget 9 | Widget spSlider(BuildContext context, {double value}) { 10 | return Column( 11 | children: [ 12 | Container( 13 | height: 4.w, 14 | width: double.infinity, 15 | child: ClipRRect( 16 | borderRadius: BorderRadius.circular(2.w), 17 | child: Stack( 18 | children: [ 19 | Container( 20 | color: Color.fromRGBO(255, 255, 255, 0.1), 21 | ), 22 | Container( 23 | width: value, 24 | color: kTextColor, 25 | ), 26 | ], 27 | ), 28 | ), 29 | ), 30 | SizedBox(height: kSpacingUnit), 31 | Row( 32 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 33 | children: [ 34 | Text( 35 | '0:10', 36 | style: kCaptionTextStyle, 37 | ), 38 | Text( 39 | '1:49', 40 | style: kCaptionTextStyle, 41 | ), 42 | ], 43 | ) 44 | ], 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /lib/constants.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 3 | 4 | //Layout 5 | final kSpacingUnit = 10.w; 6 | 7 | //Color Schemes 8 | const kBlackColor = Color(0xFF121212); 9 | const kGreenColor = Color(0xFF1DB954); 10 | const kBottomNavColor = Color(0xFF282828); 11 | const kDarkGreyColor = Color(0xFF2A2A2A); 12 | const kGreyColor = Color(0xFFC4C4C4); 13 | const kTextColor = Color(0xFFFAFAFA); 14 | const kSecondaryTextColor = Color(0xFFAEAEAE); 15 | 16 | //Typography 17 | final kHeadingTextStyle = TextStyle( 18 | color: kTextColor, 19 | fontSize: 20.sp, 20 | fontWeight: FontWeight.w700, 21 | ); 22 | 23 | final kTitleTextStyle = TextStyle( 24 | color: kTextColor, 25 | fontSize: 17.sp, 26 | fontWeight: FontWeight.w700, 27 | ); 28 | 29 | final kSubTitleTextStyle = TextStyle( 30 | color: kTextColor, 31 | fontSize: 15.sp, 32 | fontWeight: FontWeight.w700, 33 | ); 34 | 35 | final kBodyTextStyle = TextStyle( 36 | color: kTextColor, 37 | fontSize: 13.sp, 38 | fontWeight: FontWeight.w400, 39 | ); 40 | 41 | final kCaptionTextStyle = TextStyle( 42 | color: kSecondaryTextColor, 43 | fontSize: 10.sp, 44 | fontWeight: FontWeight.w400, 45 | ); 46 | 47 | final kNavTitleTextStyle = TextStyle( 48 | color: kSecondaryTextColor, 49 | fontSize: 8.sp, 50 | fontWeight: FontWeight.w400, 51 | ); 52 | -------------------------------------------------------------------------------- /lib/widgets/song_controller.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 3 | import 'package:flutter_svg/flutter_svg.dart'; 4 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 5 | import 'package:spotify_ui_clone/constants.dart'; 6 | 7 | part 'song_controller.g.dart'; 8 | 9 | @widget 10 | Widget songController(BuildContext context) { 11 | return Row( 12 | mainAxisAlignment: MainAxisAlignment.center, 13 | children: [ 14 | SvgPicture.asset( 15 | 'assets/icons/next.svg', 16 | height: 18.sp, 17 | width: 18.sp, 18 | ), 19 | SizedBox(width: kSpacingUnit * 3), 20 | Container( 21 | height: kSpacingUnit * 7, 22 | width: kSpacingUnit * 7, 23 | decoration: BoxDecoration( 24 | color: kTextColor, 25 | shape: BoxShape.circle, 26 | ), 27 | child: Center( 28 | child: SvgPicture.asset( 29 | 'assets/icons/play.svg', 30 | height: 24.sp, 31 | width: 24.sp, 32 | color: kBlackColor, 33 | ), 34 | ), 35 | ), 36 | SizedBox(width: kSpacingUnit * 3), 37 | SvgPicture.asset( 38 | 'assets/icons/back.svg', 39 | height: 18.sp, 40 | width: 18.sp, 41 | ), 42 | ], 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /lib/widgets/playlist_item.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 3 | import 'package:spotify_ui_clone/constants.dart'; 4 | import 'package:spotify_ui_clone/helpers/page_routes.dart'; 5 | import 'package:spotify_ui_clone/models/playlist_model.dart'; 6 | import 'package:spotify_ui_clone/screens/playlist_detail/playlist_detail_screen.dart'; 7 | import 'package:spotify_ui_clone/widgets/shuffle_button.dart'; 8 | 9 | part 'playlist_item.g.dart'; 10 | 11 | @widget 12 | Widget playlistItem(BuildContext context, {@required Playlist data}) { 13 | return GestureDetector( 14 | onTap: () { 15 | final route = SharedAxisPageRoute( 16 | page: PlaylistDetailScreen(data: data), 17 | ); 18 | 19 | Navigator.of(context).push(route); 20 | }, 21 | child: Column( 22 | crossAxisAlignment: CrossAxisAlignment.start, 23 | children: [ 24 | Image.asset( 25 | data.image, 26 | height: kSpacingUnit * 15, 27 | width: kSpacingUnit * 15, 28 | ), 29 | SizedBox(height: kSpacingUnit), 30 | Row( 31 | children: [ 32 | if (data.shuffle) ...[ 33 | ShuffleButton(), 34 | SizedBox(width: kSpacingUnit * 0.5), 35 | ], 36 | Text(data.title, style: kSubTitleTextStyle), 37 | ], 38 | ), 39 | ], 40 | ), 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /lib/widgets/playlist_section.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 3 | import 'package:spotify_ui_clone/constants.dart'; 4 | import 'package:spotify_ui_clone/models/playlist_model.dart'; 5 | import 'package:spotify_ui_clone/widgets/playlist_item.dart'; 6 | 7 | part 'playlist_section.g.dart'; 8 | 9 | @widget 10 | Widget playlistSection(BuildContext context, {@required String title, @required List playlists}) { 11 | return Column( 12 | crossAxisAlignment: CrossAxisAlignment.start, 13 | children: [ 14 | Padding( 15 | padding: EdgeInsets.symmetric(horizontal: kSpacingUnit * 2), 16 | child: Text(title, style: kHeadingTextStyle), 17 | ), 18 | SizedBox(height: kSpacingUnit * 2), 19 | Container( 20 | height: kSpacingUnit * 18, 21 | child: ListView.builder( 22 | scrollDirection: Axis.horizontal, 23 | itemCount: playlists.length, 24 | itemBuilder: (context, index) { 25 | return Container( 26 | margin: EdgeInsets.only( 27 | left: index == 0 ? kSpacingUnit * 2 : kSpacingUnit, 28 | right: index == playlists.length - 1 ? kSpacingUnit * 2 : kSpacingUnit, 29 | ), 30 | child: PlaylistItem(data: playlists[index]), 31 | ); 32 | }, 33 | ), 34 | ), 35 | ], 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /assets/icons/minus_circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /lib/screens/playlist_detail/playlist_detail_screen.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'playlist_detail_screen.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class PlaylistDetailScreen extends StatelessWidget { 10 | const PlaylistDetailScreen({Key key, this.data}) : super(key: key); 11 | 12 | final Playlist data; 13 | 14 | @override 15 | Widget build(BuildContext _context) => 16 | playlistDetailScreen(_context, data: data); 17 | } 18 | 19 | class PlaylistDetailHeader extends StatelessWidget { 20 | const PlaylistDetailHeader({Key key}) : super(key: key); 21 | 22 | @override 23 | Widget build(BuildContext _context) => playlistDetailHeader(_context); 24 | } 25 | 26 | class PlaylistDetailCoverImageSection extends StatelessWidget { 27 | const PlaylistDetailCoverImageSection({Key key, this.data}) : super(key: key); 28 | 29 | final Playlist data; 30 | 31 | @override 32 | Widget build(BuildContext _context) => 33 | playlistDetailCoverImageSection(_context, data: data); 34 | } 35 | 36 | class PlaylistDetailSongs extends StatelessWidget { 37 | const PlaylistDetailSongs( 38 | {Key key, @required this.playlist, @required this.data}) 39 | : super(key: key); 40 | 41 | final Playlist playlist; 42 | 43 | final List data; 44 | 45 | @override 46 | Widget build(BuildContext _context) => 47 | playlistDetailSongs(_context, playlist: playlist, data: data); 48 | } 49 | -------------------------------------------------------------------------------- /lib/screens/song_detail/song_detail_screen.g.dart: -------------------------------------------------------------------------------- 1 | // GENERATED CODE - DO NOT MODIFY BY HAND 2 | 3 | part of 'song_detail_screen.dart'; 4 | 5 | // ************************************************************************** 6 | // FunctionalWidgetGenerator 7 | // ************************************************************************** 8 | 9 | class SongDetailScreen extends StatelessWidget { 10 | const SongDetailScreen( 11 | {Key key, @required this.playlist, @required this.data}) 12 | : super(key: key); 13 | 14 | final Playlist playlist; 15 | 16 | final Song data; 17 | 18 | @override 19 | Widget build(BuildContext _context) => 20 | songDetailScreen(_context, playlist: playlist, data: data); 21 | } 22 | 23 | class SongDetailHeader extends StatelessWidget { 24 | const SongDetailHeader({Key key, this.title}) : super(key: key); 25 | 26 | final String title; 27 | 28 | @override 29 | Widget build(BuildContext _context) => 30 | songDetailHeader(_context, title: title); 31 | } 32 | 33 | class SongDetailCoverImage extends StatelessWidget { 34 | const SongDetailCoverImage({Key key, @required this.data}) : super(key: key); 35 | 36 | final Song data; 37 | 38 | @override 39 | Widget build(BuildContext _context) => 40 | songDetailCoverImage(_context, data: data); 41 | } 42 | 43 | class SongDetailControls extends StatelessWidget { 44 | const SongDetailControls({Key key, @required this.data}) : super(key: key); 45 | 46 | final Song data; 47 | 48 | @override 49 | Widget build(BuildContext _context) => 50 | songDetailControls(_context, data: data); 51 | } 52 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /ios/Runner/Base.lproj/Main.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /android/spotify_ui_clone_android.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /ios/Runner/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | $(DEVELOPMENT_LANGUAGE) 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | spotify_ui_clone 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | $(FLUTTER_BUILD_NAME) 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | $(FLUTTER_BUILD_NUMBER) 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIMainStoryboardFile 28 | Main 29 | UISupportedInterfaceOrientations 30 | 31 | UIInterfaceOrientationPortrait 32 | UIInterfaceOrientationLandscapeLeft 33 | UIInterfaceOrientationLandscapeRight 34 | 35 | UISupportedInterfaceOrientations~ipad 36 | 37 | UIInterfaceOrientationPortrait 38 | UIInterfaceOrientationPortraitUpsideDown 39 | UIInterfaceOrientationLandscapeLeft 40 | UIInterfaceOrientationLandscapeRight 41 | 42 | UIViewControllerBasedStatusBarAppearance 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | def localProperties = new Properties() 2 | def localPropertiesFile = rootProject.file('local.properties') 3 | if (localPropertiesFile.exists()) { 4 | localPropertiesFile.withReader('UTF-8') { reader -> 5 | localProperties.load(reader) 6 | } 7 | } 8 | 9 | def flutterRoot = localProperties.getProperty('flutter.sdk') 10 | if (flutterRoot == null) { 11 | throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.") 12 | } 13 | 14 | def flutterVersionCode = localProperties.getProperty('flutter.versionCode') 15 | if (flutterVersionCode == null) { 16 | flutterVersionCode = '1' 17 | } 18 | 19 | def flutterVersionName = localProperties.getProperty('flutter.versionName') 20 | if (flutterVersionName == null) { 21 | flutterVersionName = '1.0' 22 | } 23 | 24 | apply plugin: 'com.android.application' 25 | apply plugin: 'kotlin-android' 26 | apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" 27 | 28 | android { 29 | compileSdkVersion 28 30 | 31 | sourceSets { 32 | main.java.srcDirs += 'src/main/kotlin' 33 | } 34 | 35 | lintOptions { 36 | disable 'InvalidPackage' 37 | } 38 | 39 | defaultConfig { 40 | // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). 41 | applicationId "com.example.spotify_ui_clone" 42 | minSdkVersion 16 43 | targetSdkVersion 28 44 | versionCode flutterVersionCode.toInteger() 45 | versionName flutterVersionName 46 | } 47 | 48 | buildTypes { 49 | release { 50 | // TODO: Add your own signing config for the release build. 51 | // Signing with the debug keys for now, so `flutter run --release` works. 52 | signingConfig signingConfigs.debug 53 | } 54 | } 55 | } 56 | 57 | flutter { 58 | source '../..' 59 | } 60 | 61 | dependencies { 62 | implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" 63 | } 64 | -------------------------------------------------------------------------------- /lib/widgets/user_playlist_item.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 3 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 4 | import 'package:spotify_ui_clone/constants.dart'; 5 | import 'package:spotify_ui_clone/helpers/page_routes.dart'; 6 | import 'package:spotify_ui_clone/models/playlist_model.dart'; 7 | import 'package:spotify_ui_clone/screens/playlist_detail/playlist_detail_screen.dart'; 8 | import 'package:spotify_ui_clone/widgets/shuffle_button.dart'; 9 | 10 | part 'user_playlist_item.g.dart'; 11 | 12 | @widget 13 | Widget userPlaylistItem(BuildContext context, {@required Playlist data}) { 14 | return GestureDetector( 15 | onTap: () { 16 | final route = SharedAxisPageRoute( 17 | page: PlaylistDetailScreen(data: data), 18 | ); 19 | 20 | Navigator.of(context).push(route); 21 | }, 22 | child: Container( 23 | margin: EdgeInsets.all(kSpacingUnit * 0.5), 24 | height: kSpacingUnit * 6, 25 | width: double.infinity, 26 | child: ClipRRect( 27 | borderRadius: BorderRadius.circular(4.w), 28 | child: Container( 29 | decoration: BoxDecoration( 30 | color: kDarkGreyColor, 31 | ), 32 | child: Row( 33 | children: [ 34 | Image.asset( 35 | data.image, 36 | height: kSpacingUnit * 6, 37 | width: kSpacingUnit * 6, 38 | ), 39 | SizedBox(width: kSpacingUnit), 40 | Expanded( 41 | child: Text( 42 | data.title, 43 | style: kSubTitleTextStyle, 44 | softWrap: true, 45 | ), 46 | ), 47 | SizedBox(width: kSpacingUnit), 48 | if (data.shuffle) ...[ 49 | ShuffleButton(), 50 | SizedBox(width: kSpacingUnit), 51 | ] 52 | ], 53 | ), 54 | ), 55 | ), 56 | ), 57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /lib/widgets/playing_navigation.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 3 | import 'package:flutter_svg/svg.dart'; 4 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 5 | import 'package:spotify_ui_clone/constants.dart'; 6 | import 'package:spotify_ui_clone/models/song_model.dart'; 7 | 8 | part 'playing_navigation.g.dart'; 9 | 10 | @widget 11 | Widget playingNavigation(BuildContext context, {@required Song currentSong}) { 12 | return Container( 13 | height: kSpacingUnit * 7, 14 | decoration: BoxDecoration( 15 | border: Border( 16 | top: BorderSide( 17 | color: Color(0xFF4D5559), 18 | width: 1.sp, 19 | ), 20 | bottom: BorderSide( 21 | color: kBlackColor, 22 | width: 1.sp, 23 | ), 24 | ), 25 | ), 26 | child: Row( 27 | children: [ 28 | Image.asset( 29 | currentSong.image, 30 | height: kSpacingUnit * 7, 31 | width: kSpacingUnit * 7, 32 | ), 33 | SizedBox(width: kSpacingUnit), 34 | Text( 35 | currentSong.title, 36 | style: kCaptionTextStyle.copyWith( 37 | fontWeight: FontWeight.bold, 38 | color: kTextColor, 39 | ), 40 | ), 41 | SizedBox(width: kSpacingUnit * 0.5), 42 | SvgPicture.asset( 43 | 'assets/icons/dot.svg', 44 | height: 3.sp, 45 | width: 3.sp, 46 | ), 47 | SizedBox(width: kSpacingUnit * 0.5), 48 | Text( 49 | currentSong.artists.map((a) => a.name).join(','), 50 | style: kCaptionTextStyle, 51 | ), 52 | const Spacer(), 53 | SvgPicture.asset( 54 | 'assets/icons/heart.svg', 55 | height: 20.sp, 56 | width: 24.sp, 57 | ), 58 | SizedBox(width: kSpacingUnit * 2), 59 | SvgPicture.asset( 60 | 'assets/icons/play.svg', 61 | height: 24.sp, 62 | width: 24.sp, 63 | ), 64 | SizedBox(width: kSpacingUnit * 2), 65 | ], 66 | ), 67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /assets/icons/shuffle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/icons/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /lib/widgets/song_item.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 3 | import 'package:flutter_svg/flutter_svg.dart'; 4 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 5 | import 'package:spotify_ui_clone/constants.dart'; 6 | import 'package:spotify_ui_clone/helpers/page_routes.dart'; 7 | import 'package:spotify_ui_clone/models/playlist_model.dart'; 8 | import 'package:spotify_ui_clone/models/song_model.dart'; 9 | import 'package:spotify_ui_clone/screens/song_detail/song_detail_screen.dart'; 10 | 11 | part 'song_item.g.dart'; 12 | 13 | @widget 14 | Widget songItem(BuildContext context, {@required Playlist playlist, @required Song data}) { 15 | return GestureDetector( 16 | behavior: HitTestBehavior.opaque, 17 | onTap: () { 18 | final route = SharedAxisPageRoute( 19 | page: SongDetailScreen( 20 | playlist: playlist, 21 | data: data, 22 | ), 23 | ); 24 | 25 | Navigator.of(context).push(route); 26 | }, 27 | child: Container( 28 | width: double.infinity, 29 | margin: EdgeInsets.symmetric( 30 | horizontal: kSpacingUnit * 2, 31 | vertical: kSpacingUnit, 32 | ), 33 | child: Row( 34 | children: [ 35 | Image.asset( 36 | data.image, 37 | height: kSpacingUnit * 5, 38 | width: kSpacingUnit * 5, 39 | ), 40 | SizedBox(width: kSpacingUnit), 41 | Expanded( 42 | child: Column( 43 | crossAxisAlignment: CrossAxisAlignment.start, 44 | children: [ 45 | Text( 46 | data.title, 47 | overflow: TextOverflow.ellipsis, 48 | style: kBodyTextStyle.copyWith( 49 | fontWeight: FontWeight.bold, 50 | color: data.active ? kGreenColor : kTextColor, 51 | ), 52 | ), 53 | Text( 54 | data.artists.map((a) => a.name).join(', '), 55 | overflow: TextOverflow.ellipsis, 56 | style: kCaptionTextStyle, 57 | ), 58 | ], 59 | ), 60 | ), 61 | SizedBox(width: kSpacingUnit * 2), 62 | SvgPicture.asset( 63 | 'assets/icons/actions.svg', 64 | height: 20.sp, 65 | width: 20.sp, 66 | ), 67 | ], 68 | ), 69 | ), 70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /ios/Runner/Base.lproj/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 8 | 12 | 19 | 23 | 27 | 32 | 36 | 37 | 38 | 39 | 40 | 41 | 43 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /assets/icons/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "size" : "20x20", 5 | "idiom" : "iphone", 6 | "filename" : "Icon-App-20x20@2x.png", 7 | "scale" : "2x" 8 | }, 9 | { 10 | "size" : "20x20", 11 | "idiom" : "iphone", 12 | "filename" : "Icon-App-20x20@3x.png", 13 | "scale" : "3x" 14 | }, 15 | { 16 | "size" : "29x29", 17 | "idiom" : "iphone", 18 | "filename" : "Icon-App-29x29@1x.png", 19 | "scale" : "1x" 20 | }, 21 | { 22 | "size" : "29x29", 23 | "idiom" : "iphone", 24 | "filename" : "Icon-App-29x29@2x.png", 25 | "scale" : "2x" 26 | }, 27 | { 28 | "size" : "29x29", 29 | "idiom" : "iphone", 30 | "filename" : "Icon-App-29x29@3x.png", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "size" : "40x40", 35 | "idiom" : "iphone", 36 | "filename" : "Icon-App-40x40@2x.png", 37 | "scale" : "2x" 38 | }, 39 | { 40 | "size" : "40x40", 41 | "idiom" : "iphone", 42 | "filename" : "Icon-App-40x40@3x.png", 43 | "scale" : "3x" 44 | }, 45 | { 46 | "size" : "60x60", 47 | "idiom" : "iphone", 48 | "filename" : "Icon-App-60x60@2x.png", 49 | "scale" : "2x" 50 | }, 51 | { 52 | "size" : "60x60", 53 | "idiom" : "iphone", 54 | "filename" : "Icon-App-60x60@3x.png", 55 | "scale" : "3x" 56 | }, 57 | { 58 | "size" : "20x20", 59 | "idiom" : "ipad", 60 | "filename" : "Icon-App-20x20@1x.png", 61 | "scale" : "1x" 62 | }, 63 | { 64 | "size" : "20x20", 65 | "idiom" : "ipad", 66 | "filename" : "Icon-App-20x20@2x.png", 67 | "scale" : "2x" 68 | }, 69 | { 70 | "size" : "29x29", 71 | "idiom" : "ipad", 72 | "filename" : "Icon-App-29x29@1x.png", 73 | "scale" : "1x" 74 | }, 75 | { 76 | "size" : "29x29", 77 | "idiom" : "ipad", 78 | "filename" : "Icon-App-29x29@2x.png", 79 | "scale" : "2x" 80 | }, 81 | { 82 | "size" : "40x40", 83 | "idiom" : "ipad", 84 | "filename" : "Icon-App-40x40@1x.png", 85 | "scale" : "1x" 86 | }, 87 | { 88 | "size" : "40x40", 89 | "idiom" : "ipad", 90 | "filename" : "Icon-App-40x40@2x.png", 91 | "scale" : "2x" 92 | }, 93 | { 94 | "size" : "76x76", 95 | "idiom" : "ipad", 96 | "filename" : "Icon-App-76x76@1x.png", 97 | "scale" : "1x" 98 | }, 99 | { 100 | "size" : "76x76", 101 | "idiom" : "ipad", 102 | "filename" : "Icon-App-76x76@2x.png", 103 | "scale" : "2x" 104 | }, 105 | { 106 | "size" : "83.5x83.5", 107 | "idiom" : "ipad", 108 | "filename" : "Icon-App-83.5x83.5@2x.png", 109 | "scale" : "2x" 110 | }, 111 | { 112 | "size" : "1024x1024", 113 | "idiom" : "ios-marketing", 114 | "filename" : "Icon-App-1024x1024@1x.png", 115 | "scale" : "1x" 116 | } 117 | ], 118 | "info" : { 119 | "version" : 1, 120 | "author" : "xcode" 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /lib/widgets/sp_bottom_navigation.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_hooks/flutter_hooks.dart'; 3 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 4 | import 'package:flutter_svg/flutter_svg.dart'; 5 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 6 | import 'package:spotify_ui_clone/constants.dart'; 7 | import 'package:spotify_ui_clone/data/playlists.dart'; 8 | import 'package:spotify_ui_clone/widgets/playing_navigation.dart'; 9 | 10 | part 'sp_bottom_navigation.g.dart'; 11 | 12 | @hwidget 13 | Widget spBottomNavigation(BuildContext context, {bool songIsPlaying = false}) { 14 | final currentIndex = useState(0); 15 | 16 | onTabChanged(index) { 17 | currentIndex.value = index; 18 | } 19 | 20 | return Positioned( 21 | left: 0, 22 | right: 0, 23 | bottom: 0, 24 | child: Container( 25 | color: kBottomNavColor, 26 | child: Column( 27 | children: [ 28 | if (songIsPlaying) 29 | PlayingNavigation( 30 | currentSong: defaultSong, 31 | ), 32 | Container( 33 | height: kSpacingUnit * 6, 34 | padding: EdgeInsets.symmetric(horizontal: kSpacingUnit * 2), 35 | child: Row( 36 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 37 | crossAxisAlignment: CrossAxisAlignment.center, 38 | children: [ 39 | SpBottomNavigationItem( 40 | title: 'Home', 41 | icon: 'assets/icons/home.svg', 42 | active: currentIndex.value == 0, 43 | onTap: () => onTabChanged(0), 44 | ), 45 | SpBottomNavigationItem( 46 | title: 'Search', 47 | icon: 'assets/icons/search.svg', 48 | active: currentIndex.value == 1, 49 | onTap: () => onTabChanged(1), 50 | ), 51 | SpBottomNavigationItem( 52 | title: 'Library', 53 | icon: 'assets/icons/library.svg', 54 | active: currentIndex.value == 2, 55 | onTap: () => onTabChanged(2), 56 | ), 57 | SpBottomNavigationItem( 58 | title: 'Premium', 59 | icon: 'assets/icons/spotify.svg', 60 | active: currentIndex.value == 3, 61 | onTap: () => onTabChanged(3), 62 | ), 63 | ], 64 | ), 65 | ), 66 | ], 67 | ), 68 | ), 69 | ); 70 | } 71 | 72 | @widget 73 | Widget spBottomNavigationItem(BuildContext context, {String title, String icon, Function onTap, bool active}) { 74 | return Padding( 75 | padding: EdgeInsets.all(kSpacingUnit), 76 | child: GestureDetector( 77 | onTap: onTap, 78 | child: Column( 79 | mainAxisAlignment: MainAxisAlignment.center, 80 | children: [ 81 | SvgPicture.asset( 82 | icon, 83 | height: 20.sp, 84 | width: 20.sp, 85 | color: active ? kTextColor : kSecondaryTextColor, 86 | ), 87 | SizedBox(height: 2.w), 88 | Text( 89 | title, 90 | style: kNavTitleTextStyle.copyWith( 91 | color: active ? kTextColor : kSecondaryTextColor, 92 | ), 93 | ) 94 | ], 95 | ), 96 | ), 97 | ); 98 | } 99 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 33 | 39 | 40 | 41 | 42 | 43 | 44 | 54 | 56 | 62 | 63 | 64 | 65 | 66 | 67 | 73 | 75 | 81 | 82 | 83 | 84 | 86 | 87 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /lib/data/playlists.dart: -------------------------------------------------------------------------------- 1 | import 'package:spotify_ui_clone/models/artist_model.dart'; 2 | import 'package:spotify_ui_clone/models/playlist_model.dart'; 3 | import 'package:spotify_ui_clone/models/song_model.dart'; 4 | 5 | final defaultSong = Song( 6 | title: 'memories of her, last winter', 7 | image: 'assets/images/4.jpg', 8 | artists: [ 9 | Artist(name: 'Rook1e'), 10 | ], 11 | ); 12 | 13 | final userLeftPlaylistData = [ 14 | Playlist( 15 | title: 'Place in the sun', 16 | image: 'assets/images/1.jpg', 17 | shuffle: true, 18 | likes: '2.5M', 19 | songs: [defaultSong], 20 | ), 21 | Playlist( 22 | title: 'Causeway Trends', 23 | image: 'assets/images/2.jpg', 24 | shuffle: true, 25 | likes: '2.5M', 26 | songs: [defaultSong], 27 | ), 28 | Playlist( 29 | title: 'Light & Easy', 30 | image: 'assets/images/4.jpg', 31 | shuffle: true, 32 | likes: '2.5M', 33 | songs: [defaultSong], 34 | ), 35 | ]; 36 | 37 | final userRightPlaylistData = [ 38 | Playlist( 39 | title: 'Lo-Fi Beats', 40 | image: 'assets/images/8.jpg', 41 | shuffle: false, 42 | likes: '3.5M', 43 | songs: [defaultSong], 44 | ), 45 | Playlist( 46 | title: 'Alone Again', 47 | image: 'assets/images/3.jpg', 48 | shuffle: true, 49 | likes: '2.5M', 50 | songs: [defaultSong], 51 | ), 52 | Playlist( 53 | title: 'LUSH LOFI', 54 | image: 'assets/images/6.jpg', 55 | shuffle: false, 56 | likes: '2.5M', 57 | songs: [defaultSong], 58 | ), 59 | ]; 60 | 61 | final recentlyPlayed = [ 62 | Playlist( 63 | title: 'Lo-Fi Beats', 64 | image: 'assets/images/8.jpg', 65 | shuffle: false, 66 | likes: '3.5M', 67 | songs: [ 68 | Song( 69 | active: true, 70 | title: 'memories of her, last winter', 71 | image: 'assets/images/4.jpg', 72 | artists: [ 73 | Artist(name: 'Rook1e'), 74 | Artist(name: 'softy'), 75 | ], 76 | ), 77 | Song( 78 | title: 'Lullabyes', 79 | image: 'assets/images/10.jpg', 80 | artists: [ 81 | Artist(name: 'Aviscerall'), 82 | ], 83 | ), 84 | Song( 85 | title: 'Walking in the Rain to a Cafe to Write Down Private Thoughts in Public', 86 | image: 'assets/images/5.jpg', 87 | artists: [ 88 | Artist(name: 'City Girl'), 89 | ], 90 | ), 91 | Song( 92 | title: 'Now That You’re Gone', 93 | image: 'assets/images/7.jpg', 94 | artists: [ 95 | Artist(name: 'Kavv'), 96 | ], 97 | ), 98 | Song( 99 | title: 'Quitted Hills', 100 | image: 'assets/images/15.jpg', 101 | artists: [ 102 | Artist(name: 'ocha'), 103 | Artist(name: 'Laffey'), 104 | ], 105 | ), 106 | ], 107 | ), 108 | Playlist( 109 | title: 'Beast Mode', 110 | image: 'assets/images/14.jpg', 111 | shuffle: true, 112 | likes: '2.5M', 113 | songs: [defaultSong], 114 | ), 115 | Playlist( 116 | title: 'Work From Home', 117 | image: 'assets/images/13.jpg', 118 | shuffle: false, 119 | likes: '2.5M', 120 | songs: [defaultSong], 121 | ), 122 | ]; 123 | 124 | final jumpBackIn = [ 125 | Playlist( 126 | title: 'Happy Hits', 127 | image: 'assets/images/11.jpg', 128 | shuffle: false, 129 | likes: '2.5M', 130 | songs: [defaultSong], 131 | ), 132 | Playlist( 133 | title: 'Confidence Boost', 134 | image: 'assets/images/12.jpg', 135 | shuffle: false, 136 | likes: '2.5M', 137 | songs: [defaultSong], 138 | ), 139 | Playlist( 140 | title: 'Jazz Hits', 141 | image: 'assets/images/9.jpg', 142 | shuffle: false, 143 | likes: '2.5M', 144 | songs: [defaultSong], 145 | ), 146 | ]; 147 | -------------------------------------------------------------------------------- /lib/screens/home/home_screen.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/rendering.dart'; 3 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 4 | import 'package:flutter_svg/svg.dart'; 5 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 6 | import 'package:spotify_ui_clone/constants.dart'; 7 | import 'package:spotify_ui_clone/data/playlists.dart'; 8 | import 'package:spotify_ui_clone/models/playlist_model.dart'; 9 | import 'package:spotify_ui_clone/widgets/playlist_section.dart'; 10 | import 'package:spotify_ui_clone/widgets/sp_bottom_navigation.dart'; 11 | import 'package:spotify_ui_clone/widgets/user_playlist_item.dart'; 12 | 13 | part 'home_screen.g.dart'; 14 | 15 | @widget 16 | Widget homeScreen(BuildContext context) { 17 | ScreenUtil.init(designSize: Size(414, 896), allowFontScaling: true); 18 | 19 | return Scaffold( 20 | backgroundColor: kBlackColor, 21 | body: SafeArea( 22 | child: Container( 23 | decoration: BoxDecoration( 24 | gradient: LinearGradient( 25 | begin: Alignment.topLeft, 26 | end: Alignment(0.0, -0.5), 27 | colors: [ 28 | const Color.fromRGBO(235, 238, 227, 0.3), 29 | const Color.fromRGBO(255, 255, 255, 0), 30 | ], 31 | ), 32 | ), 33 | child: Stack( 34 | children: [ 35 | SingleChildScrollView( 36 | child: Column( 37 | crossAxisAlignment: CrossAxisAlignment.start, 38 | children: [ 39 | SizedBox(height: kSpacingUnit * 2), 40 | Container( 41 | margin: EdgeInsets.only(right: kSpacingUnit * 2), 42 | child: Align( 43 | alignment: Alignment.topRight, 44 | child: SvgPicture.asset( 45 | 'assets/icons/gear.svg', 46 | height: 24.sp, 47 | width: 24.sp, 48 | ), 49 | ), 50 | ), 51 | HomePreferredPlaylistSection(), 52 | PlaylistSection( 53 | title: 'Recenty Played', 54 | playlists: recentlyPlayed, 55 | ), 56 | SizedBox(height: kSpacingUnit * 5), 57 | PlaylistSection( 58 | title: 'Jump back in', 59 | playlists: jumpBackIn, 60 | ), 61 | SizedBox(height: kSpacingUnit * 17), 62 | ], 63 | ), 64 | ), 65 | SpBottomNavigation(songIsPlaying: true), 66 | ], 67 | ), 68 | ), 69 | ), 70 | ); 71 | } 72 | 73 | @widget 74 | Widget homePreferredPlaylistSection(BuildContext context) { 75 | return Column( 76 | crossAxisAlignment: CrossAxisAlignment.start, 77 | children: [ 78 | SizedBox(height: kSpacingUnit * 2), 79 | Padding( 80 | padding: EdgeInsets.symmetric(horizontal: kSpacingUnit * 2), 81 | child: Text('Good evening', style: kHeadingTextStyle), 82 | ), 83 | SizedBox(height: kSpacingUnit * 1.5), 84 | Container( 85 | margin: EdgeInsets.symmetric(horizontal: kSpacingUnit * 1.5), 86 | child: Row( 87 | children: [ 88 | HomeUserPlaylist(playlist: userLeftPlaylistData), 89 | HomeUserPlaylist(playlist: userRightPlaylistData), 90 | ], 91 | ), 92 | ), 93 | SizedBox(height: kSpacingUnit * 4.5), 94 | ], 95 | ); 96 | } 97 | 98 | @widget 99 | Widget homeUserPlaylist(BuildContext context, {@required List playlist}) { 100 | return Expanded( 101 | child: Column( 102 | children: playlist.map((item) => UserPlaylistItem(data: item)).toList(), 103 | ), 104 | ); 105 | } 106 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: spotify_ui_clone 2 | description: A new Flutter project. 3 | 4 | # The following line prevents the package from being accidentally published to 5 | # pub.dev using `pub publish`. This is preferred for private packages. 6 | publish_to: 'none' # Remove this line if you wish to publish to pub.dev 7 | 8 | # The following defines the version and build number for your application. 9 | # A version number is three numbers separated by dots, like 1.2.43 10 | # followed by an optional build number separated by a +. 11 | # Both the version and the builder number may be overridden in flutter 12 | # build by specifying --build-name and --build-number, respectively. 13 | # In Android, build-name is used as versionName while build-number used as versionCode. 14 | # Read more about Android versioning at https://developer.android.com/studio/publish/versioning 15 | # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion. 16 | # Read more about iOS versioning at 17 | # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html 18 | version: 1.0.0+1 19 | 20 | environment: 21 | sdk: ">=2.7.0 <3.0.0" 22 | 23 | dependencies: 24 | 25 | flutter: 26 | sdk: flutter 27 | 28 | # The following adds the Cupertino Icons font to your application. 29 | # Use with the CupertinoIcons class for iOS style icons. 30 | cupertino_icons: ^0.1.3 31 | animations: ^1.1.2 32 | flutter_hooks: ^0.14.0 33 | flutter_screenutil: ^3.0.2+1 34 | flutter_svg: ^0.19.0 35 | functional_widget_annotation: ^0.5.1 36 | 37 | dev_dependencies: 38 | flutter_test: 39 | sdk: flutter 40 | build_runner: ^1.9.0 41 | functional_widget: ^0.7.3 42 | 43 | # For information on the generic Dart part of this file, see the 44 | # following page: https://dart.dev/tools/pub/pubspec 45 | # The following section is specific to Flutter. 46 | flutter: 47 | 48 | # The following line ensures that the Material Icons font is 49 | # included with your application, so that you can use the icons in 50 | # the material Icons class. 51 | uses-material-design: true 52 | # To add assets to your application, add an assets section, like this: 53 | assets: 54 | - assets/icons/actions.svg 55 | - assets/icons/arrow_left.svg 56 | - assets/icons/back.svg 57 | - assets/icons/devices.svg 58 | - assets/icons/dot.svg 59 | - assets/icons/down_chevron.svg 60 | - assets/icons/gear.svg 61 | - assets/icons/heart.svg 62 | - assets/icons/home.svg 63 | - assets/icons/library.svg 64 | - assets/icons/minus_circle.svg 65 | - assets/icons/next.svg 66 | - assets/icons/play.svg 67 | - assets/icons/search.svg 68 | - assets/icons/share.svg 69 | - assets/icons/shuffle.svg 70 | - assets/icons/spotify.svg 71 | - assets/images/1.jpg 72 | - assets/images/2.jpg 73 | - assets/images/3.jpg 74 | - assets/images/4.jpg 75 | - assets/images/5.jpg 76 | - assets/images/6.jpg 77 | - assets/images/7.jpg 78 | - assets/images/8.jpg 79 | - assets/images/9.jpg 80 | - assets/images/10.jpg 81 | - assets/images/11.jpg 82 | - assets/images/12.jpg 83 | - assets/images/13.jpg 84 | - assets/images/14.jpg 85 | - assets/images/15.jpg 86 | # An image asset can refer to one or more resolution-specific "variants", see 87 | # https://flutter.dev/assets-and-images/#resolution-aware. 88 | # For details regarding adding assets from package dependencies, see 89 | # https://flutter.dev/assets-and-images/#from-packages 90 | # To add custom fonts to your application, add a fonts section here, 91 | # in this "flutter" section. Each entry in this list should have a 92 | # "family" key with the font family name, and a "fonts" key with a 93 | # list giving the asset and other descriptors for the font. For 94 | # example: 95 | fonts: 96 | - family: Proxima Nova 97 | fonts: 98 | - asset: assets/fonts/Proxima Nova Black.otf 99 | weight: 900 100 | - asset: assets/fonts/Proxima Nova Bold.otf 101 | weight: 700 102 | - asset: assets/fonts/Proxima Nova Extrabold.otf 103 | weight: 800 104 | - asset: assets/fonts/Proxima Nova Thin.otf 105 | weight: 100 106 | - asset: assets/fonts/ProximaNova-Regular.otf 107 | weight: 400 108 | # 109 | # For details regarding fonts from package dependencies, 110 | # see https://flutter.dev/custom-fonts/#from-packages 111 | 112 | -------------------------------------------------------------------------------- /lib/screens/playlist_detail/playlist_detail_screen.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 3 | import 'package:flutter_svg/svg.dart'; 4 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 5 | import 'package:spotify_ui_clone/constants.dart'; 6 | import 'package:spotify_ui_clone/models/playlist_model.dart'; 7 | import 'package:spotify_ui_clone/models/song_model.dart'; 8 | import 'package:spotify_ui_clone/widgets/song_item.dart'; 9 | import 'package:spotify_ui_clone/widgets/sp_bottom_navigation.dart'; 10 | import 'package:spotify_ui_clone/widgets/sp_button.dart'; 11 | 12 | part 'playlist_detail_screen.g.dart'; 13 | 14 | @widget 15 | Widget playlistDetailScreen(BuildContext context, {Playlist data}) { 16 | return Scaffold( 17 | backgroundColor: kBlackColor, 18 | body: SafeArea( 19 | child: Container( 20 | decoration: BoxDecoration( 21 | gradient: LinearGradient( 22 | begin: Alignment.topCenter, 23 | end: Alignment(0.0, 0.2), 24 | colors: [ 25 | const Color(0xFF4A7BA1), 26 | const Color.fromRGBO(158, 196, 209, 0), 27 | ], 28 | ), 29 | ), 30 | child: Stack( 31 | children: [ 32 | Column( 33 | children: [ 34 | PlaylistDetailHeader(), 35 | Expanded( 36 | child: SingleChildScrollView( 37 | child: Column( 38 | children: [ 39 | SizedBox(height: kSpacingUnit * 5), 40 | PlaylistDetailCoverImageSection(data: data), 41 | SizedBox(height: kSpacingUnit * 2), 42 | PlaylistDetailSongs(playlist: data, data: data.songs), 43 | SizedBox(height: kSpacingUnit * 17), 44 | ], 45 | ), 46 | ), 47 | ), 48 | ], 49 | ), 50 | SpBottomNavigation(songIsPlaying: true), 51 | ], 52 | ), 53 | ), 54 | ), 55 | ); 56 | } 57 | 58 | @widget 59 | Widget playlistDetailHeader(BuildContext context) { 60 | return Padding( 61 | padding: EdgeInsets.all(kSpacingUnit * 2), 62 | child: Row( 63 | children: [ 64 | GestureDetector( 65 | onTap: () => Navigator.of(context).pop(), 66 | child: SvgPicture.asset( 67 | 'assets/icons/arrow_left.svg', 68 | height: 20.sp, 69 | width: 20.sp, 70 | ), 71 | ), 72 | const Spacer(), 73 | SvgPicture.asset( 74 | 'assets/icons/heart.svg', 75 | height: 20.sp, 76 | width: 20.sp, 77 | ), 78 | SizedBox(width: kSpacingUnit * 2), 79 | SvgPicture.asset( 80 | 'assets/icons/actions.svg', 81 | height: 20.sp, 82 | width: 20.sp, 83 | ), 84 | ], 85 | ), 86 | ); 87 | } 88 | 89 | @widget 90 | Widget playlistDetailCoverImageSection(BuildContext context, {Playlist data}) { 91 | return Column( 92 | children: [ 93 | Image.asset( 94 | data.image, 95 | height: kSpacingUnit * 22, 96 | width: kSpacingUnit * 22, 97 | ), 98 | SizedBox(height: kSpacingUnit * 3), 99 | Text( 100 | data.title, 101 | style: kHeadingTextStyle, 102 | ), 103 | SizedBox(height: kSpacingUnit), 104 | Row( 105 | mainAxisAlignment: MainAxisAlignment.center, 106 | children: [ 107 | Text( 108 | 'BY SPOTIFY', 109 | style: kCaptionTextStyle.copyWith( 110 | color: kTextColor, 111 | ), 112 | ), 113 | SizedBox(width: kSpacingUnit * 0.5), 114 | SvgPicture.asset( 115 | 'assets/icons/dot.svg', 116 | height: 3.sp, 117 | width: 3.sp, 118 | ), 119 | SizedBox(width: kSpacingUnit * 0.5), 120 | Text( 121 | '${data.likes} LIKES', 122 | style: kCaptionTextStyle.copyWith( 123 | color: kTextColor, 124 | ), 125 | ), 126 | ], 127 | ), 128 | SizedBox(height: kSpacingUnit), 129 | SpButton(title: 'PLAY'), 130 | ], 131 | ); 132 | } 133 | 134 | @widget 135 | Widget playlistDetailSongs(BuildContext context, {@required Playlist playlist, @required List data}) { 136 | return Column( 137 | children: data 138 | .map((song) => SongItem( 139 | playlist: playlist, 140 | data: song, 141 | )) 142 | .toList(), 143 | ); 144 | } 145 | -------------------------------------------------------------------------------- /lib/screens/song_detail/song_detail_screen.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_screenutil/flutter_screenutil.dart'; 3 | import 'package:flutter_svg/flutter_svg.dart'; 4 | import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 5 | import 'package:spotify_ui_clone/constants.dart'; 6 | import 'package:spotify_ui_clone/models/playlist_model.dart'; 7 | import 'package:spotify_ui_clone/models/song_model.dart'; 8 | import 'package:spotify_ui_clone/widgets/song_controller.dart'; 9 | import 'package:spotify_ui_clone/widgets/sp_slider.dart'; 10 | 11 | part 'song_detail_screen.g.dart'; 12 | 13 | @widget 14 | Widget songDetailScreen(BuildContext context, {@required Playlist playlist, @required Song data}) { 15 | return Scaffold( 16 | backgroundColor: kBlackColor, 17 | body: SafeArea( 18 | child: Container( 19 | decoration: BoxDecoration( 20 | gradient: LinearGradient( 21 | begin: Alignment.topCenter, 22 | end: Alignment(0.0, 0.8), 23 | colors: [ 24 | const Color.fromRGBO(181, 220, 227, 0.6), 25 | const Color.fromRGBO(181, 220, 227, 0), 26 | ], 27 | ), 28 | ), 29 | child: Column( 30 | crossAxisAlignment: CrossAxisAlignment.start, 31 | children: [ 32 | SongDetailHeader(title: playlist.title), 33 | Expanded( 34 | child: SingleChildScrollView( 35 | child: Column( 36 | children: [ 37 | SizedBox(height: kSpacingUnit * 2), 38 | SongDetailCoverImage(data: data), 39 | SizedBox(height: kSpacingUnit * 2), 40 | SongDetailControls(data: data), 41 | ], 42 | ), 43 | ), 44 | ), 45 | ], 46 | ), 47 | ), 48 | ), 49 | ); 50 | } 51 | 52 | @widget 53 | Widget songDetailHeader(BuildContext context, {String title}) { 54 | return Padding( 55 | padding: EdgeInsets.all(kSpacingUnit * 2), 56 | child: Row( 57 | children: [ 58 | GestureDetector( 59 | onTap: () => Navigator.of(context).pop(), 60 | child: SvgPicture.asset( 61 | 'assets/icons/down_chevron.svg', 62 | height: 10.sp, 63 | width: 10.sp, 64 | ), 65 | ), 66 | Expanded( 67 | child: Column( 68 | children: [ 69 | Text( 70 | 'PLAYING FROM PLAYLIST', 71 | style: kCaptionTextStyle.copyWith( 72 | color: kTextColor, 73 | ), 74 | ), 75 | Text( 76 | title, 77 | style: kBodyTextStyle.copyWith( 78 | fontWeight: FontWeight.bold, 79 | ), 80 | ), 81 | ], 82 | ), 83 | ), 84 | SvgPicture.asset( 85 | 'assets/icons/actions.svg', 86 | height: 20.sp, 87 | width: 20.sp, 88 | ), 89 | ], 90 | ), 91 | ); 92 | } 93 | 94 | @widget 95 | Widget songDetailCoverImage(BuildContext context, {@required Song data}) { 96 | return Container( 97 | padding: EdgeInsets.symmetric( 98 | horizontal: kSpacingUnit * 3, 99 | ), 100 | child: AspectRatio( 101 | aspectRatio: 1 / 1, 102 | child: Image( 103 | image: AssetImage(data.image), 104 | fit: BoxFit.contain, // use this 105 | ), 106 | ), 107 | ); 108 | } 109 | 110 | @widget 111 | Widget songDetailControls(BuildContext context, {@required Song data}) { 112 | return Container( 113 | padding: EdgeInsets.all(kSpacingUnit * 3), 114 | child: Column( 115 | crossAxisAlignment: CrossAxisAlignment.start, 116 | children: [ 117 | Text( 118 | data.title, 119 | style: kSubTitleTextStyle, 120 | ), 121 | Text( 122 | data.artists.map((a) => a.name).join(', '), 123 | style: kBodyTextStyle.copyWith( 124 | color: kSecondaryTextColor, 125 | ), 126 | ), 127 | SizedBox(height: kSpacingUnit * 3), 128 | SpSlider(value: 30), 129 | SizedBox(height: kSpacingUnit * 3), 130 | Row( 131 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 132 | children: [ 133 | SvgPicture.asset( 134 | 'assets/icons/heart.svg', 135 | height: 18.sp, 136 | width: 18.sp, 137 | ), 138 | Expanded( 139 | child: SongController(), 140 | ), 141 | SvgPicture.asset( 142 | 'assets/icons/minus_circle.svg', 143 | height: 20.sp, 144 | width: 20.sp, 145 | ), 146 | ], 147 | ), 148 | SizedBox(height: kSpacingUnit * 2), 149 | Row( 150 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 151 | children: [ 152 | SvgPicture.asset( 153 | 'assets/icons/devices.svg', 154 | height: 18.sp, 155 | width: 18.sp, 156 | color: kSecondaryTextColor, 157 | ), 158 | SvgPicture.asset( 159 | 'assets/icons/share.svg', 160 | height: 18.sp, 161 | width: 18.sp, 162 | ), 163 | ], 164 | ), 165 | ], 166 | ), 167 | ); 168 | } 169 | -------------------------------------------------------------------------------- /assets/icons/gear.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 46; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; }; 11 | 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; }; 12 | 74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 74858FAE1ED2DC5600515810 /* AppDelegate.swift */; }; 13 | 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FA1CF9000F007C117D /* Main.storyboard */; }; 14 | 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FD1CF9000F007C117D /* Assets.xcassets */; }; 15 | 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */; }; 16 | /* End PBXBuildFile section */ 17 | 18 | /* Begin PBXCopyFilesBuildPhase section */ 19 | 9705A1C41CF9048500538489 /* Embed Frameworks */ = { 20 | isa = PBXCopyFilesBuildPhase; 21 | buildActionMask = 2147483647; 22 | dstPath = ""; 23 | dstSubfolderSpec = 10; 24 | files = ( 25 | ); 26 | name = "Embed Frameworks"; 27 | runOnlyForDeploymentPostprocessing = 0; 28 | }; 29 | /* End PBXCopyFilesBuildPhase section */ 30 | 31 | /* Begin PBXFileReference section */ 32 | 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = ""; }; 33 | 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = ""; }; 34 | 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = ""; }; 35 | 74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "Runner-Bridging-Header.h"; sourceTree = ""; }; 36 | 74858FAE1ED2DC5600515810 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; }; 37 | 7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = ""; }; 38 | 9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = ""; }; 39 | 9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = ""; }; 40 | 97C146EE1CF9000F007C117D /* Runner.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Runner.app; sourceTree = BUILT_PRODUCTS_DIR; }; 41 | 97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = ""; }; 42 | 97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; 43 | 97C147001CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = ""; }; 44 | 97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 45 | /* End PBXFileReference section */ 46 | 47 | /* Begin PBXFrameworksBuildPhase section */ 48 | 97C146EB1CF9000F007C117D /* Frameworks */ = { 49 | isa = PBXFrameworksBuildPhase; 50 | buildActionMask = 2147483647; 51 | files = ( 52 | ); 53 | runOnlyForDeploymentPostprocessing = 0; 54 | }; 55 | /* End PBXFrameworksBuildPhase section */ 56 | 57 | /* Begin PBXGroup section */ 58 | 9740EEB11CF90186004384FC /* Flutter */ = { 59 | isa = PBXGroup; 60 | children = ( 61 | 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */, 62 | 9740EEB21CF90195004384FC /* Debug.xcconfig */, 63 | 7AFA3C8E1D35360C0083082E /* Release.xcconfig */, 64 | 9740EEB31CF90195004384FC /* Generated.xcconfig */, 65 | ); 66 | name = Flutter; 67 | sourceTree = ""; 68 | }; 69 | 97C146E51CF9000F007C117D = { 70 | isa = PBXGroup; 71 | children = ( 72 | 9740EEB11CF90186004384FC /* Flutter */, 73 | 97C146F01CF9000F007C117D /* Runner */, 74 | 97C146EF1CF9000F007C117D /* Products */, 75 | ); 76 | sourceTree = ""; 77 | }; 78 | 97C146EF1CF9000F007C117D /* Products */ = { 79 | isa = PBXGroup; 80 | children = ( 81 | 97C146EE1CF9000F007C117D /* Runner.app */, 82 | ); 83 | name = Products; 84 | sourceTree = ""; 85 | }; 86 | 97C146F01CF9000F007C117D /* Runner */ = { 87 | isa = PBXGroup; 88 | children = ( 89 | 97C146FA1CF9000F007C117D /* Main.storyboard */, 90 | 97C146FD1CF9000F007C117D /* Assets.xcassets */, 91 | 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */, 92 | 97C147021CF9000F007C117D /* Info.plist */, 93 | 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */, 94 | 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */, 95 | 74858FAE1ED2DC5600515810 /* AppDelegate.swift */, 96 | 74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */, 97 | ); 98 | path = Runner; 99 | sourceTree = ""; 100 | }; 101 | /* End PBXGroup section */ 102 | 103 | /* Begin PBXNativeTarget section */ 104 | 97C146ED1CF9000F007C117D /* Runner */ = { 105 | isa = PBXNativeTarget; 106 | buildConfigurationList = 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */; 107 | buildPhases = ( 108 | 9740EEB61CF901F6004384FC /* Run Script */, 109 | 97C146EA1CF9000F007C117D /* Sources */, 110 | 97C146EB1CF9000F007C117D /* Frameworks */, 111 | 97C146EC1CF9000F007C117D /* Resources */, 112 | 9705A1C41CF9048500538489 /* Embed Frameworks */, 113 | 3B06AD1E1E4923F5004D2608 /* Thin Binary */, 114 | ); 115 | buildRules = ( 116 | ); 117 | dependencies = ( 118 | ); 119 | name = Runner; 120 | productName = Runner; 121 | productReference = 97C146EE1CF9000F007C117D /* Runner.app */; 122 | productType = "com.apple.product-type.application"; 123 | }; 124 | /* End PBXNativeTarget section */ 125 | 126 | /* Begin PBXProject section */ 127 | 97C146E61CF9000F007C117D /* Project object */ = { 128 | isa = PBXProject; 129 | attributes = { 130 | LastUpgradeCheck = 1020; 131 | ORGANIZATIONNAME = ""; 132 | TargetAttributes = { 133 | 97C146ED1CF9000F007C117D = { 134 | CreatedOnToolsVersion = 7.3.1; 135 | LastSwiftMigration = 1100; 136 | }; 137 | }; 138 | }; 139 | buildConfigurationList = 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */; 140 | compatibilityVersion = "Xcode 9.3"; 141 | developmentRegion = en; 142 | hasScannedForEncodings = 0; 143 | knownRegions = ( 144 | en, 145 | Base, 146 | ); 147 | mainGroup = 97C146E51CF9000F007C117D; 148 | productRefGroup = 97C146EF1CF9000F007C117D /* Products */; 149 | projectDirPath = ""; 150 | projectRoot = ""; 151 | targets = ( 152 | 97C146ED1CF9000F007C117D /* Runner */, 153 | ); 154 | }; 155 | /* End PBXProject section */ 156 | 157 | /* Begin PBXResourcesBuildPhase section */ 158 | 97C146EC1CF9000F007C117D /* Resources */ = { 159 | isa = PBXResourcesBuildPhase; 160 | buildActionMask = 2147483647; 161 | files = ( 162 | 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */, 163 | 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */, 164 | 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */, 165 | 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */, 166 | ); 167 | runOnlyForDeploymentPostprocessing = 0; 168 | }; 169 | /* End PBXResourcesBuildPhase section */ 170 | 171 | /* Begin PBXShellScriptBuildPhase section */ 172 | 3B06AD1E1E4923F5004D2608 /* Thin Binary */ = { 173 | isa = PBXShellScriptBuildPhase; 174 | buildActionMask = 2147483647; 175 | files = ( 176 | ); 177 | inputPaths = ( 178 | ); 179 | name = "Thin Binary"; 180 | outputPaths = ( 181 | ); 182 | runOnlyForDeploymentPostprocessing = 0; 183 | shellPath = /bin/sh; 184 | shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" embed_and_thin"; 185 | }; 186 | 9740EEB61CF901F6004384FC /* Run Script */ = { 187 | isa = PBXShellScriptBuildPhase; 188 | buildActionMask = 2147483647; 189 | files = ( 190 | ); 191 | inputPaths = ( 192 | ); 193 | name = "Run Script"; 194 | outputPaths = ( 195 | ); 196 | runOnlyForDeploymentPostprocessing = 0; 197 | shellPath = /bin/sh; 198 | shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" build"; 199 | }; 200 | /* End PBXShellScriptBuildPhase section */ 201 | 202 | /* Begin PBXSourcesBuildPhase section */ 203 | 97C146EA1CF9000F007C117D /* Sources */ = { 204 | isa = PBXSourcesBuildPhase; 205 | buildActionMask = 2147483647; 206 | files = ( 207 | 74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */, 208 | 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */, 209 | ); 210 | runOnlyForDeploymentPostprocessing = 0; 211 | }; 212 | /* End PBXSourcesBuildPhase section */ 213 | 214 | /* Begin PBXVariantGroup section */ 215 | 97C146FA1CF9000F007C117D /* Main.storyboard */ = { 216 | isa = PBXVariantGroup; 217 | children = ( 218 | 97C146FB1CF9000F007C117D /* Base */, 219 | ); 220 | name = Main.storyboard; 221 | sourceTree = ""; 222 | }; 223 | 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */ = { 224 | isa = PBXVariantGroup; 225 | children = ( 226 | 97C147001CF9000F007C117D /* Base */, 227 | ); 228 | name = LaunchScreen.storyboard; 229 | sourceTree = ""; 230 | }; 231 | /* End PBXVariantGroup section */ 232 | 233 | /* Begin XCBuildConfiguration section */ 234 | 249021D3217E4FDB00AE95B9 /* Profile */ = { 235 | isa = XCBuildConfiguration; 236 | buildSettings = { 237 | ALWAYS_SEARCH_USER_PATHS = NO; 238 | CLANG_ANALYZER_NONNULL = YES; 239 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 240 | CLANG_CXX_LIBRARY = "libc++"; 241 | CLANG_ENABLE_MODULES = YES; 242 | CLANG_ENABLE_OBJC_ARC = YES; 243 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 244 | CLANG_WARN_BOOL_CONVERSION = YES; 245 | CLANG_WARN_COMMA = YES; 246 | CLANG_WARN_CONSTANT_CONVERSION = YES; 247 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 248 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 249 | CLANG_WARN_EMPTY_BODY = YES; 250 | CLANG_WARN_ENUM_CONVERSION = YES; 251 | CLANG_WARN_INFINITE_RECURSION = YES; 252 | CLANG_WARN_INT_CONVERSION = YES; 253 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 254 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 255 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 256 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 257 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 258 | CLANG_WARN_STRICT_PROTOTYPES = YES; 259 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 260 | CLANG_WARN_UNREACHABLE_CODE = YES; 261 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 262 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 263 | COPY_PHASE_STRIP = NO; 264 | DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; 265 | ENABLE_NS_ASSERTIONS = NO; 266 | ENABLE_STRICT_OBJC_MSGSEND = YES; 267 | GCC_C_LANGUAGE_STANDARD = gnu99; 268 | GCC_NO_COMMON_BLOCKS = YES; 269 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 270 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 271 | GCC_WARN_UNDECLARED_SELECTOR = YES; 272 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 273 | GCC_WARN_UNUSED_FUNCTION = YES; 274 | GCC_WARN_UNUSED_VARIABLE = YES; 275 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 276 | MTL_ENABLE_DEBUG_INFO = NO; 277 | SDKROOT = iphoneos; 278 | SUPPORTED_PLATFORMS = iphoneos; 279 | TARGETED_DEVICE_FAMILY = "1,2"; 280 | VALIDATE_PRODUCT = YES; 281 | }; 282 | name = Profile; 283 | }; 284 | 249021D4217E4FDB00AE95B9 /* Profile */ = { 285 | isa = XCBuildConfiguration; 286 | baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; 287 | buildSettings = { 288 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 289 | CLANG_ENABLE_MODULES = YES; 290 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 291 | ENABLE_BITCODE = NO; 292 | FRAMEWORK_SEARCH_PATHS = ( 293 | "$(inherited)", 294 | "$(PROJECT_DIR)/Flutter", 295 | ); 296 | INFOPLIST_FILE = Runner/Info.plist; 297 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 298 | LIBRARY_SEARCH_PATHS = ( 299 | "$(inherited)", 300 | "$(PROJECT_DIR)/Flutter", 301 | ); 302 | PRODUCT_BUNDLE_IDENTIFIER = com.example.spotifyUiClone; 303 | PRODUCT_NAME = "$(TARGET_NAME)"; 304 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 305 | SWIFT_VERSION = 5.0; 306 | VERSIONING_SYSTEM = "apple-generic"; 307 | }; 308 | name = Profile; 309 | }; 310 | 97C147031CF9000F007C117D /* Debug */ = { 311 | isa = XCBuildConfiguration; 312 | buildSettings = { 313 | ALWAYS_SEARCH_USER_PATHS = NO; 314 | CLANG_ANALYZER_NONNULL = YES; 315 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 316 | CLANG_CXX_LIBRARY = "libc++"; 317 | CLANG_ENABLE_MODULES = YES; 318 | CLANG_ENABLE_OBJC_ARC = YES; 319 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 320 | CLANG_WARN_BOOL_CONVERSION = YES; 321 | CLANG_WARN_COMMA = YES; 322 | CLANG_WARN_CONSTANT_CONVERSION = YES; 323 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 324 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 325 | CLANG_WARN_EMPTY_BODY = YES; 326 | CLANG_WARN_ENUM_CONVERSION = YES; 327 | CLANG_WARN_INFINITE_RECURSION = YES; 328 | CLANG_WARN_INT_CONVERSION = YES; 329 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 330 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 331 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 332 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 333 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 334 | CLANG_WARN_STRICT_PROTOTYPES = YES; 335 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 336 | CLANG_WARN_UNREACHABLE_CODE = YES; 337 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 338 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 339 | COPY_PHASE_STRIP = NO; 340 | DEBUG_INFORMATION_FORMAT = dwarf; 341 | ENABLE_STRICT_OBJC_MSGSEND = YES; 342 | ENABLE_TESTABILITY = YES; 343 | GCC_C_LANGUAGE_STANDARD = gnu99; 344 | GCC_DYNAMIC_NO_PIC = NO; 345 | GCC_NO_COMMON_BLOCKS = YES; 346 | GCC_OPTIMIZATION_LEVEL = 0; 347 | GCC_PREPROCESSOR_DEFINITIONS = ( 348 | "DEBUG=1", 349 | "$(inherited)", 350 | ); 351 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 352 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 353 | GCC_WARN_UNDECLARED_SELECTOR = YES; 354 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 355 | GCC_WARN_UNUSED_FUNCTION = YES; 356 | GCC_WARN_UNUSED_VARIABLE = YES; 357 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 358 | MTL_ENABLE_DEBUG_INFO = YES; 359 | ONLY_ACTIVE_ARCH = YES; 360 | SDKROOT = iphoneos; 361 | TARGETED_DEVICE_FAMILY = "1,2"; 362 | }; 363 | name = Debug; 364 | }; 365 | 97C147041CF9000F007C117D /* Release */ = { 366 | isa = XCBuildConfiguration; 367 | buildSettings = { 368 | ALWAYS_SEARCH_USER_PATHS = NO; 369 | CLANG_ANALYZER_NONNULL = YES; 370 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 371 | CLANG_CXX_LIBRARY = "libc++"; 372 | CLANG_ENABLE_MODULES = YES; 373 | CLANG_ENABLE_OBJC_ARC = YES; 374 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 375 | CLANG_WARN_BOOL_CONVERSION = YES; 376 | CLANG_WARN_COMMA = YES; 377 | CLANG_WARN_CONSTANT_CONVERSION = YES; 378 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 379 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 380 | CLANG_WARN_EMPTY_BODY = YES; 381 | CLANG_WARN_ENUM_CONVERSION = YES; 382 | CLANG_WARN_INFINITE_RECURSION = YES; 383 | CLANG_WARN_INT_CONVERSION = YES; 384 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 385 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 386 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 387 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 388 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 389 | CLANG_WARN_STRICT_PROTOTYPES = YES; 390 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 391 | CLANG_WARN_UNREACHABLE_CODE = YES; 392 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 393 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 394 | COPY_PHASE_STRIP = NO; 395 | DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; 396 | ENABLE_NS_ASSERTIONS = NO; 397 | ENABLE_STRICT_OBJC_MSGSEND = YES; 398 | GCC_C_LANGUAGE_STANDARD = gnu99; 399 | GCC_NO_COMMON_BLOCKS = YES; 400 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 401 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 402 | GCC_WARN_UNDECLARED_SELECTOR = YES; 403 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 404 | GCC_WARN_UNUSED_FUNCTION = YES; 405 | GCC_WARN_UNUSED_VARIABLE = YES; 406 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 407 | MTL_ENABLE_DEBUG_INFO = NO; 408 | SDKROOT = iphoneos; 409 | SUPPORTED_PLATFORMS = iphoneos; 410 | SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule"; 411 | TARGETED_DEVICE_FAMILY = "1,2"; 412 | VALIDATE_PRODUCT = YES; 413 | }; 414 | name = Release; 415 | }; 416 | 97C147061CF9000F007C117D /* Debug */ = { 417 | isa = XCBuildConfiguration; 418 | baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */; 419 | buildSettings = { 420 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 421 | CLANG_ENABLE_MODULES = YES; 422 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 423 | ENABLE_BITCODE = NO; 424 | FRAMEWORK_SEARCH_PATHS = ( 425 | "$(inherited)", 426 | "$(PROJECT_DIR)/Flutter", 427 | ); 428 | INFOPLIST_FILE = Runner/Info.plist; 429 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 430 | LIBRARY_SEARCH_PATHS = ( 431 | "$(inherited)", 432 | "$(PROJECT_DIR)/Flutter", 433 | ); 434 | PRODUCT_BUNDLE_IDENTIFIER = com.example.spotifyUiClone; 435 | PRODUCT_NAME = "$(TARGET_NAME)"; 436 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 437 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 438 | SWIFT_VERSION = 5.0; 439 | VERSIONING_SYSTEM = "apple-generic"; 440 | }; 441 | name = Debug; 442 | }; 443 | 97C147071CF9000F007C117D /* Release */ = { 444 | isa = XCBuildConfiguration; 445 | baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; 446 | buildSettings = { 447 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 448 | CLANG_ENABLE_MODULES = YES; 449 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 450 | ENABLE_BITCODE = NO; 451 | FRAMEWORK_SEARCH_PATHS = ( 452 | "$(inherited)", 453 | "$(PROJECT_DIR)/Flutter", 454 | ); 455 | INFOPLIST_FILE = Runner/Info.plist; 456 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 457 | LIBRARY_SEARCH_PATHS = ( 458 | "$(inherited)", 459 | "$(PROJECT_DIR)/Flutter", 460 | ); 461 | PRODUCT_BUNDLE_IDENTIFIER = com.example.spotifyUiClone; 462 | PRODUCT_NAME = "$(TARGET_NAME)"; 463 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 464 | SWIFT_VERSION = 5.0; 465 | VERSIONING_SYSTEM = "apple-generic"; 466 | }; 467 | name = Release; 468 | }; 469 | /* End XCBuildConfiguration section */ 470 | 471 | /* Begin XCConfigurationList section */ 472 | 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */ = { 473 | isa = XCConfigurationList; 474 | buildConfigurations = ( 475 | 97C147031CF9000F007C117D /* Debug */, 476 | 97C147041CF9000F007C117D /* Release */, 477 | 249021D3217E4FDB00AE95B9 /* Profile */, 478 | ); 479 | defaultConfigurationIsVisible = 0; 480 | defaultConfigurationName = Release; 481 | }; 482 | 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */ = { 483 | isa = XCConfigurationList; 484 | buildConfigurations = ( 485 | 97C147061CF9000F007C117D /* Debug */, 486 | 97C147071CF9000F007C117D /* Release */, 487 | 249021D4217E4FDB00AE95B9 /* Profile */, 488 | ); 489 | defaultConfigurationIsVisible = 0; 490 | defaultConfigurationName = Release; 491 | }; 492 | /* End XCConfigurationList section */ 493 | }; 494 | rootObject = 97C146E61CF9000F007C117D /* Project object */; 495 | } 496 | --------------------------------------------------------------------------------