Getting Started

This guide will get you started with the setup of the application on your local machine. Now that you have set up your server, it’s time to set up the mobile application to consume the data from your website. This guide will help you to connect the application with your server. Caution: Please make sure that you follow the steps mentioned in this section very carefully. If you miss some steps it may lead to unwanted behavior or errors. Before you can start testing your application, you will need to install Flutter on your machine.

Modify Web Into App package.

Open app in Android Studio

  1. To modify the required settings for your Web Into App application, you need to open it in Android Studio.
  2. Open Android Studio on your machine.
  3. Then, click on Open to open an existing project.
  • Choose the webintoapp directory and open it. It is located at download package >> Mainfile >> webintoapp.
    Get Flutter packages
  • Open Terminal frome bottom menu bar and it will open the root folder op the application.
    Then, in the Terminal, enter the followeing command and press Enter

flutter pub get

This will get the dependencies for the application. (Make sure that you are conneted to the internet)

Rename the package

All the application published on the app Apps must have a unique Bundle ID and App Name. In this step, you will change the applications’s display name and bundle id.

Bundle id is a unique  name given to evry application which helps app Apps to disinguish between different applications.

For example: “com.aikezi.webviewconvert”

App Name is the name display on the mobile phone below app icon. It can any name like “Demo App Download”.

You need to change both of these before building and uploading your application to the app Apps by following the steps below. (recommended)

Replace all package name in files:
Choose Replace in file on top menu bar >> edit >> find >> replace in file or you can press Ctrl + Shift + R

Please check your project in Android >> app >> src >> main >> com >> aikezi >> webviewconvert. If the 3 folders name is com >> aikezi >> webviewconvet do not match your Bundle Id (as shown below). Let’s change them.
Right click to the folder >> choose Refactor >> Rename. Then, rename the folder name to match the bundle id.
In the replace in file window, enter the old Bundle Id at the top. Next, enter your new Bundle Id at the bottom the same as the Bundle Id you replaced in the previous step.
Note: If you set the bundle id of the iOS app to be different from the bundle id of the Android app. You have to do the bundle ID replacement manually.

Mobile Application Setup

Change app icon

In this section we will see how we can change the app’s launcher icon. To change the app launcher icon, you need to have an icon to replace it with.

  1. Demensions: 512 x 512 px
  2. Format: jpg or png

Caution: For iOS apps, icons are not allowed to have an alpha channel, that’s Apple’s general rule. Meaning you can’t use png images without background. You can follow the instructions below to fix this problem, but the icon on iOS won’t look good. We recommend using images with a background.

Change the default launcher icon

  1. Rename icon image to app-icon
  2. Replace / Place the icon created with the already present in the following path: webintoapp >> assets >> images >> app-icon.png

You will also need to update the value in `string.dart` file. It is located in webintoapp >> lib >> string.dart

  1. Open `string.dart` file in android studio.
  2. Search for the following value:
    static const String azwAppIcon = ‘assets/images/app-icon.png’;
  3. Update the `app-icon.png` in `azwAppIcon` with the name and format of your icon image.
  4. Now `Save` the file by pressing `command + s` on Mac and `control + s` on Windows.

In the terminal run the following commands from the root folder:

flutter pub get

flutter pub run flutter_launcher_icons:main

Press Enter to apply and done.

Change Splash screen icon

To change the splash screen icon, you need to have an icon to replace it with.

  1. Demensions: 520 x 172 px or the similar.
  2. Format: png or jpg.
  3. Rename icon image to splash-screen-logo.png
  4. Replace / Place the icon created with the already present in the following path: webintoapp >> assets >> images >> splash-screen-logo.png

You will also need to update the value in `splashScreen.dart` file. It is located in webintoapp >> lib >> screen >> splashScreen.dart

  1. Open `string.dart` file in android studio.
  2. Search for the following value:
    splash: ‘assets/images/splash-screen-logo.png’,
  3. Update the `splash-screen-logo.png` in image path with the name and format of your splash screen icon image.

Custom Change

Set the website url

