Wallpaper App Banner

Documentation

Flutter Wallpaper App with Admin Panel

Thank you so much for purchasing our item from codecanyone.

  • Created: 27 September, 2024

If you have any questions that are beyond the scope of this help file, Pleasefeel free to email at Code Craft Apps Ltd.

Basic

To install, set up, and publish Wallpaper App with your branding, it's necessary to possess fundamental knowledge in both server-side and mobile app development since the system comprises multiple features for web and mobile applications.

  1. IDE for Mobile and Web development, we preferred Android Studio and VSCode.
  2. Flutter SDK and JDK with path setup in your IDE.
  3. Web hosting, Server related knowledge like apache or local machine server, we preferred server with cpanel.
  4. Basic knowledge in AWS S3.
  5. Basic knowledge in PHP, Laravel, Dart and Flutter if you want to do some customization yourself (Not compulsory).
  6. Basic knowledge about google cloud, firebase, Onesignal, Admob and Google Play Console

Please be aware that Envato's pricing does not include installation or app publishing support. You are solely responsible for following the installation instructions provided in the documentation, as well as completing any necessary setup and branding changes. We are not responsible for any mistakes made during this process. Furthermore, any customizations you choose to make are entirely at your own discretion and responsibility.

Server

Before install, please make sure you have the components bellow enable on your server

  • PHP 8.1 or Greater
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension
  • Ctype PHP Extension
  • JSON PHP Extension
  • BCMath PHP Extension
  • Exif PHP Extension
  • Fileinfo PHP Extension
  • GD PHP Extension (or Imagick PHP Extension)
  • PHP Zip Archive
  • PHP JSON
  • PHP cURL
  • PHP MySQL
  • Rewrite Module (Apache or Nginx)

Recommended hosting provider Hostinger

These extensions are usually enabled by default on most servers, but it's advisable to verify this with your hosting provider.

Mobile App

  • Android studio
  • Flutter SDK setup (This app required version 3.22.2 to work properly)
  • JDK with path setup (only for vs code)
  • Xcode for iOS(IPA) file build

Due to apple's new app store guide lines, Apps built using templates are rejecting, you may have to change the UI or Features to get approve on App Store. We don't get any responsibility about app store and play store rejections and issues.

Environment Setup

Flutter SDK

You can download and setup flutter from here at flutter.dev and You can follow the documentation depends on your own device and os.

  • Windows:
  • Mac:
  • Linux:

Admin Installation

Follow below steps

  1. Create a new subdomain for admin panel. ex: admin.wallpaperapp.com
  2. Unzip the downloaded package from codecanyone and open the /Source folder. You will need to upload the Admin-code.zip file to your hosting web server using FTP or localhost in order to use it install it on your website and then you need to unzip this file in your server desired location.
  3. Make sure in script folder /bootstrap and /storage folder have permission as 755 recursively.
  4. Manually create a database using “Phpmyadmin” and import the db.sql file into newly created database.
  5. Now edit .env file and replace DB_DATABASE, DB_USERNAME, DB_PASSWORD values with correct values
  6. You can use server storage to store the wallpapers, to do this follow steps: (If you want to use AWS S3 skip this and follow next step)
    1. Open routes/web.php file and put below code
              Route::get('/foo', function () {
            Artisan::call('storage:link');
        });
    2. Now access newly added path from your browser, if your domain name is walldrops.io open https://walldrops.io/foo from new tab in your browser. If it gives an error try https://walldrops.io/public/foo
    3. This will create a symlink to the public folder with storage.
  7. You can use AWS S3 to store wallpapers, to do this we need to create AWS account for setup storage (If you need to store images on server, skip this step and follow above step)
    1. Log in to the AWS Management Console.
    2. Search for S3 in the top search bar and click on S3 to open the service.
    3. Click Create Bucket.
    4. Fill in the bucket details:
      • Bucket Name: Provide a globally unique name.
      • Region: Select your preferred region.
    5. Configure other settings as needed (you can leave most settings as default).
    6. Click Create Bucket.

    Set Bucket Permissions

    1. Select your newly created bucket from the list.
    2. Go to the Permissions tab.
    3. Enable public access for the bucket and put below content for bucket policy, 
                            
                        {
                          "Version": "2012-10-17",
                          "Statement": [
                              {
                                  "Effect": "Allow",
                                  "Principal": "*",
                                  "Action": "s3:GetObject",
                                  "Resource": "arn:aws:s3:::your_bucket_name/*"
                              }
                          ]
                        }

      Replace the your_bucket_name with actual name of your bucket.


    Create an IAM User

    1. In the AWS Management Console, search for IAM and click on it.
    2. In the left sidebar, click Users, then Add User.
    3. Enter a User Name (e.g., s3-access-user).
    4. Under Access Type, check Programmatic Access (this is for generating the Access Key ID and Secret Access Key).
    5. Click Next: Permissions.

    Attach a Policy to the User

    1. Choose Attach Policies Directly.
    2. Search for the AmazonS3FullAccess policy.
    3. Select the checkbox next to AmazonS3FullAccess (or choose a more restrictive policy if needed).
    4. Click Next: Tags and then Next: Review.
    5. Click Create User.

    Generate AWS Access Key ID and Secret Access Key

    1. After creating the user, you'll be provided with an Access Key ID and Secret Access Key.
    2. Important: Download the CSV file or copy the keys to a secure location, as the Secret Access Key will not be shown again.
    3. Use these keys to authenticate your app with AWS services (e.g., S3).
  8. Now replcae the .env files AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_DEFAULT_REGION, AWS_BUCKET, AWS_URL with your own values
    • AWS_ACCESS_KEY_ID: Key ID generated in last step
    • AWS_SECRET_ACCESS_KEY: Key secret generated in last step
    • AWS_DEFAULT_REGION: Region of your AWS S3 bucket (Regions)
    • AWS_BUCKET: Bucket Name
    • AWS_URL: https://your_bucket_name.s3.your_region.amazonaws.com

      Replace the your_bucket_name with actual name of your bucket and your_region with Region

  9. Now create .htaccess file in the root of project files and put below content 
                      
                    DirectoryIndex index.php

                    RewriteEngine On 
                    RewriteRule ^$ public/index.php [L]
                    RewriteRule ^((?!public/).*)$ public/$1 [L,NC]
  10. Now Admin Panel is ready to use.

