# Introduction

Version: 3.1.0 (Last Updated: 12-03-23)

### Walfy - Flutter Wallpaper App for Android with Admin Panel

Build your own wallpaper app with impressive UI design and animations.

> Product Details: <https://1.envato.market/NKBx6V>
>
> Admin Panel: <https://admin-walfy.web.app>
>
> Android Demo: [Google Play](https://play.google.com/store/apps/details?id=mrblab.wallpaper_app)


# Changelogs

Walfy is constantly being updated with new features, bug fixes, and adjustments. Below is a full listing of change log information.

## Version: 3.1.0 (hotfix-1)

> 12 March 2023
>
> ```
> - Fixed: Deleting categories wasn't working in admin panel.
> - Changed file: lib/pages/categories.dart (admin)
> ```

## Version: 3.1.0 (hotfix)

> 27 February 2023
>
> ```
> - Fixed an issue while uploading images from the admin panel
> ```

## Version: 3.1.0

> 26 February 2023
>
> ```
> - Updated with flutter latest version 3.7.x (Both app and admin)
> - Fix Android 13 notification & download issues (app)
> - Added login with email & password (app)
> - Added new login method for admin (admin)
> - Added custom security rules to secure the database
> - Added the ability to upload images to hosting (admin)
> - Lots of UI Changes (admin)
> - New online doc
> ```


# Getting Started

Welcome to the Walfy Configuration Document. This is the installation doc for both admin and app. You can build the admin panel and app (Android & iOS) by following this doc.

So, You will get two source code files. One is for the Admin Panel and the other one is for the App. Both are developed on the flutter framework. So, You need to install flutter on your computer first to set up both. You need to follow the admin panel setup first and then go for the app setup.

{% hint style="info" %}
Note: We provide installation/reskin service for the Walfy App. If you can’t do the installation by yourself, we can do that for you. You can email us at <mrblab24@gmail.com> for more details.
{% endhint %}


# 1. Flutter Installation

The complete application (both admin & app) has been developed & built on Flutter. First, You have to install flutter on your computer. You can use Both Visual Studio Code & Android Studio as IDE for Flutter. The steps are the same for both IDE. We have used Visual Studio Code. So, Our Setup will be based on this IDE.

> To install flutter on your computer, follow the official documentation from Google. Flutter Official Site: <https://flutter.dev/>.

You can follow these youtube videos to install flutter also.

> * For Mac: <https://www.youtube.com/watch?v=9GuzMsZQUYs>
> * For Windows: <https://www.youtube.com/watch?v=T9LdScRVhv8>

{% hint style="warning" %}
Make sure you have installed the latest stable version of flutter. If everything is okay then you can follow the further steps below.
{% endhint %}

{% hint style="info" %}
Note: A Mac (Apple Desktop/laptop) device and an apple developer account are required for the iOS setup. If you don’t have both of them, you can ignore the iOS steps.
{% endhint %}


# 2. Code Setup

After purchasing the app you will get a .zip file. Unzip it. Inside the **main\_files** folder, you will get a folder named **admin**. This is the source code of the admin app. You have to work on this to set up your admin panel. Now open your IDE(Android Studio/VSCode) and open the **admin** folder on your IDE. Wait some time to load the project.

Now go to the IDE terminal and run the following commands one after one :&#x20;

After that, run the following command below:

```
flutter clean
```

```
flutter pub get
```

<figure><img src="/files/Cha1eQJXpRwYCZ8xgCeA" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Make sure these commands should be run from the root directory of the code.
{% endhint %}

These commands will clean the project and get the required packages. Wait some time to get all the packages.


# 3. Firebase Setup

We have used the Firestore Database from Google as the backend for this project.

* &#x20;First, Go to the [Firebase Console](https://firebase.google.com/) and sign in with your email account and go to the console.
* Create a project by your app name. And go to the project overview.

<div align="left"><figure><img src="/files/tqXQIVCosPVM4aLxC482" alt=""><figcaption></figcaption></figure></div>

* Click on the **plus icon** and then click on the **web icon**. You will see a popup like the second picture below:

<figure><img src="https://lh4.googleusercontent.com/hD1-pDhSNGzuuvvkwK8CKokkPU69yxD4S1hGGho96GMq6yFjQEe4AflMA3fcWie_QzO_aq1_Fow3c7ehze5-lh39A7a5981THr1S8tYlRO4i2a6F3m0NFnis3c0fy_JQOe7m6y4O0ReTrQCbNIuR6Dh3nV2Z_KGLyPJi9Bv5Fx0rPfWBgyiBZSAR0Yyj" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh5.googleusercontent.com/Zz9MZPGnp6xpddwyGjKE-2ckHITSlR3z5rFqzPmDtXHzRUKZ0ao02VMXzCUJc_9Axh92YLVtyBv5IJSUNDuD8_aymPCjRzoryA3z4mMMEtniaS1ZLTnzLVCbjP-AT7t78tEfbAUjFJNQfwrNfAZRxXxEXIhoYQi-9j9_UlvawW3tD7fAgI4KESRwC0FP" alt=""><figcaption></figcaption></figure>

* Input the name as **Admin Panel** and fill in the checkbox because you need hosting too and then click on register app. After that, Skip the other options by clicking next. (Don’t input a custom name for hosting else you need extra setup for this which is not recommended)
* Now go to **Project Settings**. At the bottom, Select the **Admin Panel** and copy the selected lines shown in the picture below:

<figure><img src="/files/fVtb5M08dPSTJpTSFAHK" alt=""><figcaption></figcaption></figure>

* Now, go to your IDE and open the **lib/firebase\_option.dart** file and paste the line there.

<figure><img src="/files/60ibYQAYM25K9vdVWnFo" alt=""><figcaption></figcaption></figure>

That's it.


# 3.1 Firestore Database Setup

Follow the steps below:

* From your firebase console, click on the **Firestore Database** and then click on the create database button.

<figure><img src="/files/gXmBcV2wfZk0PBRJuH2W" alt=""><figcaption></figcaption></figure>

* Now select the production mode and click on **Next > Enable**.


# 3.2 Database Security Rules

* From the Firestore Database, Click on the **Rules** tab and copy and paste the following code below:

{% code title="Firestore Security Rules" %}

```firestore-security-rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  
  	match /users/{userId} {
    	allow read: if true;
      allow write: if isUserSignedIn() && request.auth.uid == userId;
    }
    
    match /contents/{id} {
    	allow read : if true;
      allow create: if isUserSignedIn() && isAdmin();
      allow update: if isUserSignedIn() || isAdmin();
      allow delete : if isUserSignedIn() && isAdmin();
    }
    
    match /categories/{document=**} {
    	allow read : if true;
      allow write: if isUserSignedIn() && isAdmin();
    }
    
    match /item_count/{document=**} {
    	allow read: if true;
      allow create, update: if isUserSignedIn() || isAdmin();
    }
  
  	function isUserSignedIn (){
    	return request.auth != null;
    }
    
    function isAdmin (){
    	return "admin" in get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role;
    }
    
  }
}
```

{% endcode %}

* Click on Publish button to publish the security rules. That's it.


# 3.3 Database Index Setup

From the Firestore Database, Click on the **Indexes** tab and click on the **Add Index**. You have to create an index for the database.

> * Enter **contents** as Collection ID, **category** into the first field and set **Ascending**, Enter **timestamp** in the second field and set **Descending,** create another field and enter **\_name\_** in the third field and set **Descending** then select **Collection** as query scope.&#x20;

This may take 3-5 minutes to activate. After completing this, your index page should look like this:

<div align="left"><figure><img src="/files/O75JKbBj9iItOTq0PzwB" alt=""><figcaption></figcaption></figure></div>


# 3.4 Firebase Storage Setup

* From your firebase console, go to **Build>Storage** and then Click on **Get Started**, and then select start in production mode and **Next>Done**.
* Now, go to the **Rules** tab and copy and paste the following code there.

{% code title="Storage Security Rules" %}

```firestore-security-rules
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true; 
      allow write: if request.auth != null;
    }
  }
}
```

{% endcode %}

3\. Click on **Publish** to publish the rules.


# 4. Code Configs

From your IDE, go to the **lib/configs/config.dart** file.

<figure><img src="/files/BYJbx1RAIB8muKSKUju0" alt=""><figcaption></figcaption></figure>

> * Change the App Name.


# 5. Upload to Firebase Hosting

## Install the firebase-tools CLI <a href="#d31b" id="d31b"></a>

Skip this step if you already have firebase tools installed. If you do not have this, you must install that first.

> npm download link: <https://nodejs.org/> (Download and install it)

{% hint style="info" %}
If you are not sure whether `npm` is installed on your machine, run `$ npm -v` , and see if it lists a version number. If it does, then you already have `npm`. If it says “command not found”, you need to install it.
{% endhint %}

Once `npm` is installed, run the following command:

```
npm install -g firebase-tools
```

`firebase-tools` is now installed!

## Install the required command line tools <a href="#install-cli-tools" id="install-cli-tools"></a>

* Log into Firebase using your Google account by running the following command:

```
firebase login
```

<figure><img src="/files/VSFjWevPbhyA58HBRjRW" alt=""><figcaption></figcaption></figure>

* Type Y and you will be redirected to your browser.

* Follow the command prompt and the link in your browser. Accept the permissions by clicking **Ok**. When you return to your terminal you should see that you are now logged in.

* Now you have to initialize the firebase. Run the following command:

```
firebase init
```

<figure><img src="https://lh5.googleusercontent.com/gmQTg_qE7UUhxmflNhNDI8UHT67Y6E16sIFUjH_gXWoNVUqODbCXBSE4v_YnBXlxu4AyZi20GfLVCVdLUahzASmKyUzPH2W9MMSQWlqAHduLDQ78GdAm3hpKEK7kjBVqfR5MNtgfzdGpa8XlM9uY0WZu5fHwXZ3wqbUXN_TttvZJoMr9jmpV37HfpS2M" alt=""><figcaption></figcaption></figure>

* Use the arrow keys to navigate the cursor to **Hosting** and hit the spacebar to select it, then press enter. Now you will see this screen:

<figure><img src="https://lh3.googleusercontent.com/PAlC0Ta4gYhgJ6EBOLkGnGbtiYgM5EwPfzZ7Pl-2FHZBsrB-pf-phgGz8QYx3pUVJT4CI8LzcXyQYD2pm0JXR3E_ai1r6q8Gzzpb6KnPSiVcgx66EkBmsCdzpQHjpUyBUR-KXBhJwrKstlmm63wNxDGKD9d3595NXeZNg3AsMbOTLjO27qa4ydDuIyRO" alt=""><figcaption></figcaption></figure>

* Select an existing project by pressing Enter. Use the arrow keys to select the project you have made in the firebase console.
* Next, enter **build/web** as the public directory and press enter, then enter **y** (for yes) to select the single page app option.
* Enter **n** (for no) to Set up automatic builds and deploys with the GitHub option.

<figure><img src="/files/VJ5ZfdKzqP8XhEWBosC3" alt=""><figcaption></figcaption></figure>

## Build The Web App

Run the following command to build the app for the web:

```
flutter build web --web-renderer html --release
```

## Upload to Hosting

Run the following command to upload the admin app to the firebase hosting:

```
firebase deploy
```

<figure><img src="/files/9ynb3JWXF4C7Ux4gBhi2" alt=""><figcaption></figcaption></figure>

After this command, you will get a **Hosting URL** from firebase which will be your **Admin URL**.


# 6. Conclusion

Hopefully, you have finished all of the steps and got an admin panel URL. You can now go to the URL and you will see a login page.&#x20;

But you can't access the home section right now. You need to complete the app setup for that. After the app setup, you need to create an admin account from the app and then you can access the admin with that credentials. Hope you understand! Now, go for the app setup.


# 1. Introduction

Make sure you have configured your admin panel first. If everything is okay, you can follow the further steps. You can use Android Studio or Visual Studio Code.

{% hint style="danger" %}
Make sure you have installed the latest version of flutter which was required to configure the admin panel. If not, please follow the **Flutter Installation** step from the Admin Setup.
{% endhint %}


# 2. Code Setup

Open the **source/​wallpaper\_app** folder on your IDE (VSCode or Android Studio) and wait some moment to load the project.

> * Run the following command on the IDE terminal to clean the whole project first.
>
> ```
> flutter clean
> ```
>
> * Run the following command on the IDE terminal to get all the required packages.
>
> ```
> flutter pub get
> ```

\
Now, your project is ready for configuration.


# 3. Firebase Setup for Android


# 3.1 Android Package Name Setup on Firebase

* Go to the firebase console > Project overview page. Click on add app and then the A**ndroid** **Icon**. Enter your android package name.

<figure><img src="https://lh3.googleusercontent.com/8z0t-Z2lmTtkwEvhkIpmB7k5l1zGIGwbuALlduVOfhaio6JhgvoLJCrMhIoyE8WP_jviIf4CKtn3Pukh2bD8UOJS1hWJXSWg9PjhzGcn8QEXQVtvJ-rqEDZNcWxhMZGCbcqUmAijIIGErVmvnPSwlZcInngDOTg5A67RWI14v4TLm1i0sujUAFuN9oUp" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Your package name should be like com.your\_name.your\_app\_name . Like **com.microsoft.skype**. You can use the same package name for android & iOS. iOS doesn’t support under space in the package name. So, keep in mind that if you want to use the same package name for both android & iOS.
{% endhint %}

* Click on the register app and skip other steps by clicking next. That’s it.


# 3.2 Change Package Name Android

{% hint style="info" %}
Now, you have to change the package name in the source code. You have to use the same package name that you have registered in the firebase console.
{% endhint %}

* Go to your IDE and now you have to change the package name of your app. Run the following command from your IDE terminal by changing the package name with yours.

```
flutter pub run change_app_package_name:main com.new.package.name
```

{% hint style="info" %}
Don’t forget to replace **com.new\.package.name** with your package name.&#x20;
{% endhint %}

That’s it. Your android package name setup is complete.

<br>


# 3.3 Generate Debug Certificate

{% hint style="info" %}
You need to generate 2​ signing certificates​ for the google sign-in feature. Debug certificate is required for testing purposes. If you want to test google signing during development, then you should follow the steps. Otherwise, you can ignore it.
{% endhint %}

* To generate a debug certificate, run this command on your terminal from your app

  root directory.

{% tabs %}
{% tab title="Mac" %}

```
keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore
```

{% endtab %}

{% tab title="Windows" %}

```
keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
If this command doesn’t work, then go to this [link](https://developers.google.com/android/guides/client-auth) and copy the debug command from there according to your os.
{% endhint %}

* Use ​**android** as a debug password when the terminal asks for a password.

<figure><img src="https://lh6.googleusercontent.com/f8BzDO8crzYiwc2v7AfkKyJq1yFmoF6IwFblbkm89LrcKJWkRVuxxgxiTCrVyjxNQaffwhoaaXoPpNy5GBPIw869tiOZzlZ_lxfJezWD9D924HhKCEC8ET3-ahE8xRYJiQZsjUt2L1NC76p17zapQyRy-AP55MvHG-H5PRN_0zpn7RGGxlhVBnyN5-Zu" alt=""><figcaption></figcaption></figure>

* Copy the **SHA1** certificate code and go to **Firebase Console > Your Project > Project Settings** and click on the android icon and then add the **SHA1** code by clicking ​**add fingerprint​** button. Look at the picture below:

<figure><img src="https://lh3.googleusercontent.com/NiFFfBOiIGw_FxsQ_DDn57E3-Q9LvspXdAdpmred0Z1eXBM_1SFFDjIW-CUHEi7YnmQKoBf2JGi3LysoNoqZH9jh0iNIPOap0WZQULQvURTiOqx9gOyk-n2Nnm_H_pY6JnEj4uZVbl6GsLWtGquqEbB83w12csRd3u8hVdMliaV47CoyVAdCBZWG9rTZ" alt=""><figcaption></figcaption></figure>


# 3.4 Generate Release Certificate

To generate a release certificate, You have to generate a Keystore file. To generate a Keystore file, run this command below from the root of your project directory.

{% tabs %}
{% tab title="Mac" %}

```
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
```

{% endtab %}

{% tab title="WIndows" %}

```
keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key
```

{% endtab %}
{% endtabs %}

* Enter your details and remember the **password**. After this, you will get a **key.jks** Keystore file.
* Locate this file and move the file into the **android/app** folder and copy the **path** by right-clicking on the key.jks file.
* Then go to the **android/key.properties**​ file and replace the **path** of your Keystore file. Then also replace the ​**password​** which you have inputted to generate the Keystore file.

<figure><img src="https://lh5.googleusercontent.com/tYMAq1QSqHV4Zm_e407IT-QBg90hWj--VlbKT72QKhJBGYx-4NRnkL-9AhPoOnSYC1WN_Fgw4Xek96zBjMcZfBg7vOUSJn12TTw8DK_SqJl_aRGscZPLatWP7pTWOuZMLbr30doWuf259fK2YYZGkUqDmXNMAXyR8m7zyZhjb2c93EvoFR8-ba_F6oQs" alt=""><figcaption></figcaption></figure>

Now you can generate a release certificate, To do that,

* Run with replacing your **alias\_name** and **keystore\_location**.

```
keytool -list -v -keystore keystore_location -alias alias_name
```

{% hint style="info" %}
Your alias\_name is **key** and keystore\_location is the path(directory) of the **key.jks** file.
{% endhint %}

* After that, you will get a **SHA1** code. Copy that code and add it to your **Firebase Console > Project Settings >  Android**, where you previously added a debug SHA1 code.

<figure><img src="https://lh3.googleusercontent.com/NiFFfBOiIGw_FxsQ_DDn57E3-Q9LvspXdAdpmred0Z1eXBM_1SFFDjIW-CUHEi7YnmQKoBf2JGi3LysoNoqZH9jh0iNIPOap0WZQULQvURTiOqx9gOyk-n2Nnm_H_pY6JnEj4uZVbl6GsLWtGquqEbB83w12csRd3u8hVdMliaV47CoyVAdCBZWG9rTZ" alt=""><figcaption></figcaption></figure>


# 3.5 Google Sign In Setup for Android

* Go to firebase console>your project>authentication>Sign-in-method and enable both **email/password** and **google** and save it.

<figure><img src="https://lh6.googleusercontent.com/YE-9nKU7rjZ90LM-ECsU2p-XA4T0VaerdDPC70Yudm9eC6eeHTAHCgK0F4IstxNk3Ll88BWTDY6wKz3yfKknfZUs0R2QW8PlKCrMcp8MzvlFQRtSBYLKKKQBGFSjVd7OCqWM6i4llFza7bV6kK7_hANcZU-bTlJLHFdRsosEcA3TlZDLR2X_g7UgT2GQ" alt=""><figcaption></figcaption></figure>

* You have to configure some stuff for google sign-in. Go to the Google Cloud Console.

{% hint style="info" %}
Google Cloud Console: <https://console.developers.google.com/apis/credentials/consent>
{% endhint %}

* Make sure you are signed in with the same account with which you have created the Firebase project.
* Also, make sure that on the top-left corner, your project is selected for which you are filling this consent.

<figure><img src="https://lh5.googleusercontent.com/dmlFFfgz83RMvnv2dpgrkyEiDjifB6AD1aHEwfj_JbqvZa3LffkGbwDTxra8P4x6AhGM_rLsKFrvVA_pjw_RMNU--TLgudFcKB7ASZgx1o6wolVcTRXOdGJwUKO-d-a7z6nHg6p2FYCQllbNaI6ctTsrCmIRYw9r_254Xn9DnGWjPXPcm9IGsoVT3zK5" alt=""><figcaption></figcaption></figure>

* Go to the Credentials → OAuth consent screen tab and start filling out the form.&#x20;
* Enter **Application name**, **Application logo** & **Support email**.

<figure><img src="https://lh6.googleusercontent.com/0Jdf1o9zCKuq-WNC8EO2e_QbCRXMtREZK_vkigxCPCe-tPqhUxuotdUOzxQSf9I-xGq2XfD5vOkH0YjA1kQh_kfo5Tu3Uc7doW5p_Xo0_x7kU8_Jh16kKtO8leZe4oTCky3WRwKQufi487JR7C4UxMVzqsFoGqv3Prld0jIShajZ-GvceQE2QKQPBb0t" alt=""><figcaption></figcaption></figure>

* In all these places, you have to enter the same link starting with **http\://** then your app domain name which I have marked with green below.
* Then, scroll down and fill in the Application Homepage link, Application Privacy Policy link, and Application Terms of Services link.

<figure><img src="https://lh6.googleusercontent.com/mbZw1n8YHB6J5-Gmap4uqkGvlqX0e8vNQ-Pr85fJmL96miJZCE-hKEtJwhGtIzHV3cwmuZiXyM63AeP75jAnisLNGG6hpQ8bIvo7StbINPG-FT6RvkRdcx5dOrSPLS1upuI1bEkdq9I34Xr2zaB-Rfcc2gcYjIoekrIoXkV45JkYvtke-j47z5ftJ5AK" alt=""><figcaption></figcaption></figure>

* Click on Save. That's it. You have completed your google sign-in & email setup.


# 3.6 Additional Firebase Setup for Android

Now, you have to connect the firebase with your code project. Follow the steps below:

* Run the following command from your IDE terminal:

```
firebase login
```

{% hint style="info" %}
After this command, you will get a link prompt to log in with the email account that you have used on firebase. Login with that by allowing the required criteria.
{% endhint %}

* Run the following command from your IDE terminal:

```
dart pub global activate flutterfire_cli
```

{% hint style="info" %}
After this command, if you get an error like the picture below, then just copy that line and run that.

<img src="/files/b0lvampDE4LHvNRK2NhG" alt="" data-size="original">
{% endhint %}

* Run the following command from your IDE terminal:

```
flutterfire configure
```

* Select Your App and Press Enter.

<div align="left"><figure><img src="/files/Ui8FNQ07z6xz2zKj3s4x" alt=""><figcaption></figcaption></figure></div>

* Select Android and press Enter.

<figure><img src="/files/znJEyvxopbeRE9lnZXog" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Use arrow keys & space to select/unselect
{% endhint %}

After this command, A **google-services.json** file in the android/app folder and A **firebase\_options.dart** file in the lib folder will be added. If you found them, your firebase configuration is successful.


# 4. Push Notification Setup

OneSignal Push Notification Setup

We have used OneSignal for push notifications. To set up OneSignal Push Notification Service to the app, you need an **App ID** from OneSignal. Follow the steps below:

* Go to [onesignal.com](https://onesignal.com/) and create an account and create a project by clicking on the new app/website button.

<figure><img src="https://lh5.googleusercontent.com/g8HRIUnylR0uUU7PWtbxinuCAnWKLGfGbnquRiE35RCmOA3QQpWx07ySFa6FSdkAKeqizopz_hFCYbaeJP68rI4PVE1UW7KuPfiPQwOj7ft3l7nE8_567jNzY4PTx1HfjmO8j5N4B2QL1Em9UAmzTQ" alt=""><figcaption></figcaption></figure>

* Enter your **app name** and then select **Google Android**.
* And then you need a **Web API Key** and a **Sender ID**.

<figure><img src="https://lh4.googleusercontent.com/sgjz9AOpDzLofw1T_9JRVUPG6MGdHdrVMiTDiX-kQh1LQYDv9NXPrgWcQqSejsGLc8mSmmaESLVF98hbrN8SR3o7adLiUbxdxglD1XnjeRwj-F2dotQIEyGcodbOJ_vvYuxd1QkY1L6lcLn7ZMIaCA" alt=""><figcaption></figcaption></figure>

* You will get them from your firebase project. Go to your firebase project > project settings > cloud messaging and copy them and input both **Server Key** and **Sender ID** in the Onesignal and save them and complete the setup.

<figure><img src="https://lh3.googleusercontent.com/CP63hnF66RXWKQo-pMRYXNd9r7zJGAI3tyVlD4Z0NET6OAb1Ze8IJ_QiOszfyq3o8yGtbjW9M7iSPgSN7BRzrOrFY-A6_dI7PcsK50b3PToAqCoEIppmRQXIjsvT8aB9Jb0sc19tts2F8_KRnU1vKA" alt=""><figcaption></figcaption></figure>

* You will get an **App ID** from Onesignal. Copy that App ID and go to the **lib/configs/config.dart** file and replace the Onesignal App ID.&#x20;

That’s it. Your OneSignal Push Notification Setup is complete.


# 5. Ads Setup

{% hint style="success" %}
You can skip this setup for now and can configure it later. We have enabled AdMob ads by default with test ad unit ids. You can enable/disable ads from the admin panel.
{% endhint %}

We have added two types of AdMob ads.

> * **Interstitial Ads**: Interstitial ads will show when user donwloaded any image or setting any wallpaper successfully. (lib/pages/details.dart )

{% hint style="warning" %}
We have used Admob ads by default with test unit ids. To test the ads, you should test with the test unit ids. Before releasing the app for production, make sure you have changed the app ids and ad unit ids with yours. Admob is applied by default. So you don’t have to do anything before releasing.
{% endhint %}


# 5.1 Admob Setup for Android

{% hint style="warning" %}
Follow these steps only for production (release):
{% endhint %}

* From your AdMob account, create an app for android. You will get an **app id** for android.
* Create One Interstitial Ad unit.
* Now, go to the **android/app/src/main/AndroidManifest.xml** file and change the AdMob app id(Android) with yours.

<figure><img src="https://lh4.googleusercontent.com/cyIYSrQi2wyQF4RbDJbGUyVPKShtGCcek-rZwNCJ65pFa29_aq6wEnuneAlzMf__FISLqK4icehONb-K18L2bNZGDbdlpB8jEu2skt9bMvseuuJiq-ZGJO4boXljKk_oJQ-tuJCBlnrqk4wlqKKfw9tUYJuhnETdp-ShNigFuuqcDMN3w_TNMjlqFYHM" alt=""><figcaption></figcaption></figure>

* Go to the **lib/configs/config.dart** file and change the **admobAppId**, and **admobInterstitialAdId** with your values.

<figure><img src="https://lh5.googleusercontent.com/fwnvRHvuGRqXBqiFgkYRkUrIIf3hHKqs4COM72uiD01NiVxQe-JoL8Pzqzj5PVXx2d1IYHCGR_bBaXBPRKu5ioq7Mvb3tJenqKO3cWfh-Jfh0atP75M9EC11C3C7L10MqxRb3EC1224aPNF8gHT0WA" alt=""><figcaption></figcaption></figure>


# 6. App Information Setup

{% hint style="info" %}
Go to the **l​ib/configs/config.dart​** file and change the existing values with all of your details.
{% endhint %}

<figure><img src="https://lh5.googleusercontent.com/fwnvRHvuGRqXBqiFgkYRkUrIIf3hHKqs4COM72uiD01NiVxQe-JoL8Pzqzj5PVXx2d1IYHCGR_bBaXBPRKu5ioq7Mvb3tJenqKO3cWfh-Jfh0atP75M9EC11C3C7L10MqxRb3EC1224aPNF8gHT0WA" alt=""><figcaption></figcaption></figure>

> * Chnage the app name, hasTag
> * Package name, App version


# 7. Change App Name for Android

> Go to the **a​ndroid/app/src/main/AndroidManifest.xml​** file and Change your app name.

<figure><img src="https://lh6.googleusercontent.com/Z495Ld9DR0qIbjhqL6L3LA4tzKsPBtcsnAPlT1rkHnACoH3Q_CH2QnKf0vOploKZE50wJN3e2nq_61ArajngWzLMhqQWdwzVrWi7ZJrbwo4GtsrRnlpeP-mdJBRUqX9FDojMA8SGiZnFDcGqmaLN0oxO9sQ9zY4-P1NYARXc0RCUSncVQwNYB4HeSAyH" alt=""><figcaption></figcaption></figure>

<br>


# 8. Change App Icon

> * Go to the **assets/images** and delete the default icon (i**con.png**).
> * Now upload your app icon as png in the **assets/images** folder and rename it to **icon.png**
> * Now run the following command on the terminal:

```
flutter pub get
flutter pub run flutter_launcher_icons:main
```

This command will create an android & iOS icons for your app.

{% hint style="info" %}
That’s it. For more info, visit this [site](https://pub.dev/packages/flutter_launcher_icons#-readme-tab-).
{% endhint %}


# 9. Change Splash Icon

To change the splash icon, you have to upload your own splash icon. The icon should be in the .png format and make sure you have renamed it to **splash.png**. Go to the **lib/assets/images** folder and drop the icon here and replace it with our icon.

{% hint style="info" %}
Your splash image should be 400\*400 pixels and in png format
{% endhint %}

Now run the following command on the terminal:

```
flutter pub run flutter_native_splash:create
```

That’s it. For more info about changing splash icons, visit this [site](https://pub.dev/packages/flutter_native_splash#-readme-tab-).


# 10. Run The App

{% hint style="warning" %}
Before doing that, Please make sure that you have followed all of the previpus steps. Otherwise, it won't work.
{% endhint %}

{% hint style="info" %}
Before doing this, connect An Android Emulator from Android Studio or A Real Android device or An iOS Simulator from Xcode, or An real iOS device.
{% endhint %}

Before running the app, clean the project & get the packages by running the following commands one after one:

```
flutter clean
```

```
flutter pub get
```

And finally, run the following command to run the app:

```
flutter run
```


# 11. Admin Setup

To assign yourself as an admin of the app and to get access to your admin panel, follow the below steps:

* In the app, sign up using your email and password (not with social logins like google, FB, or apple).

{% hint style="info" %}
The email you will use to signup, it will be the admin email and password.
{% endhint %}

* After creating the account, now go to your **firebase console > your\_app > firestore database** and then you will see that a collection named **users** has been created.

<figure><img src="https://lh6.googleusercontent.com/RkDUwjZurt6Y3GBTpqLj7YfP7pDOarQVOChKzz1jttKAv_fjms8KbmLs309_PXTErRirrc9QqC3L5BWLs46Xvw6vZ-bv4boLrBsxi5BbZccsx048ik3DEKFqGwl_AahOE-wo3DQP-MKdCBrUjbBmE0HTJfKB4xhSVoiavoubr106JeKToI5WLUV5UDNO" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh6.googleusercontent.com/zRfVbwupxbXs5No3Itqa0e2U2rZU21fjGgLf-361W4SyrOgvKVHSUw6C9-b5UQjnGOQvrNb3zm0bdege0XD6-bVNwX8XLdSmFqqQSxbJFe6OSrTdM3OJo2_MfyGZc4NT1mllD-649k9uVh3gczV7QowQUOj-q6HF2KSI7fmfPaIb0ufEUWQr0BHUAJIj" alt=""><figcaption></figcaption></figure>

<br>

* Now click on your document and then create a field by **role** and then select **type** as an **array** and then in the first array enter the **admin** keyword and then click on the Add button.

{% hint style="info" %}
That’s it, Your admin setup has been completed. You can now login into your admin panel and add content. In this way, you can assign anyone as an admin of your app.
{% endhint %}

<br>


# 12. Releasing the Android App

at Google Play Store

{% hint style="info" %}
Make sure that you have done all the things that are required for the android release.
{% endhint %}

To test the released android app, run the following command on the terminal:

```
flutter build apk --split-per-abi
```

You will get 3 apk files from the **build/app/output/apk/release** folder. You can test the **app-armeabi-v7a-release.apk** file on your android device.

{% hint style="warning" %}
If you want to publish the app in the google play store, don’t upload any of the following apk files. Use an **appbundle** file which is recommended by Google
{% endhint %}

To generate an appbundle, run the following command on the terminal:

```
flutter build appbundle
```

After that, you will get a .aab file in the **build/app/output/appbundle/release** folder.

{% hint style="success" %}
Now you can upload this .aab file to the google play store.
{% endhint %}

<br>


# Migrate to v3.1.0

Migrate to v3.1.0 from the older versions

## 1. Delete A Collection from Firebase

From your firebase console, go to the Firestore Database and delete the **admin** collection.

## 2. Admin Migration

Download and use the new source code.

Follow: 1, 2, 3, 3.2, 3.4, 4, 5, 6

## 3. App Migration

Download and use the new source code.

Follow: 1, 2, 3.2, 3.4 (Don't generate any new keys, Use the old one and edit only the **android/key.properties** file), 4 (Replace only the OneSignal App Id), 5, 6, 7, 8, 9, 10, 11