In webintoapp package we support turning 3 websites into apps in 1 app. In the bottom menu bar, 3 websites in order from left to right are Home, Shopping and Websites respectively. If you want less, mail us at elsyenjoy@gmail.com. We’ll help you.

  1. Open the file in webintoapp >> lib >> string.dart
  2. Search for the following value:
    static const String azwHomeUrl = ‘https://download.elsyenjoy.com’;
  3. Then, you can to change your website url into app Home page
  • You can to change the Shop Page in:
    static const String azwShopUrl = ‘https://elsyflower.com’;
  • You can to change the Website Page in:
    static const String azwWebUrl = ‘https://aikezi.com’;

You can to use: domain, subdomain, page url and more….

Bottom navigation bar

If you want to delete the Shop page or the Website page. Please do the following:
Open `bottom_menu_bar.dart` file in android studio.It is located in webintoapp >> lib >> bottom_menu_bar.dart.

For example, you want to delete the Website page:
Delete or hide WebScreen(), in here:

Then, scrolling to bottom and delete here:

Save change and done.

Be careful, if you do it wrong, the project will fail. You can contact us to remove it for you.

If you don’t need to delete it, skip this step.

Change menu label in bottom navigation bar

  1. Open the file in webintoapp >> lib >> string.dart
  2. Search for the following value:
    static const String azwMenuHomeLabel = ‘Download’;
  3. Change ‘Download’ into your Home page label.

static const String azwMenuShopLabel = ‘Shopping’;
Change ‘Shopping’ into your Shop page label.

static const String azwMenuSettingsLabel = ‘Setting’;
Change ‘Setting’ into your Settings page label.

static const String azwMenuWebLabel = ‘Aikezi Solutions’;
Change ‘Aikezi Solutions’ into your Web page label.

Change custom icon for menu in bottom navigation bar

To change the custom icon, you need to have an icon to replace it with.

1x icon:

  • Name: home-icon.png – Demensions: 36 x 36 px – format: png
  • Name: shop-icon.png – Demensions: 36 x 36 px – format: png
  • Name: web-icon.png – Demensions: 36 x 36 px – format: png

2x icon:

  • Name: home-icon.png – Demensions: 48 x 48 px – format: png
  • Name: shop-icon.png – Demensions: 48 x 48 px – format: png
  • Name: web-icon.png – Demensions: 48 x 48 px – format: png

3x icon:

  • Name: home-icon.png – Demensions: 72 x 72 px – format: png
  • Name: shop-icon.png – Demensions: 72 x 72 px – format: png
  • Name: web-icon.png – Demensions: 72 x 72 px – format: png

Replace / Place the 1x icon in the following path: webintoapp >> assets >> images

Replace / Place the 2x icon in the following path: webintoapp >> assets >> images >> 2x

Replace / Place the 3x icon in the following path: webintoapp >> assets >> images >> 3x

To change the custom icon for menu in bottom navigation bar, Open `bottom_menu_bar.dart` file in android studio.It is located in webintoapp >> lib >> bottom_menu_bar.dart.

Do the same for the shop page icon and the web page icon.

Change app color

Set the following variable in the AikeziWebviewColor class to set your own colors for the application.

Open the file webintoapp >> lib >> style >> azwColor.dart

Edit the variables in the AikeziWebviewColor class to your values.

class AikeziWebviewColor {
      static const Color mainColor = Color(0xff266f17);
      static const Color subColor = Color(0xffe52478);
      static const Color textColor = Color(0xff5e6e6e);
      static const Color borderColor = Color(0xffc8d8d8);
      static const Color bottomBarColor = Color(0xff266f17);
      static const Color activeIconColor = Color(0xffffffff);

}

Change other String in project

Go to webintoapp >> lib >> string.dart and change values of variable you want to change according to your app.

Settings page

Turn off Demo URL text field in Settings Page.

  1. Go to webintoapp >> lib >> string.dart
  2. Search for the following value:
    static bool onDemoUrl = true;
  3. Modify variable value into false to turn off Demo URL text file in settings Page.