Wallpaper Web Frontend Installation

Follow below steps

  1. Unzip the downloaded package and open the /Source folder. You will need to upload the downloaded .zip file to your hosting web server using FTP or localhost in order to use it install it on your website and then you need to unzip this file in your server desired location. We recommend to use your root domain. Ex: wallpaperapp.com
  2. Make sure in script folder /bootstrap and /storage folder have permission as 755 recursively.
  3. Now edit .env file and replace DB_DATABASE, DB_USERNAME, DB_PASSWORD values with values that you created last step. Both admin and web frontend should connect to same database.
  4. Now create .htaccess file in the root of project files and put below content 
                          
                        DirectoryIndex index.php
    
                        RewriteEngine On 
                        RewriteRule ^$ public/index.php [L]
                        RewriteRule ^((?!public/).*)$ public/$1 [L,NC]
  5. Now Wallpaper Web frontend is ready to use.
  6. To change the logo replace the assets/img/walldrops-logo.png with your own

Google Login

Steps to Get Google Reverse Client ID and API Key for Google Login

1. Create a Google Cloud Project

  1. Go to the Google Cloud Console.
  2. Click the Select a Project dropdown in the top navigation and click New Project.
  3. Enter a project name and click Create.

2. Enable Google APIs

  1. Once your project is created, go to the API & Services Dashboard.
  2. Click Enable APIs and Services at the top.
  3. Search for Google Identity Toolkit API and Google OAuth 2.0 API.
  4. Enable both APIs for your project.

3. Create OAuth 2.0 Credentials

  1. In the left menu, click Credentials.
  2. Click Create Credentials and select OAuth 2.0 Client ID.
  3. Select Android as the application type.
  4. Click Create.

4. Get Your Client ID and Reverse Client ID

  1. After creation, your OAuth Client ID and Client Secret will be displayed.
  2. Download the credentials file by clicking Download JSON.
  3. The Reverse Client ID for mobile apps (iOS/Android) is located inside the downloaded JSON file under the key "client_id" and will look like a reversed URL: com.googleusercontent.apps.xxxxxxxxxxxxx-xxxxxxxxxxxxx.

5. Generate API Key

  1. In the Credentials section, click Create Credentials and select API Key.
  2. The generated API Key will appear in a pop-up.
  3. Copy the API Key and store it securely.

6. Configure OAuth Consent Screen

  1. Go to OAuth consent screen from the left menu.
  2. Choose External (for general users) or Internal (for users in your organization).
  3. Fill in the required fields like App Name, User Support Email, and Developer Contact Email.
  4. Save the configuration.

Now you have the Google Reverse Client ID and API Key replace them in .env file of admin code.

Mobile App

Watch below video to see how to run existing flutter app



Change Package Name

  • To change package name run dart run change_app_package_name:main com.new.package.name command in root of the project, replace com.new.package.name with your own package name.

