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 the Terminal window and navigate to the project’s root directory.
    Then, in the Terminal, enter the following 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)

Find app bundle id in: Android >> app >> build.gradle.kts

Find App name in: Android >> app >> scr >> main >> AndroidManifest.xml

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.

Update the path to JDK 17 on your device.:
Android is best supported on JDK 17. If you haven’t installed it yet, please install it and change the following path to the path to JDK 17 on your device.
Open: android >> gradle.properties file and modify it.

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

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

You can add your website URL and some URLs from your website’s menu to your Webintoapp project.

Open the file in Webintoapp >> lib >> string.dart

You will see the following URL definitions:

In Group 1: These URLs correspond to the 5 URLs in the project’s bottom menu bar. Replace them with the corresponding URLs you want to implement. Note that to be accepted on the App Store, you need to navigate the app to pages that perform the project’s core functionality and not place external website URLs in this position.

In Group 2: This is the latter part of the URLs. Its purpose is to synchronize the URLs in the website’s menu and the webintoapp’s bottom menu bar.

For example, if your website currently accesses the Blog page through the website’s menu, the project’s bottom menu bar will also change to the Blog menu. This makes things easier to see.

Bottom navigation bar

Here, you can change the order or content you want to display in this list of menu items, and the corresponding icons in the myIcons list. Note that the order of the menu items is the order of the elements in the list. The current floating button, HomePage, will have the last number in the list and is currently at position number 4 (the list starts from 0 to 4), while the icon list will contain 4 menu icons, not including the floating button.

Multi-Language And Login Event

Change The Paragraph And Title

Webintoapp has a built-in multilingual translation feature, currently only supporting English (en) and Vietnamese (vi). You can add other languages ​​as follows:
Open the file: lib >> settings >> language_settings.dart and add the new language here.

Next, update your multilingual translations. Open the file: lib >> l10n >> app_en.arb. This is the root file containing the keys to call, and the default language is English.

You can add other languages ​​here, for example app_zh.arb, and add the language translation code from the keyin app_en.arb, just like in the app_vi.arb file. The final, run Flutter pub get to apply it.

run flutter pub get 

Use below params to display your text: (change ‘home’ to your key in .arb file)

translation(context).home

Next is the most important part of the multilingual feature and login events on the website.

Because the webview application is essentially a separate part of the website and is only responsible for displaying the website, changing the language on the website will not change the language of the application.

Fortunately, our application has a way to overcome this. The mechanism works as follows:

Step 1: Send events from the website to the application. When a user changes their language or login status, the website will automatically send an event to our application. To do this, Create code snippets similar to the example below to send events back to the application. Although it’s just an example, it works well on Laravel, and you must ensure that the keys highlighted in blue are correct.:

In Laravel: example resources/view/layouts/app.blade.php

window.addEventListener(“flutterInAppWebViewPlatformReady”, function(event) {
     langCode = ‘{{ app()->getLocale() }}’;
     window.flutter_inappwebview.callHandler(‘loginHandler‘, true);
     window.flutter_inappwebview.callHandler(‘languageHandler‘, langCode);
});

In laravel: example login.blade.php

window.addEventListener(“flutterInAppWebViewPlatformReady”, function(event) {
     let isLogin =false;
     @auth(‘author’)
          isLogin = true;
     @else
          isLogin = false;
     @endauth
     window.flutter_inappwebview.callHandler(‘loginHandler‘, isLogin);
});
// in login functions
window.addEventListener(“flutterInAppWebViewPlatformReady”, function(event) {
     window.flutter_inappwebview.callHandler(‘loginHandler‘, true);
});
// in logout functions
window.addEventListener(“flutterInAppWebViewPlatformReady”, function(event) {
     window.flutter_inappwebview.callHandler(‘loginHandler‘, true);
});
In Laravel resources/js/localization.js
function sendLanguageToFlutter(lang) {
if (window.flutter_inappwebview) {
     window.flutter_inappwebview.callHandler(‘languageHandler‘, lang);
}
}
InWordpress themes/your-child/functions.php (testing)
add_action(‘wp_footer’, ‘add_flutter_webview_bridge’);

function add_flutter_webview_bridge() {
$is_logged_in = is_user_logged_in() ? ‘true’ : ‘false’;
$current_lang = ‘en’;
if (function_exists(‘pll_current_language’)) {
$current_lang = pll_current_language();
} elseif (defined(‘ICL_LANGUAGE_CODE’)) {
$current_lang = ICL_LANGUAGE_CODE; // WPML
} else {
$current_lang = substr(get_locale(), 0, 2);
}
?>
<scripttype=”text/javascript”>
(function() {
functionnotifyFlutter() {
if (window.flutter_inappwebview &&window.flutter_inappwebview.callHandler) {
window.flutter_inappwebview.callHandler(‘loginHandler’, <?php echo $is_logged_in; ?>);
window.flutter_inappwebview.callHandler(‘languageHandler’, ‘<?php echo esc_js($current_lang); ?>’);
}
}
if (window.flutter_inappwebview) {
notifyFlutter();
} else {
window.addEventListener(“flutterInAppWebViewPlatformReady”, notifyFlutter);
}
})();
</script>
<?php
}

Step 2: Capture the event in the application. We already have code to capture the event with the ‘languageHandler’ and ‘loginHandler’ keys. Now you just need to retrieve the captured condition using the following method to apply it to the entire application.

Language code:

String languageCode = Provider.of<DataWebsiteChanged>(context, listen: false).currentLanguage;

Login Status:

String isLogin = Provider.of<DataWebsiteChanged>(context, listen: false).isLoggedIn;

 

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