Skip to content

Latest commit

 

History

History
455 lines (308 loc) · 25.5 KB

README.md

File metadata and controls

455 lines (308 loc) · 25.5 KB
Raw

Kuncie Apple Music

A new Flutter project using iTunes API for Music Player.

Getting Started for Flutter

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

About Us

Flutter Course for FREE → https://bit.ly/flutter-free-course

PLAYLISTS:

SUPPORT ME :

CONTACT ME :

Try It with Demo Application

Download APK Launch Web App

The Sceenshots of Application

Supported Devices (OS)

To find out if your device is compatible with the app, check the list of supported devices (OS) :

  • iOS Mobile App : iOS Version 9.0 (Monarch) & above
  • Android Mobile App : Android 4.4 KitKat (API level 19) & above
  • MacOX Desktop App (Mobile Size-Mode) : macOS Sierra 10.12.2 & above
  • Web App (Mobile Size-Mode) : Chrome 84 & above
  • Web App (Mobile Size-Mode) : Firefox 72.0 & above
  • Web App (Mobile Size-Mode) : Safari on El Capitan & above
  • Web App (Mobile Size-Mode) : Edge 1.2.0 & above

Supported Features

This music player app is supported by the amazing features.

  • Browse albums and songs then play music with selecting song.
  • Search song by artist name then play music with selecting song.
  • Play music with run in the background or with the screen turned off.
  • Music controls available : Play, Pause, Stop, Seek (Progress Indicator), Fast (Rewind & Forward) and Repeat One Song.
  • When tap a song, a media player should show up at the bottom of the screen and start to play the preview for that song.
  • Music controls interacting with headset buttons, the Android lock screen and notification, iOS control center, wearables, AndroidAuto (CarPlay) or smart watch.

Requirements to Build The App

Get the Flutter SDK

Download the following installation bundle to get the latest stable release of the Flutter SDK, see : https://docs.flutter.dev/get-started/install.

For other release channels, and older builds, see the SDK releases page : https://docs.flutter.dev/development/tools/sdk/releases.

System Requirements

To install and run Flutter, your development environment must meet these minimum requirements and IDE software:

MacOS

Windows

  • Operating Systems: Windows 7 SP1 or later (64-bit), x86-64 based.
  • Disk Space: 1.64 GB (does not include disk space for IDE/tools).
  • IDE Software: Visual Studio Code and Android Studio (or IntelliJ).
  • Tools: Flutter depends on these tools being available in your environment. Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10). Git for Windows 2.x, with the Use Git from the Windows Command Prompt option.

Linux

  • Operating Systems: Linux (64-bit)
  • Disk Space: 600 MB (does not include disk space for IDE/tools).
  • IDE Software: Visual Studio Code and Android Studio (or IntelliJ).
  • Tools: Flutter depends on these command-line tools being available in your environment, like : bash curl file git 2.x mkdir rm unzip which xz-utils zip.
  • Shared libraries: Flutter test command depends on this library being available in your environment. libGLU.so.1 - provided by mesa packages such as libglu1-mesa on Ubuntu/Debian and mesa-libGLU on Fedora.

Chrome OS

  • Operating Systems: Chrome OS (64-bit) with Linux (Beta) turned on
  • Disk Space: 600 MB (does not include disk space for IDE/tools).
  • IDE Software: Visual Studio Code and Android Studio (or IntelliJ).
  • Tools: Flutter depends on these command-line tools being available in your environment, like : bash curl git 2.x mkdir rm unzip which xz-utils.
  • Shared libraries: Flutter test command depends on this library being available in your environment. libGLU.so.1 - provided by mesa packages such as libglu1-mesa on Ubuntu/Debian.

Flutter & Tools Version

  • Flutter 2.10.2
  • Tools • Dart 2.16.1
  • Tools • Android SDK 31.0.0
  • Tools • CocoaPods 1.11.2

Flutter Packages Dependency

