Streamz
A music streaming Flutter app with admin panel
by: W3 Engineers Ltd.
Email: info@w3engineers.com
At first thank you for purchasing this template. If you have any question or any problem
regarding
this template, feel free to Contact
us via
info@w3engineers.com.
1 - Introduction
Streamz is built with PHP and Flutter framework. It's a music app with admin panel.
Admin can set up the configuration form backend.
Admin can upload tracks and manage tracks by creating genres also. Admin can create/edit/delete/update tracks and genres also.
Key Features
- Robust Admin Dashboard Powered by PHP:
Efficiently manage your platform through a feature-rich admin panel developed in PHP.
- Extensive Screen Diversity:
Over 20 meticulously designed screens for a comprehensive user experience.
- Monetization with Google Interstitial Admob (Admin only):
Integrate seamlessly with Google Interstitial Admob for effective monetization strategies.
- Strategic Placement with Google Banner Admob (Admin only):
Optimize revenue streams through strategic ad placements using Google Banner Admob.
- Elegant UI with Material Design:
Immerse your users in a visually appealing interface crafted with Material Design principles.
- Effortless Installation Process:
Simple and straightforward installation steps ensure a hassle-free setup.
- Customization Made Easy:
Tailor the platform to your preferences with user-friendly customization options.
- Clean and Readable Code:
Benefit from code that is not just functional but also well-organized and easy to comprehend.
- Thorough Code Comments:
Enhance collaboration and understanding with comprehensive comments throughout the codebase.
- User-Friendly Setup for Beginners:
Designed with beginners in mind, the platform comes with essential documentation for easy setup.
- Incorporating Modern Features:
Stay ahead in the digital landscape with a feature-packed solution that incorporates the latest industry trends and technologies.
2 - Folder Structure
2.1Unzip the file.
2.2You see the following folders:
flutter-streamz (flutter application files)
Streamz-admin (admin panel files)
db.sql (sql file)
3 - Requirements
Android Studio (Hedgehog)
Flutter version 3.16+
PHP 7+
mysql database
We have made important steps yellow for up and running the project.
4 - Installation
4.1PHP version 7+ required(So update your Xampp control panel or install new
one).
4.2Database Setup
In order to setting up database , first you create a database streamz_db”.
Then you can easily import the db.sql file in your server.
Link the database to admin panel
For linking up, first you will find the file from this directory:
Insert the dbname (if it is empty),
username, password.
You also have to put the link of your server
in the DOMAIN_NAME without the http. If you running the server locally
put your IP address with the folder of the project. The link would look like
192.168.2.71/streamz/
4.3Installation on Locally
Make sure that you have already installed
Xampp control panel.
Copy the streamz-admin folder and paste it in your
Xampp's htdocs folder.
Now run your Xampp Control Panel.
Create a database. Database name will be
"stramz_db" or any other name
Import the db.sql file in your created database.
(db.sql file is located in the Main_files.)
Find your pc ip address.
Open Command Promt and type => ipconfig
Then find the IPv4 address (example: 192.168.2.88), copy the address
Open your browser.In your browser url type:
http://your_ip_address/streamz-admin/admin
For example, my pc ip address is: 192.168.2.88
So the url will be: http://192.168.2.88/streamz-admin/admin
If you see the admin login page, then admin-panel work successfully.
Email: admin@gmail.com
Password: 123456
You also have to put the link of your server
in the DOMAIN_NAME without the http. If you running the server locally
put your IP address with the folder of the project. The link would look like
192.168.2.71/streamz/
4.4Installation on Server
To install it on the live server, First import the databse to the server.
Then copy the project folder and paste
it to your live server folder.
Please give the writeable 777 permission
to the following folders and the subfolders inside them:
admin\audio
admin\uploads
admin\uploads\thumb
Login as Admin:
UserName: admin@gmail.com
Password: 123456
You also have to put the link of your server
in the DOMAIN_NAME without the http. If you running the server locally
put your IP address with the folder of the project. The link would look like
192.168.2.71/streamz/
4.5Installation with terminal
Installing apache
sudo apt update
sudo apt install apache2
sudo ufw allow in "Apache Full"
sudo apt install apache2
Copy project to web root dir
sudo cp -R wallpark-admin /var/www/html/
Installing MySQL
sudo apt install mysql-server
Create Database(mysql)
create database streamz_db;
create user db_user;
grant all on wallpark_db.* to 'db_user'@'%' identified by 'admin123';
Import Database
mysql -h localhost -u root wallpark_db < wallpark_db.sql
Install PHP 7.2
apt-get -y install php7.2 libapache2-mod-php7.2
sudo apt-get install php7.2-mysql
sudo apt-get install php7.2-gmagick
sudo apt-get -y install php7.2-gd php7.2-imagick
systemctl restart apache2
Enabling mod_rewrite
sudo a2enmod rewrite
sudo systemctl restart apache2
sudo apt-get install php7.2-gmagick
systemctl restart apache2
Edit host
If you want to change the server link. Edit this following file. If you don't want to change the link of the server,
you can skip this step.
sudo nano /etc/apache2/sites-available/000-default.conf
For more detail, Please follow the link below.
https://www.digitalocean.com/community/tutorials/how-to-set-up-apache-virtual-hosts-on-ubuntu-14-04-lts
Restart server
sudo systemctl restart apache2
Permission
Please give the writeable 777 permission
to the following folders and the subfolders inside them:
admin\audio
admin\uploads
admin\uploads\thumb
Login as Admin:
UserName: admin@gmail.com
Password: 123456
You also have to put the link of your server
in the DOMAIN_NAME without the http. If you running the server locally
put your IP address with the folder of the project. The link would look like
192.168.2.71/streamz/
5 - Configure app with server
5.1Extract and open the project
Double click on the zip file for extract the project
Open android studio
Click on “open" & select the flutter-streamz folder
Click on “Trust Project"
5.2Basic app configuration (Get dependency and generated file)
Tools-> Flutter-> Flutter Pub Get
Go to terminal -> and paste this command
dart run build_runner build --delete-conflicting-outputs
5.3Server Configuration
Go lib-> resources-> app_constant.dart
See following picture string red mark baseUrl and adminToken. You should change the baseUrl value and replace your base URL.
6 - Customizing the App
6.1Change package name
Go to terminal -> and paste this command:
rename setBundleId --targets android,ios --value "com.your.id.com"
6.2Change app name
Go to terminal -> and paste this command
rename setAppName --targets ios,android --value "YourAppName"
6.2Change app icon
Go to flutter-streamz -> image
Delete the image named applogo.png and paste your own logo. Make sure you name it applogo.png, otherwise, it does not change globally (splash screen, auth screen)
6.2.1Android
Go to terminal -> and paste this command
dart run flutter_launcher_icons -f icon_launcher.yaml
6.2.2IOS
Go to the https://www.appicon.co/ and paste your image, generate your logo by following the image
Extract the AppIcons.zip file and open it
AppIcons -> Assets.xcassets ->AppIcon.appiconset Copy All files like below
Open the main folder of flutter-streamz-> ios -> Runner -> Assets.xcassets
Delete all files and paste your new copied items
Repeat same work for remaining 6 folders
6.4Change build configuration
Go to android -> key.properties , and change the store password, store key like below
Following this documentation generate your own jks file or follow the step below
Paste the command on terminal & fill up all steps
keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA \
-keysize 2048 -validity 10000 -alias upload
If you are windows user please use this command instated previous one
keytool -genkey -v -keystore %userprofile%\upload-keystore.jks ^
-storetype JKS -keyalg RSA -keysize 2048 -validity 10000 ^
-alias yourKeyAlias
Go to your user directory and copy the upload-keystore.jks file
Open your project go to android-> app and delete this upload-keystore.jks file then paste your copied file
7. Firebase & Google sign in configuration
Open the firebase console and create a new project
Enable google analysis if you want and press continue
Choose Default Account for firebase from dropdown menu then press create project button
Wait few moments to create the project and press continue
Our Firebase project is ready to be connected with our music app. Let's follow a few more steps to establish the connection!
Go to your Android Studio, open the terminal, and paste the following command: 'firebase login'. After successfully logging in through the browser, you are ready to configure the Firebase projects for your Flutter project.
Paste "flutterfire configure" this command on the terminal and configure your project like below
After selecting the Firebase project, choose 'android' and 'ios,' then press enter. This command will automatically configure the Firebase project for your Flutter project. Refer to the screenshots below for a better understanding.
Make sure to select 'android' and 'ios' and type 'yes' when prompted. Please refer to the screenshots below for a better understanding.
7.1 Google Sign In
Open the Firebase console again and navigate to your project. On the left side, click the 'Authentication' tab, then select the 'Google' option
In this window, ensure that you enable Google, choose a support email from the dropdown, and then click the 'Save' butto
Go to the Google Cloud Platform API manager and select your project, then go to the OAuth constant screen -> Edit APP
Complete these four steps after clicking the 'Edit App' button as shown in the screenshots below
Open your Flutter project and navigate to the terminal. Run the following commands:
cd android
./gradlew signingReport
This command generates the digital signature. Copy both the productionDebug and productionRelease SHA-1 & SHA-256 one by one and add them to the Firebase Console. Refer to the screenshots below for a better understanding.
Open firebase project again, click the settings icon -> Project settings
Select android -> Add fingerprint
Here, add the SHA-1 and SHA-256, one by one, that you obtained in the earlier steps
In the above steps, our Google Cloud and Firebase configuration was completed. Now, we need to update all configurations in our Flutter project. To do that, run 'flutterfire configure' and configure your project again as before.
To update the iOS configuration with Firebase, revisit the Firebase console, select 'ios' project and download the 'GoogleService-Info.plist' file.
Copy the downloaded 'GoogleService-Info.plist' file. Navigate to the Flutter project -> ios -> runner, delete the old 'GoogleService-Info.plist' file, and paste the new one
To enable Google Sign-In for iOS, you can follow this document or the steps below.
Go to the 'GoogleService-Info.plist' file and copy the 'CLIENT_ID' from the selected ... value, as shown in the screenshots below
Navigate to the 'Info.plist' file and replace the values for 'GIDClientId' and 'GIDServerClientId' with the 'CLIENT_ID' copied from previous step, as illustrated in the screenshots below
Again, Navigate to the 'GoogleService-Info.plist' file and copy the 'RRVERSED_CLIENT_ID' from the selected ... value, as shown in the screenshots below.
Navigate to the 'Info.plist' file again, and replace the values for 'CFBundleURLSchemes' copied 'RRVERSED_CLIENT_ID' from previous step, as illustrated in the screenshots below
8 - Sign in with Facebook
8.1 Android
Go to
Facebook Login for Android - Quickstart and login
Click Create a New App
Click Authenticate and request data from users with Facebook Login -> Next
Click No, I'm not building a game -> Next
Put app name and contact email -> Create app
Go to
Facebook Login for Android - Quickstart again and select your project
Go to Associate Your Package Name and Default Class with Your App section and put your package name like and activity name like this.
Open the flutter project on android studio -> terminal, and paste the command for generate key hash and copy the hash value.
For macOS or Linux
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
For Windows
keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64
Go to Provide the Development and Release Key Hashes for Your App section and put the copied hash value like below.
Go to Facebook Developer Console, select your project -> App settings-> Basic -> add Privacy Policy URL & Terms of Service URL. Copy the App Id and App secret
In Android Studio, open your Flutter project -> android -> app -> src -> main -> res -> values -> string.xml and replace the values for 'facebook_app_id' and 'facebook_client_token' with your own.
8.2 IOS
Go to Facebook Login for IOS - Quickstart and select your app
Go to Register and Configure Your App with Facebook and select your app, put your app id and save it
Open the Flutter project -> ios -> runner -> Info.plist and change the values for 'FacebookAppID ' and ' FacebookClientToken' and 'FacebookDisplayName' to your own
Also change the app id from here
9 - Sign in with Apple
You will need to recreate and download the updated Provisioning Profiles for your app, so they include the new Sign in with Apple capability. Then you can download the new certificates and select them in Xcode.
10 - Change color & run app
10.1 - Change color
Open the Flutter project -> lib -> resources -> app_constant.dart and modify the color if desired
10.2 - Run app
This project contains 3 flavors:
development
staging
production
To run the desired flavor either use the launch configuration in VSCode/Android Studio or use the following commands:
development
flutter run --flavor development --target lib/main_development.dart
staging
flutter run --flavor staging --target lib/main_staging.dart
production
flutter run --flavor production --target lib/main_production.dart
11 - SMTP Server Config
11.1To send the confirmation email and forgot password functionality
you have to configure your SMTP server. To configure the SMTP server,
click the Configuration >> SMTP Configuration menu from sidebar
and change the credentials of the SMTP server.
Host
Sender Email
Username
Password
Port
Encryption
11.2Google SMTP Server Config
11.2.1Login to your Gmail account.
11.2.2Then visit the link:
https://myaccount.google.com/security
11.2.3In the security page, turn off the 2-step verification
11.2.4Turn on the less secure app access
11.2.4Also visit the link:
https://accounts.google.com/b/0/DisplayUnlockCaptcha
and enable it.
12 - Publishing the app in Playstore
12.1Prepare your app
Change the package name and app name.
Generate sign apk.
Configure AdMob according to your account settings
Change the app logo.
12.2Prepare resources
Prepare one logo with size 512px * 512 px
Take a minimum of 2 screenshots of your app
Generate feature graphics screen1024px * 512px
Reference link:
https://support.google.com/googleplay/android-developer/answer/1078870?hl=en
12.3Submit your app on play store
Sign in to your play store account with your credential.
Create an app.
Go to “App Release” section.
Fillup application short and long description, upload a high-resolution logo, app screenshots and feature graphics that was prepared earlier.
Also filling the privacy policy link and other required information.
Click on save and if all required field submitted properly then you will find a green check mark on app release.
Now go to “App releases” section and go to manage production release.
Upload you signed apk and leave a short note in “What's new in this release” section.
Save this section.
Now finish “Content Rating” and “Store Listing” section with proper instruction and back to “App release” section again.
Finally, review your app and submit for publication.
Reference link:
https://www.youtube.com/watch?v=udPWeFUZzdo
12.4App submission
After submission, you won’t find your application immidiately on playstore.
Play store team will review your app. And after review your application will be published on playstore.
Review time could max 48 hours.
12.5Note
Here are some important tips for your application that will reduce the possibility of application rejection by play store.
Do not forget to change the app name and package name.
Do not forget to change the application logo.
Try not to download image or icons directly from Google. And try to use copyright free resources.
User your own AdMob credentials and link your application with AdMob account.
Admin Panel
13 - Folder Structure of Admin Panel
13.1Inside the project folder, you will see the following directories that are important
to setup and customizing the admin panel.
13.2Home directory: All the public files, uploaded images/audios, apis are inside this directory.
api : List of all apis.
admin\common\php : Common files like header, footer, sidebar.
admin\common\other : Custom Styte and Script file.
admin\plugin-frameworks: All the external style and javascript files.
admin\uploads: All the uploaded image and video files.
13.3private directory: All the private files like models, controllers files are inside this directory.
private\init.php : All the settings of the backend.
private\models : All the models.
private\vendor : External php scripts like phpmailer.
private\init.php : All the settings like database credential, uploaded folder name, item count for pagination.
Please make sure you have change the database credential in the
private/init.php file.
Please make sure you have set the writable 777 permission to the following folders
admin\audio
admin\uploads
admin\uploads\thumb
13.4Changing maximum file size
For changing the maximum file size of the server,
first you must change the
post_max_size and
upload_max_filesize of the server and then restart the server.
For details please visit the following link
Click Here
In the root of our project there is a .htaccess file.
You can change this file to configure the upload file
size of the server.
Also you nedd to change the following constants form private\init.php file.
define("MAX_IMAGE_SIZE", 1.5)
define("MAX_AUDIO_SIZE", 50)
define("MAX_VIDEO_SIZE", 25)
Open private > init.php
Change the value of MAX_IMAGE_SIZE and
MAX_VIDEO_SIZE and MAX_AUDIO_SIZE
You have to change the following lines form .htaccess also.
php_value upload_max_filesize 20M
php_value post_max_size 20M
14 - Functionality of Admin Panel
14.1Artist
Admin have to create an artist in order to create track. Put the image,
artist name, genre of the artist(If you didn't create any genre, please add a genre), description and the make the artist active
by clickin the switch button and add the artist.
Admin can upload multiple tracks from the tracks option form the
artist > tracks
14.2Genres
Admin can view / create / update / delete the genres from
the genre sidebar.
14.3Albums
Admin can view / create / update / delete the albums from
the albums sidebar. First Upload the image of the album. Admin can make the album featured( This is needed for the
slider of the app. All the featured album will be shown in the slider of the app). Put the title, artist,
Genres, Tags (This is optional). And make the album active.
Admin can put the description of the album in the
album > description
Admin can upload multiple tracks from the tracks option form the
album > tracks
14.4Playlist
All the playlist is being showin in this page.
admin can view and delete a playlist from here.
14.5Users
In the Users page admin can see
all the registered users of the app. And can delete a user form here
14.4Google Admob
Admin can configure admob credentials from admin panel.
Also admin can on/off admin from the toggle button in the admob page.
14.5Push Notification
Admin can send push notification from the admin panel.
First, Admin have to put the AuthKey in the Configuration > push Notification field.
To get the Auth key
please follow section 8
Admin can create, delete, Update notification form the Push Notification sidebar
14.6App Feedback
Admin can view all the feedback which given by the users
from the app here.
To get the Auth key
please follow section 8
Admin can create, delete, Update notification form the Push Notification sidebar
14.6Configuration
In the configuration page, admin will be able to
change the icon, site title and site tag line in the Configuration > Site Configuration.
In the configuration page, admin will be able to
change SMTP configuration form Configuration > Site Configuration.
In the configuration page, admin will be able to
change Firebase Auth for the push notification form Configuration > Push Notification.
To secure the API we have used the api token.
This token is being used in the android app to secure the API. Admin can change the
Api Token form Configuration > API Token. For more information check
Section 5.2