Info
Same documentation will be applicable for provider and serviceman app
Run an existing flutter project on IDE #
To begin, it’s essential to verify that your Flutter and Integrated Development Environment (IDE) setup has been configured accurately
- Execute the command flutter doctor in your terminal. If any issues arise during this process, make sure to address and resolve them promptly.
- Then open your project. Once the project is open, Android Studio may prompt you to install the dependencies. If not, you can run the flutter pub get from the terminal in the project directory to fetch the dependencies.
- After the dependencies are installed, you should be able to run the app.
Change App Logo and Icon #
To change App logo and App Icon you need to follow these steps :
App Logo :
- Go to <project>/assets/images/ and replace logo.png with your own logo.
- Go to <project>/assets/images/ and replace webAppbarLogo.png with your app bar logo for the web app.
- Go to <project>/assets/images/ and replace webAppbarLogoDark.png with your app bar logo for the web app for dark mode.
Note
Please use the exact file name as described; otherwise, it will not work.
App Icon :
You can generate your app icon using this site Visit
- Then go to /android/app/src/main/res and replace all mipmap
folders
with your <generated icon>/android - Again go to /ios/Runner and replace Assets.xcassets with your generated Assets.xcassets folder.
Change App Name #
You need to set your app name in three different places.
- Go to <project>/lib/util/app_constrants.dart and set the value of appName
static const String appName = ‘YOUR_APP_NAME’;
- Change the value of label from <project>/android/app/src/main/AndroidManifest.xml
android:label="YOUR_APP_NAME"
- Change the value of CFBundleName from <project>/iOS/Runner/info.plist/iOS/Runner/info.plist
<key>CFBundleName</key>
<string>YOUR_APP_NAME</string>
Change Base URL #
First you have to install your admin panel. For example: If your admin login url is https://your_domain.com/admin/auth/login then the base url will be https://your_domain.com
- Open <project>/lib/util/app_constrants.dart and replace baseUrl variable value with your own URL.
Ensure that don’t put slash(/) at the end of your base url like
static const String baseUrl = 'https://your_domain.com/';
Put your base url like that –
static const String baseUrl = 'https://your_domain.com';
Change App Package #
First, you have to find out the existing package name. You can find it out from the top of the /app/src/main/AndroidManifest.xml file. Now right-click on the project folder from Android Studio and click on replace in the path. You will get a popup window with two input boxes. In the first box, you have to put the existing package name that you saw in the AndroidManifest.xml file previously and write down your preferred package name in the second box and then click on the Replace All button.
Setup Firebase for Push Notification #
First, you have to change your package name. If you didn’t, then follow this. Then have to create a Firebase project from https://console.firebase.google.com
WARNING
Do not create multiple projects on your firebase console, if you have multiple apps like User App or Web, Provider App and Serviceman App. Create only one project and add multiple apps under the project.
Android Setup :
- Add an Android app under your firebase project with your own package name and app name.
- Click the register app button and download the google-services.json file from there.
- Copy that google-services.json file and go to your <project>/android/app/ folder then delete the existing google-services.json file and paste the google-services.json file that you downloaded.
- Create a totally white PNG logo for the notification icon. Paste it on <project>/android/app/src/main/res/drawable/ and replace notification_icon.png with your whiter version logo. Must keep the icon name notification_icon.png
IOS Setup :
- Again add an app under the same project and download GoogleService-Info.plist and paste it under <project>/iOS/ folder. Also, follow this documentation for full setup for IOS: https://firebase.flutter.dev/docs/messaging/apple-integration
Web Setup :
- Create your own firebase Web app from https://console.firebase.google.com with your own web domain/any name.
- Generate key pairs from under Project Setting->Web configuration.
- Go to <project>/web/index.html and set firebaseConfig with Firebase configuration object value.
var firebaseConfig = {
apiKey: "AIzaSyD_Y7SAZoGunqJyloxuCDcm_qfHy-ZXn_k",
authDomain: "on-demand-project.firebaseapp.com",
projectId: "on-demand-project",
storageBucket: "on-demand-project.appspot.com",
messagingSenderId: "361171276071",
appId: "1:361171276071:web:0e60b9a7ba7f9993b45902",
measurementId: "536310321034",
};
- Go to <project>/lib/main.dart and change FirebaseOptions argument value with Firebase configuration object value.
await Firebase.initializeApp(
options: const FirebaseOptions(
apiKey: "AIzaSyD_Y7SAZoGunqJyloxuCDcm_qfHy-ZXn_k",
appId: "1:361171276071:web:0e60b9a7ba7f9993b45902",
messagingSenderId: "361171276071",
projectId: "on-demand-project",
storageBucket: "on-demand-project.appspot.com",
)
);
- Go to <project>/web/firebase-messaging-sw.js and set firebase.initializeApp argument value with Firebase configuration object value
firebase.initializeApp({
apiKey: "AIzaSyD_Y7SAZoGunqJyloxuCDcm_qfHy-ZXn_k",
authDomain: "on-demand-project.firebaseapp.com",
projectId: "on-demand-project",
storageBucket: "on-demand-project.appspot.com",
messagingSenderId: "361171276071",
appId: "1:361171276071:web:0e60b9a7ba7f9993b45902",
databaseURL: "...",
});
Paste the Firebase server key in the admin panel Notification Settings section. You can get the server key from Firebase project settings->Cloud Messaging->Server Key.
After your setup, please restart your IDE and uninstall your previously installed app then run it. Also, don’t try to test it on an emulator or simulator. Emulators and simulators are unable to get push. Use a real device in this case.
Add Google Map API Key #
- You need to generate the google API key. Visit this link – https://developers.google.com/maps/documentation/embed/get-api-key
- You need to enable the mentioned APIs: Direction API, Distance Matrix API, Geocoding API, Maps SDK for Android, Maps SDK for iOS, Place API.
- You have to enable a billing account. Visit this url for activating: https://support.google.com/googleapi/answer/6158867?hl=en
- After generating the API key, you have to put it in 3 different places for Android, iOS and web.
For android, open <project>/android/app/src/main/AndroidManifest.xml and place the value of com.google.android.geo.API_KEY
/android/app/src/main/AndroidManifest.xml
<meta-data android:name="com.google.android.geo.API_KEY" android:value=“YOUR_MAP_API_KEY_HERE”/>
open <project>/iOS/Runner/AppDelegate.swift and place the value of GMSServices.provideAPIKey
/iOS/Runner/AppDelegate.swift
GMSServices.provideAPIKey(“YOUR_MAP_API_KEY_HERE")
For web: open <project>/web/index.html and place the value of https://maps.googleapis.com/maps/api/js?key
/web/index.html
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_MAP_API_KEY_HERE"></script>