Dependencies are one of the core concepts of the pub package manager. A dependency is another package that your package needs in order to work. Dependencies are specified in your pubspec. You list only immediate dependencies — the software that your package uses directly. Pub handles transitive dependencies for you.

State Management, Route Management, Dependency Injection, & Utility

  • get : It combines high-performance state management, intelligent dependency injection, and route management quickly and practically.
  • intl : Provides internationalization and localization facilities, including message translation, plurals and genders, date/number formatting and parsing, and bidirectional text.
  • url_strategy : Package for Flutter apps that allows setting the web URL strategy with a single line of code. To remove the leading hash (#) from the URL of your Flutter web app.
  • url_launcher : A Flutter plugin for launching a URL. Supports iOS, Android, web, Windows, macOS, and Linux.

Audio Services

  • just_audio : A feature-rich audio player for Flutter. Loop, clip and concatenate any sound from any source (asset/file/URL/stream) in a variety of audio formats with gapless playback.
  • just_audio_libwinmedia : Libwinmedia implementation of just_audio for windows & linux. This implementation is endorsed and therefore doesn't require a direct dependency.
  • audio_service : Flutter plugin to play audio in the background while the screen is off.

Images Asset & Library

  • lottie : Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile.
  • cached_network_image : A flutter library to show images from the internet and keep them in the cache directory.
  • transparent_image : A simple transparent image. Represented as a Uint8List, which was originally extracted from the Flutter codebase (was private in the test package).

Fonts & Icons

  • google_fonts : The google_fonts package for Flutter allows you to easily use any of the thousands of fonts available from fonts.google.com in your Flutter app.
  • iconsax : Iconsax for flutter (1000+ icons 6 diferent styles, total 6000+ icons). the official icons of the Vuesax framework.
  • font_awesome_flutter : The Font Awesome Icon pack available as set of Flutter Icons.

Animations & Elements

  • flutter_animated_dialog : A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier include status bar at the top of screen, solved the problem of default dialog.
  • flutter_spinkit : A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit.
  • fade_shimmer : A fade shimmer library to implement loading like latest facebook loading effect.
  • badges : A flutter package for creating badges. Badges can be used for an additional marker for any widget, e.g. show a number of items in a shopping cart.
  • step_progress_indicator : Bar indicator made of a series of selected and unselected steps
  • liquid_pull_to_refresh : A beautiful and custom refresh indicator with some cool animations and transitions for flutter.

iTunes Search API

Overview

The Search API allows you to place search fields in your website to search for content within the iTunes Store and Apple Books Store. You can search for a variety of content; including books, movies, podcasts, music, music videos, audiobooks, and TV shows. You can also call an ID-based lookup request to create mappings between your content library and the digital catalog. Developers may use promotional content in the API, including previews of songs, music videos, album art and App icons only to promote store content and not for entertainment purposes. Use of sound samples and other assets from the API must be proximate to a store badge. Terms and conditions apply.

The Partners Program allows you to earn a commission on qualifying revenue generated by clicks initiated from your website or app into the iTunes Store and Apple Books Store. For more information on the Partners Program, see http://www.apple.com/itunes/affiliates.

Searching

To search for content from a field in your website and display the results in your website, you must create a search field that passes a fully-qualified URL content request to the iTunes Store, parse the JavaScript Object Notation (JSON) format returned from the search, and display the results in your website, see : https://affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api.

File & Folder Structure

There are two files and five different folders. Each of them has own specific function.

Files

  1. main.dart: It is the main file of applications developed using the Flutter SDK.
  2. core.dart: This is the library mechanism that will export all library each of xcore,dart file in ordert to make simple and clean code when import library.

Folders

  1. api: Contains providers and repositories for handle API communication from webservice or restful API.
  2. app: Contains the pure GetX State Management for implement business logic, presentation logic and UI widget with controllers and views. And also intelligent dependency injection with bindings
  3. models: Generated models and serializers from JSON that contains data on any variable and collections.
  4. routes: Contains the pure GetX Route Management for navigation between pages.
  5. shared: Contains configuration with constants, utilities, extentions, theme style, popup dialogs, and global widgets for the Flutter project.

Instructions to Build and Deploy The App

Set Up & Running

1. Clone The Github Repo

$ git clone https://github.com/faisalramdan17/kuncie_music.git
$ cd kuncie_music

2. Get Packages

flutter pub get

3. Running The App

flutter run

4. Automated Unit Testing

flutter test

Build and Deploy the App

During a typical development cycle, you test an app using flutter run at the command line, or by using the Run and Debug options in your IDE. By default, Flutter builds a debug version of your app.

When you’re ready to deploy or prepare a release version of your app, this Instructions can help:

Android App

Note: For the complete guide provides a step-by-step walkthrough of build APK and releasing a Flutter app to the Play Store, For more details, see https://docs.flutter.dev/deployment/android.

Build an APK

From the command line:

  1. Enter cd [project]
  2. Run flutter build apk --split-per-abi. (The flutter build command defaults to --release.)

This command results in three APK files:

  • [project]/build/app/outputs/apk/release/app-armeabi-v7a-release.apk
  • [project]/build/app/outputs/apk/release/app-arm64-v8a-release.apk
  • [project]/build/app/outputs/apk/release/app-x86_64-release.apk
Build an app bundle

From the command line:

  1. Enter cd [project]
  2. Run flutter build appbundle. (Running flutter build defaults to a release build.)

The release bundle for your app is created at [project]/build/app/outputs/bundle/release/app.aab.

By default, the app bundle contains your Dart code and the Flutter runtime compiled for armeabi-v7a (ARM 32-bit), arm64-v8a (ARM 64-bit), and x86-64 (x86 64-bit).

iOS App

Note: For the complete guide provides a step-by-step walkthrough of releasing a Flutter app to the App Store. For more details, see https://docs.flutter.dev/deployment/ios.

In Xcode, configure the app version and build:

  1. In Xcode, open Runner.xcworkspace in your app’s ios folder.
  2. Select Runner in the Xcode project navigator, then select the Runner target in the settings view sidebar.
  3. In the Identity section, update the Version to the user-facing version number you wish to publish.
  4. In the Identity section, update the Build identifier to a unique build number used to track this build on App Store Connect. Each upload requires a unique build number.

Finally, create a build archive and upload it to App Store Connect:

  1. Run flutter build ipa to produce a build archive.
  2. Open build/ios/archive/MyApp.xcarchive in Xcode.
  3. Click the Validate App button. If any issues are reported, address them and produce another build. You can reuse the same build ID until you upload an archive.
  4. After the archive has been successfully validated, click Distribute App. You can follow the status of your build in the Activities tab of your app’s details page on App Store Connect.

MacOS App

Note: For the complete guide provides a step-by-step walkthrough of releasing a Flutter app to the App Store. For more details, see https://docs.flutter.dev/deployment/macos.

In Xcode, configure the app version and build:

  1. Open Runner.xcworkspace in your app’s macos folder. To do this from the command line, run the following command from the base directory of your application project.
open macos/Runner.xcworkspace
  1. Select Runner in the Xcode project navigator, then select the Runner target in the settings view sidebar.
  2. In the Identity section, update the Version to the user-facing version number you wish to publish.
  3. In the Identity section, update the Build identifier to a unique build number used to track this build on App Store Connect. Each upload requires a unique build number.

Finally, create a build archive and upload it to App Store Connect:

  1. Create a release Archive of your application. From the base directory of your application project, run the following.
flutter build macos
  1. Open Xcode and select Product > Archive to open the archive created in the previous step.
  2. Click the Validate App button. If any issues are reported, address them and produce another build. You can reuse the same build ID until you upload an archive.
  3. After the archive has been successfully validated, click Distribute App. You can follow the status of your build in the Activities tab of your app’s details page on App Store Connect.

Windows App

Note: For the complete guide provides a step-by-step walkthrough of build a Flutter app on windows or create file installer. For more details, see https://docs.flutter.dev/deployment/linux.

You can use flutter build windows and it will do the build for you. Make sure to install Desktop development with C++.

The build .exe file can be found on ...\projectName\build\windows\runner\Release\

You can use msix package for build. To build using msix you need to enable developer mode on Windows.

Type start ms-settings:developers and it will open the setting and enable it.

Open Command prompt (as Administrator if you needed) and navigate to your project directory and type these command

flutter build windows
flutter pub run msix:create

You will get an .msix app that will install the usual way windows does.

You can also configuring your installer.

For more details go to https://flutter.dev/desktop.

The executable can be found in your project under build\windows\runner<build mode>. In addition to that executable, you need the following: From the same directory: all the .dll files the data directory

The Visual C++ redistributable You can use any of the methods shown in the deployment example walkthroughs on the Microsoft site. If you use the application-local option, you need to copy: msvcp140.dll vcruntime140.dll vcruntime140_1.dll Place the DLL files in a directory next to the executable and the other DLLs, and bundle them together in a zip file.

Linux App

Note: For the complete guide provides a step-by-step walkthrough of releasing a Flutter app to the Snap Store. For more details, see this forum https://stackoverflow.com/questions/64291336/how-to-build-release-version-of-windows-app.

Build the snap

Once the snapcraft.yaml file is complete, run snapcraft as follows from the root directory of the project.

To use the Multipass VM backend:

 snapcraft

To use the LXD container backend:

 snapcraft --use-lxd
Publish

Once the snap is built, you’ll have a <name>.snap file in your root project directory. You can now publish the snap. The process consists of the following:

  1. Create a developer account at snapcraft.io, if you haven’t already done so.
  2. Register the app’s name. Registration can be done either using the Snap Store Web UI portal, or from the command line, as follows:
 snapcraft login
 snapcraft register
  1. Release the app. After reading the next section to learn about selecting a Snap Store channel, push the snap to the store:
 snapcraft upload --release=<channel> <file>.snap

Web App

Note: For the complete guide provides a step-by-step walkthrough of releasing a Flutter app to the App Store. For more details, see https://docs.flutter.dev/deployment/web.

During a typical development cycle, you test an app using flutter run -d chrome (for example) at the command line. This builds a debug version of your app.

Build the app for deployment using the flutter build web command. You can also choose which renderer to use by using the --web-renderer option (See Web renderers).

This generates the app, including the assets, and places the files into the /build/web directory of the project.

The release build of a simple app has the following structure:

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

Launch a web server (for example, python -m http.server 8000, or by using the dhttpd package), and open the /build/web directory. Navigate to localhost:8000 in your browser (given the python SimpleHTTPServer example) to view the release version of your app.

Solving Errors

There are several potential errors when run or debug this music player app and you can find the some solutions how to fix it.

XMLHttpRequest (API Cors) Error in Flutter Web

It seems like CORS error is well-known issue in the web field. But it could be critical error. The error message is usually something like :

Access to XMLHttpRequest at 'https://itunes.apple.com' from origin 'http://localhost:59269' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:60893' that is not equal to the supplied origin.

You can check forum discusing at stackoverflow.com by clicking this link : https://stackoverflow.com/questions/65630743/how-to-solve-flutter-web-api-cors-error-only-with-dart-code/66879350

In order to make the process easier I highly recommend to use flutter_cors Dart Package. Check this link : https://pub.dev/packages/flutter_cors

1. Install flutter_cors Dart Package.

dart pub global activate flutter_cors

2. Set Paths

export PATH="$PATH":"$HOME/.pub-cache/bin"

3. Run flutter_cors for disable CORS

fluttercors --disable

Support Me

About Me

Thanks so much!