Getting Started
Modify Web Into App package.
Open app in Android Studio
- To modify the required settings for your Web Into App application, you need to open it in Android Studio.
- Open Android Studio on your machine.
- 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.
- Demensions: 512 x 512 px
- 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
- Rename icon image to app-icon
- 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
- Open `string.dart` file in android studio.
- Search for the following value:
static const String azwAppIcon = ‘assets/images/app-icon.png’; - Update the `app-icon.png` in `azwAppIcon` with the name and format of your icon image.
- 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.
- Demensions: 520 x 172 px or the similar.
- Format: png or jpg.
- Rename icon image to splash-screen-logo.png
- 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
- Open `string.dart` file in android studio.
- Search for the following value:
splash: ‘assets/images/splash-screen-logo.png’, - 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.
- Open the file in webintoapp >> lib >> string.dart
- Search for the following value:
static const String azwHomeUrl = ‘https://download.elsyenjoy.com’; - 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
- Open the file in webintoapp >> lib >> string.dart
- Search for the following value:
static const String azwMenuHomeLabel = ‘Download’; - 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.
- Go to webintoapp >> lib >> string.dart
- Search for the following value:
static bool onDemoUrl = true; - Modify variable value into false to turn off Demo URL text file in settings Page.
Change your Terms and Conditions
- Open the file webintoapp >>assets >> terms_and_conditions.md
- 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
- Go to webintoapp >> lib >> string.dart
- 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; - 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