Change App Logo

  • Replace the app_icon.png, app_icon_rounded.png and foreground.png with your icon
  • Run dart run flutter_launcher_icons command

Change Splash

  • Run dart run flutter_native_splash:create command

Change Name

  • For Android Change the value of label from /android/app/src/main/AndroidManifest.xml
  • For IOS Change the value of CFBundleName from /iOS/Runner/info.plist

Change App Colors

  • All colors can be found at /lib/constants.dart file, change as your desire

Change Base URL

  • Change the API url in /lib/config/config.dart 
                      static const String apiBaseUrl = 'https://your.domain.com/api/v1';

Change Admob Ad Units & App ID

  • Change the Admob App Id in /android/app/src/main/AndroidManifest.xml file 
                      <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="your_admob_id"/>
  • Change Ad Unit Id's in /lib/config/config.dart 
                      
                    static const String rewardedAdIdAndroid = "";
                    static const String rewardedAdIdIos = "";
                  
                    static const String nativeAdIdAndroid = "";
                    static const String nativeAdIdIos = "";
                  
                    static const String appOpenAdIdAndroid = "";
                    static const String appOpenAdIdIos = "";
                  
                    static const String topNativeAdIdAndroid = "";
                    static const String topNativeAdIdIos = "";
  • To display Rewarded Ads for every wallpaper download and set options, comment out the below lines from lib/screens/single_wallpaper/single_wallpaper.dart file 
                      
                    int freeCount = await PreferenceHelper().getFreeCount();

                    if (!context.mounted) { return; }
                    
                    if (freeCount > 0) {
                      await PreferenceHelper().setFreeCounter(freeCount - 1);
                      setWallpaperAs();
                      return;
                    }
    Located in line 487 to 495, line 533 to 541, line 574 to 582

Firbase & Onesignal

1. Create a Firebase Project

  1. Go to the Firebase Console.
  2. Click on Add Project.
  3. Enter a project name and click Continue.
  4. Optionally, enable Google Analytics and click Continue.
  5. Choose your Analytics location if enabled, and click Create Project.
  6. Once the project is created, click Continue to go to the Firebase dashboard.

2. Add an App to Firebase (Android/iOS/Web)

  1. In the Firebase console, click on the Project Overview.
  2. Select Add App (choose between Android, iOS).
  3. Follow the on-screen instructions to register the app:
    • For Android: Add the package name, SHA1 key (optional), and download the google-services.json file.
    • For iOS: Add the iOS bundle ID, App Store ID (optional), and download the GoogleService-Info.plist file.

Steps to Set Up OneSignal

1. Create a OneSignal Account

  1. Go to the OneSignal Website.
  2. Sign up for an account if you don't already have one.
  3. Log in to the OneSignal dashboard.

2. Create an App in OneSignal

  1. Click on Add a New App in the OneSignal dashboard.
  2. Enter a name for your app and click Create.
  3. Select the platform(s) you want to target (Android, iOS).

3. Configure Firebase in OneSignal for Push Notifications (Android)

  1. In the OneSignal dashboard, go to Settings > Google Firebase.
  2. Now go back to Firebase console and create a Service Account and download the json file
  3. Not in the Onesignal upload the Firebase Service Account json file
  4. Now copy the App ID of the OneSignal app and copy it into app config file

Change OneSignal App ID

  • Change the OneSignal App ID in /lib/config/config.dart 
                      static const String oneSignalAppId = 'your_app_id';

In-App Purchase

We are using In-App Purchase Subscriptions and In-app products to offer Ad Free experience to users.

  1. Create 2 subscriptions and 1 product in the Google Play Console and copy the product id's
  2. Replace the product id's with /lib/screens/upgrade/upgrade_screen.dart 
                      
                    List productIds = [
                      'premium_monthly',
                      'premium_annual',
                      'premium_lifetime',
                    ];
  3. Use same product id's for Android & iOS

App build & release

Build for Android

For debug app build you can run this command:

flutter build apk

Build file location: /build/app/outputs/flutter-apk/ For deploying it please follow this documentation: https://docs.flutter.dev/deployment/android

Build for iOS

There are no general way to generate app for iOS. Apple doesn’t allow to install app like this debug way. If you want to install it on your iOS device then you have to deploy it on TestFlight or AppStore. For deploying it please follow this documentation: https://docs.flutter.dev/deployment/ios

Support

If this documentation doesn't answer your questions, So, Please send us Email via [email protected]

An active purchase required to get support, Please send your envato purchase details with your support request or use the Item Page to request the support!

Don’t forget to Rate this script