Change your Terms and Conditions

  1. Open the file webintoapp >>assets >> terms_and_conditions.md
  2. Modify the content in this file.

Change Admob ID

For Android app

Go to android/app/src/main/AndroidManifest.xml and update ad account id on line 118

For example:

<meta-data
           android:name="com.google.android.gms.ads.APPLICATION_ID"
           android:value="ca-app-pub-3940256099942544~3347511713"/>

Open the file webintoapp >> lib >> googleAds.dart

Modify Ad ids into your Ad ids.

For IOS app

Go to ios/Runner/Info.plist and update ad account id on line 38

For example:

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>

Turn ads on / off

  1. Go to webintoapp >> lib >> string.dart
  2. Search for the following value:
    //Set false to turn off Banner Ads of Admob.
    static bool onBannerAds = true;
    //Set false to turn off Interstitial Ads of Admob.
    static bool onInterstitialAds = true;
  3. Modify variable value into false to turn off ads in app.

Modify Permission And Run App

Modify Permission in Android App

Please remove unnecessary permissions from android\app\src\main\AndroidManifest.xml file (e.g remove location permissions if your website don’t use location permission)

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.VIDEO_CAPTURE" />
<uses-permission android:name="android.permission.AUDIO_CAPTURE" />
<uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
<!-- start: remove below permissions if location permission not require -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
<!--end-location permisssion-->

Modify Permission in IOS App

Please remove unnecessary permissions from ios/Runner/Info.plist file (e.g remove location permissions if your website don’t use location permission)

<key>NSAppleMusicUsageDescription</key>
<string>Music!</string>
<key>NSCameraUsageDescription</key>
<string>camera</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Always and when in use!</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Can I have location always?</string>
<key>NSLocationUsageDescription</key>
<string>Older devices need location.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>I need location permission when in use </string>
<key>NSMicrophoneUsageDescription</key>
<string>microphone</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app need access to your photos in order to load them into the app</string>

And in ios >> podfile

# Preprocessor definitions can be found in: https://github.com/Baseflow/flutter-permission-handler/blob/master/permission_handler_apple/ios/Classes/PermissionHandlerEnums.h
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',

       ## dart: PermissionGroup.calendar
       # ‘PERMISSION_EVENTS=1’,

       ## dart: PermissionGroup.reminders
       # ‘PERMISSION_REMINDERS=1’,

       ## dart: PermissionGroup.contacts
       # ‘PERMISSION_CONTACTS=1’,

       ## dart: PermissionGroup.camera
       # ‘PERMISSION_CAMERA=1’,

       ## dart: PermissionGroup.microphone
       # ‘PERMISSION_MICROPHONE=1’,

       ## dart: PermissionGroup.speech
       # ‘PERMISSION_SPEECH_RECOGNIZER=1’,

       ## dart: PermissionGroup.photos
       # ‘PERMISSION_PHOTOS=1’,

       ## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
       # ‘PERMISSION_LOCATION=1’,

       ## dart: PermissionGroup.notification
       # ‘PERMISSION_NOTIFICATIONS=1’,

       ## dart: PermissionGroup.mediaLibrary
       # ‘PERMISSION_MEDIA_LIBRARY=1’,

       ## dart: PermissionGroup.sensors
       # ‘PERMISSION_SENSORS=1’,

       ## dart: PermissionGroup.bluetooth
       # ‘PERMISSION_BLUETOOTH=1’,

       ## dart: PermissionGroup.appTrackingTransparency
       # ‘PERMISSION_APP_TRACKING_TRANSPARENCY=1’,

        ## dart: PermissionGroup.criticalAlerts
        # ‘PERMISSION_CRITICAL_ALERTS=1’
       ]

       end
       # End of the permission_handler configuration
    end
end

Run App

When building the project, to avoid unexpected errors, you need to check the compatibility of jdk, gradle,…
For older Gradle versions, please see the table below which Java version is supported by which Gradle release. you can check here:
https://docs.gradle.org/current/userguide/compatibility.html