#
Thank you for purchasing code. It really means a lot and It’s our pleasure to serve top-notch service to you. Thank you so much for choosing DcodaxTeam . If you have trouble with the code and documentation please contact to our Support Team Here
How to setup Flutter #
- Download Latest Flutter SDK from below link. In that click on flutter_window_xxx.zip button.
- Get Flutter sdk
3. Extract the zip file and copy flutter folder into your desired installation location for the Flutter SDK (eg. C:\src\flutter; do not install Flutter in a directory like C:\Program Files\).
4. Inside Flutter folder find flutter_console.bat. Start it by double-clicking.
5. Now set your environment variable
6. From the Start search bar in , type ‘env’ and select Edit environment variables for your account
7. Under User variables check if there is an entry called Path:
8. Click on Edit. New Dialog open from it click on new and copy full path to flutter\bin as its value
9. Now Restart your pc for changes to take effect
10. Now check everything is ok or not
11. open cmd and do following shown in below picture
12. Now open Android Studio and click on ‘Open’ then select ‘Ultra Web’ folder that you have downloaded from codecanyon. (choose ultraWEb_firebase or ultraweb_onesignal ,according to your requirement)
13. Click on open
14. Select either UltraWeb_firebase or UltraWeb_oneSignal ..according to your requirement for push notification
15. Now if you have not set ‘flutter sdk’ path before. then go to File->Settings
16. If you have not installed plugin before then click on ‘plugins’ tab and install flutter,dart and kotlin plugins
17. From left pane, open ‘Languages and Frameworks’ and click on ‘flutter’, then on right panel set path of flutter folder that you have downloaded in first step
18. It will set Dart SDK automatically, but if does not. then from left panel click on ‘dart’ and set ‘dart-sdk’ path as shown in image
Upgrade flutter #
- for upgrade go to terminal in android studio and type ‘flutter upgrade’ it will automatically pick latest version with stable channel
- If you have updated flutter, after upgrade run flutter doctor. and in flutter doctor if you see error like ‘licence status unknown’ then run ‘flutter doctor –android-licenses’.
3. Go to sdk manager from upper right corner, then go to android sdk and then uncheck ‘hide obsolete package’ then check ‘android sdk command line tool latest’ then apply and then ok. it will download latest version as shown in below fig.
4. now run flutter doctor again your error will be removed
How to change package name #
- In the Android panel, click on the little gear icon.Uncheck/Deselect the Compact Empty Middle Packages option.
2. Your package directory will now be broken up in individual directories.
3. Individually select each directory you want to rename, and: Right-click it Select Refactor Click on Rename current In the Pop-up dialog.
4. Enter the new name and hit Refactor.Allow a minute to let Android Studio update all changes.
5. after changing ‘com.dcodax.ultra_web’ , your directory should look like this(new name is just for example purpose) Please give meaningful package name
6. Now press ctrl + shift + R and replace old package name with your new package name
7. For ios, open ios > Runner > info.plist, search for key CFBundleIdentifier, its value is coming from variable named ‘PRODUCT_BUNDLE_IDENTIFIER’ So press Ctrl_Shift+F and search for ‘PRODUCT_BUNDLE_IDENTIFIER’ and at every place change value of this variable
For example, in this project ios package name is ‘com.dcodax.webviewultra’ so change it to your package name.
How to run flutter project #
- Run Android app.
- Now to run project, if you see upper right part ‘enable dart support’ then click that and go to pubspec.yaml file and in upper right part click ‘pub get’ or ‘package get’ and then press run button.
3. If you are getting error then you can perform below hack
4. if in your system firewall is on, then you can temporary disable firewall and then try to run project.
5. if your flutter channel is not stable then you need to change it to stable. you can check your flutter channel by terminal.
6. go to android studio in bottom line click on terminal, in terminal write flutter channel.as shown below.
7. if your are not in stable then write “flutter channel stable”
8. go to Tools > Flutter > Flutter Clean.
9. go to file > invalidate cache/ restart.
10. If all set, then select device or run emulator, and click on ‘Play’ icon in upper right corner.
To run app in physical device, you have to enable ‘Developer Options’ and ‘USB Debugging’ in your phone.
please keep in mind that,
1) if you have run ‘ultraweb_firebase’ app then don’t forget to setup firebase and set ‘google-services.json’ file before running app. Steps are explained in step How to integrate firebase
2) and if you run ultraweb_onesignal app then first setup for onesignal as explained in How to integrate one signal
3) Run iOS app
Setup is same in android studio as in android app.
To Run app follow below steps:
Open Terminal, set the path to your project
1) flutter clean
2) flutter pub get
3) cd ios
4) pod install
5) if pods are installed successfully, then go to android studio and run ‘flutter run’
6) if you are getting errors in pod install then delete .symlinks folder, Pods folder and podfile.lock file from ios folder. Then follow all the above steps again.
How to change application name #
- Change application name for your android application. Go to android/app/src/main/AndroidManifest.xml and change value of ‘android label’
2. Change application name for your ios application. Go to ios/Runner/Info.plist and change value of ‘CFBundleName’
How to change application version #
- go to pubspec.yaml and change ‘version’. for example: If previous version is 1.0.0+1 then change it to 1.0.1+2 .
- Do not forget to execute ‘flutter pub get’,and ‘flutter run’ after this step.
How to change application logo #
- For Android, open android > app > src > main > res > add paste your logo in all mipmap folders according to device screen size
2. For IOS open ios > Runner > Assets.xcassets > AppIcon.appiconset here you need to put your logo according to different size.
Custom Changes #
How to set Your Website URL #
- To set the URL of your website( the website which shown in home page),paste your url in varable ‘webInitialUrl’ (USE PROPER URL FORMAT, i.e starts with ‘http://’ or ‘https://’)
How to Turn on/off Ads #
- If you want to display ads then keep the variable to true and if you don’t want to display ads the keep it false. [Note: Value must be boolean , i.e. either true or false]
How to change Bottom Navigation Bar #
- If you want to select the bottom navigation bar same as demo app then keep this variable true and if you want floating action button then keep it false. [Note: Value must be boolean , i.e. either true or false]
How to Add/Remove tabs in bottom navigation bar #
To add new tab #
- First add the lottie icons with light and dark brightness in assets/icons folder and add its variable in icons.dart file like below:
Modify the navigation Tabs list in Constants file to add or remove the tabs: you can add the below code with modified value in the list,:
{
'url': '',
'label':'',
'icon': ''
},
Note: Setting tab will be added in code, You cant modify it from this list.
How to show/hide header/footer #
- To show or hide header and footer of your website, change values of below variables. Set true if you want to hide it [Note: Value must be boolean , i.e. either true or false]
How to show/hide Splash & Onboarding Screen #
- If you want to display splash screen or onboarding screen in app starting time then change this variable. Set true if you want to show it [Note: Value must be boolean , i.e. either true or false]
How to set colors for Splash Screen #
- To set linear gradient colors in splash screen, change the colors for both splashBackColor1 and splashBackColor2. If you don’t want to set gradient color then set the same color for both variables
How to set colors for progress indicator #
- To change colors of linear progress indicator in webview, change colors of below 3 variables. To change color of Circular progress indicator, set the value of variable ‘indicatorColor1’
How to change Splash logo and Color #
- To change splash logo, create logo in ‘svg’ format and replace ‘splash_logo.svg’ in icons folder ultra web
- To change splash color, change the value of variable as shown in below figure
How to change floating action button color #
- Open lib->provider->theme_provider.dart file and change value of ‘background Color’ in floating Action Button Theme (both in light and dark theme if required)
How to change onboarding screen elements #
- To change onboarding images, create images in ‘svg’ format and replace ‘onboarding_a.svg’,’onboarding_b.svg’ & ‘onboarding_c.svg’ in icons folder
2. To change text of onboarding screens, change the value of below string variabale as shown in below figure
3. To change Colors of onboarding screens, change the value of below color variable as shown in below figure
How to change ad ids #
- Go to lib/helpers/Constants.dart and update ad ids here as shown in below image
2. For Android, Go to android/app/src/main/AndroidManifest.xml and update ad account id as shown in below image
3. For IOS, Go to ios/Runner/Info.plist and update ad account id as shown in below image
How to change application colors #
- Add your colors in lib/helpers/Colors.dart and do not change the color variables name
2. Change colors for dark and light theme and do not change the color variables name
How to change application font #
- Go to assets/fonts and add your font as shown in image
then open pubspec.yaml file and add your font details as shown in below image
2. Now as per shown in below image, change fontfamily name in theme_provider.dart file
How to change application String Constants #
- Go to lib->helpers->Strings.dart as shown in image and change values of variable you want to change according to your app
How to change About US, Privacy Policy, Terms & Condition pages of App #
You can load data either from URL or static strings from app
- If you want to display these pages from URL then change values as shown in below page
2. Or else you can display pages from plain text resource, for that change content in variables as shown in below image, and to display static content ,set value of variables of above image as null( eg. const String privacy PageURL = ”)
How to prevent user from taking screenshot of app #
For Android:
inside your mainActivity.kt, add the below lin
window.addFlags(LayoutParams.FLAG_SECURE)
after adding this line, your file will look like this:
For iOS:
- in your AppDelegate.swift you should create a window extension just like below:
extension UIWindow {
func makeSecure() {
let field = UITextField()
field.isSecureTextEntry = true
self.addSubview(field)
field.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
field.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
self.layer.superlayer?.addSublayer(field.layer)
field.layer.sublayers?.first?.addSublayer(self.layer)
}
}
2. then call the new window extension in your application function:
3. your AppDelegate.swift should look like this:
App Delegate
Create Necessary Accounts #
Set up admob in app #
- Add an android app.
- In the Admob console, click add android app from the Apps menu.
- Enter your app name and Enabling user metrics is not necessary to complete this codelab. However, we recommend that you do because it allows you to understand user behavior in more detail and click on ADD APP button.
- Create ad units.
- Select Banner unit ad and enter banner unit ad name then click on Create ad Unit button. Same procedure follow to create Interstitial ad)
- Then add another unit add shown in below image and Same as above create Interstitial ads and Open ads.
- Same as Add iOS app and same as add units in iOS app.
- Add your ad unit id same way explain in previous step : Like this
Add Necessary Permissions #
How to add necessary permissions #
Android -> List of permission (Note- just remove below required permissions from AndroidManifest file)
- For storage access
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/> - For camera access
<uses-permission android:name=”android.permission.CAMERA” />
<uses-feature android:name=”android.hardware.camera” /> - For Audio device access
<uses-permission android:name=”android.permission.RECORD_AUDIO” />
<uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” /> - For capture video access
<uses-permission android:name=”android.permission.VIDEO_CAPTURE” />
<uses-permission android:name=”android.permission.AUDIO_CAPTURE” /> - location related permissions permission
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />
— Include below permission only if your app benefits from precise location access.
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
— Required only when requesting background location access on Android 10 (API level 29) and higher.
<uses-permission android:name=”android.permission.ACCESS_BACKGROUND_LOCATION” /> - Open android->src->main->AndroidManifest.xml file. uncomment required permissions as shown in below figure:
IOS -> List of permission (Note- just remove below required permissions from info.plist file)
- For galley access
<key>NSPhotoLibraryAddUsageDescription </key>
<string>This will use to get or pick image from gallery to set your profile photo. </string> - For camera access
<key>NSCameraUsageDescription</key>
<string>This app requires access to the Camera to capture your profile photo. </string> - For Microphone access
<NSMicrophoneUsageDescription </key>
<string> This require listens for speech on the device microphone on your request for voice search <string> - location related permissions permission
<key>NSLocationAlwaysUsageDescription</key>
<string>Your location is required for xyz benefits for you</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Your location is required for xyz benefits for you</string>> - Open ios/Runner/Info.plist file. uncomment required permissions as shown in below figure:
How to solve common errors #
- If you are getting below error while generating release apk then please lower the gradle version in 2 files as mentioned below:
- Open android->build.gradle file and change gradle to 4.1.0 as in below code
classpath ‘com.android.tools.build:gradle:4.1.0’ - Open android->gradle->wrapper->gradle-wrapper.properties and change gradle to 6.7 as in below code
distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip - Now build it again and then generate release app
How to integrate firebase #
- Create firebase project in your account
2. Add android application to your firebase project
3. Download this google-services.json file and put inside android/app folder
4. You have connected android application to your firebase project successfully
5. Add ios application to your firebase project
6. Get your bundle id here [your-flutter-project-dir]\ios\Runner.xcodeproj\project.pbxproj or search for PRODUCT_BUNDLE_IDENTIFIER and you will get following result
7. Download this GoogleService-Info.plist file and put inside ios/Runner folder
8. Now Goto Firebase Console-> Project Settings -> Cloud Messaging -> Apple app configuration, now upload p8 Certificate here.
Please go through this link to learn how to generate p8 certificate link for Firebase Push Notification Certificate Generation
Now Paste Key ID and Team ID,the Key ID is the string behind AuthKey in the file name.As for the Team ID, you can get this on your Apple developer account membership page
You have connected ios application to your firebase project successfully
How to integrate OneSignal #
- Create onesignal project in your account Choose android platform
2. Go to your Firebase Console-> Project Settings -> Cloud Messaging and copy ‘Server Key’ and ‘Server ID’
3. Now paste those values one by one here
4. Choose Target SDK as Flutter
5. Now copy App ID as shown below
6. Paste this App ID here [your-flutter-project-dir]\lib\helpers\Constant.dart [‘don’t change variable names]
7. If you didn’t have copy app id before then you can get Onesignal App ID from this settings
8. You have connected android application to your Onesignal account successfully
How to set onesignal Notification icon #
- If you don’t want to get default bell icon in notification, then you have to generate icons for notifications
- You can refer this link on how to generate these icons:
- and paste each icon in folders according to their size, as shown in below image:
Create onesignal IOS account #
- Now follow below steps to create IOS app in onesignal
- Create new App in your account Choose iOS platform
3. Upload .p12 Certificate here. Please go through this link to learn how to generate .p12 certificate Click here
4. Now choose SDK as flutter
5. You have connected ios application to your Onesignal account successfully
Note: here for IOS Bundle ID is ‘com.dcodax.ultraweb’, So don’t forget to replace this ID throughout the project with your IOS Bundle ID
6. Here in Onesignal folder, replace your own Bundle id with old one
How to add dynamic link in firebase account #
Generate Release APK #
Generate Release bundle for Android #
- In your android studio, right click on you ‘android’ module of you flutter project. There is one option ‘flutter’, click on that. Then click on ‘Open android module in android studio’.then generate release apk from that new module.
2. and if in your android studio, the flutter option is disable then go to File option of your android studio. Click on ‘Open’ option, then locate your flutter project’s android module and open it. now generate release apk from that new module.
3. Wait for build process to finish. If build finish successfully then, in Build menu you will get option ‘generate signed bundle/apk’.
4. Choose ‘Android App Bundle’ here
5. If you are creating apk for first time then click on ‘Create New’ for Keystore path (and save this file for future use). for subsequent version updates always choose existing keystore file
6. Fill all required information and click next
7. from options, choose ‘release’
Steps to Publish iOS App to App Store #
- Open your Project’s Runner.xcworkspace file in Xcode, and Add your Team [Your Apple Developer ID] and also Insert GoogleService-Info.plist file [Downloaded From Firebase Project] inside folder named Runner.
2. and then Select Any iOS Device (armv7,arm64) as shown in image below.
3. After that Select Archive From Product Menu of Xcode as shown below.
4. Once Build / Archive Generated, pop up window will be shown. Validate app First, and After Successfull Validation of App, You Can Distribute App to AppStore.
5. After Successful Submission of Build File, it will be Reflected to your Apple Developer Account in which we have created app with same Bundle ID.
Click here for Detailed Help
Support #
Its our pleasure to serve our service and support. please contact our support team.
Head of Customer Support : Muhammad Usama
Phone No : +92 518441544
To help our customers, we constantly be in touch with every customer if they need any assistance regarding our product. We offer our customers a support from Mon – Fri 10.00am to 6.00pm UTC/GMT (+5.00 hours) – We are a Team located in Pakistan – Asia.
Typically we reply our customers for all the questions and queries within 24 hours of time via comments, support forum or emails.
Contact Us #
Dcodax has creative and dedicated group of developers who are mastered in Apps Developments and Web Application Development with a niche in delivering quality solutions to customers across the globe. Contact us today to find out how we can help you or for freelance work.
Visit Us : https://dcodax.com/
Mail Us : contact@dcodax.com
Thank you very much.
