Mandatory setup
info
Same documentation for all related projects like Delivery & Restaurant
Run an existing flutter project on IDEβ
Change App Logoβ
You can generate app icon from this website https://app icon.co.
- Go to
<project>/assets/image/
and replace logo.png with your own logo. - Go to
<project>/assets/image/
and replace logo_name.png with your company name image. - Then go to
/android/app/src/main/res
and replace all mipmap folder with your<generated icon>/android
folder. - Again go to
/ios/Runner
and replace Assets.xcassets with your generated Assets.xcassets folder.
tip
Recommended tutorial is below π
Change App Nameβ
You need to set your app name in three different place. Open
<project>/lib/util/app_constrants.dart
and set the value ofAPP_NAME
/lib/util/app_constrants.dartstatic const String APP_NAME = βMy Appβ;
Change the value of label from
<project>/android/app/src/main/AndroidManifest.xml
/android/app/src/main/AndroidManifest.xmlandroid:label="My App"
Change the value of CFBundleName from
<project>/iOS/Runner/info.plist
/iOS/Runner/info.plist<key>CFBundleName</key>
<string>My App</string>tip
Recommended tutorial is below π
Change Base URLβ
Must remember that donβt put slash(/) at the end of your base url. Use your admin url as base url. First you have to
install your admin panel. For example: If your admin url is https://your_domain.com/admin
then base url will be
https://your_domain.com
. Open /lib/util/app_constrants.dart
and replace BASE_URL
variable value with your own URL.
static const String BASE_URL = 'https://your_domain.com';
tip
Recommended tutorial is below π
Change App Packageβ
First you have to find out the existing package name. You can find it out from top
of /app/src/main/AndroidManifest.xml
file. Now right click on project folder from android studio and click on replace in path
. You will get a popup window
with two input box. In first box you have to put existing package name that you saw in AndroidManifest.xml
file
previously and write down your preferred package name in second box and then click on Replace All
button.
tip
Recommended tutorial is below π
Setup Firebase for Push Notificationβ
First you have to change your package name. If you didnβt then follow this.
Create your own firebase project from https://console.firebase.google.com and also add an android app there with your own package name and app name.
warning
Do not create multiple project if you have multiple app like User App, Delivery App. Create only one project and add multiple app under project.
Click register app and download
google-services.json
file from there.Copy that file and paste it under
<project>/android/app/ folder
.Create a totally white png logo for notification icon. Paste it on
<project>/android/app/src/main/res/drawable/
and replacenotification_icon.png
with your whiter version logo.For IOS again create an app under 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-integrationPaste firebase server key in admin panel Notification Settings section. You can get 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 emulator or simulator. Emulator and simulators are unable to get push. Use real device in this case.
tip
Recommended tutorial is below π
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 enabled mentione APIs: Direction API, Distance Matrix API, Geocoding API, Maps SDK for Android, Maps SDK for iOS, Place API.
- You have to enable billing account. Visit this url for activating: https://support.google.com/googleapi/answer/6158867?hl=en
- After generating API key, you have to put it on 3 different place 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
<meta-data android:name="com.google.android.geo.API_KEY" android:value=βYOUR_MAP_API_KEY_HEREβ/>
For iOS: open <project>/iOS/Runner/AppDelegate.swift
and place the value of GMSServices.provideAPIKey
GMSServices.provideAPIKey(βYOUR_MAP_API_KEY_HERE")
tip
Recommended tutorial is below π
Google Loginβ
Android Integration
To access Google Sign-In, youβll need to make sure to register your application. visit - π https://firebase.google.com/docs/android/setup
You donβt need to include the google-services.json file in your app unless you are using Google services that require it. You do need to enable the OAuth APIs that you want, using
IOS Integration
- First register your application - π https://firebase.google.com/docs/ios/setup
- Make sure the file you download in step 1 is named GoogleService-Info.plist.
- Move or copy GoogleService-Info.plist into the [my_project]/ios/Runner directory.
- Open Xcode, then right-click on Runner directory and select Add Files to "Runner".
- Select GoogleService-Info.plist from the file manager.
- A dialog will show up and ask you to select the targets, select the Runner target.
- Then add the CFBundleURLTypes attributes below into the [your_project]/ios/Runner/Info.plist file.
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<!-- TODO Replace this value: -->
<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
<string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
</array>
</dict>
</array>tip
Recommended tutorial is below π
Facebook Loginβ
Login on iOS and Android
Granted and declined permissions.
User information, picture profile and more.
Provide an access token to make request to the Graph API.
Full documentation π https://facebook.meedu.app
tip
Recommended tutorial is below π
Apple Loginβ
To configure Apple Login Sign-up follow the steps mentioned below -
Step 1: Find out Team IDβ
- Visit the Apple Developer page.
- Go to Account and find out Membership details section. There you will find TeamID.
Step 2: Create or Use App IDβ
info
If you already have an App ID that you want to use for Apple Sign-In, you can skip creating a new one and proceed to the next step.
- Go to the Identifiers list here.
- Click the Plus icon besides Identifiers, and then select App IDs and continue
- Select type App and continue.
- Provide a brief description and a Bundle ID (the same one used for your app). This identifier will serve as the Client ID for Apple Sign-In.
- In Capabilities, select the required options like Push Notifications, Sign In with Apple, and Associated Domains (if you want QR-Scan feature).
- Click Continue and proceed.
Step 3: Create Service IDβ
- Go again to the Identifiers list here.
- Click the Plus icon besides Identifiers, and then select Service IDs and continue
- Add a description and an identifier for your service, then click Continue
- Download the file labeled as AuthKey_example.p8. This is the Service File, and the segment "example" within the file name is indicative of the KeyID. To illustrate, if your file is titled AuthKey_XXXXXXXXXX.p8, then XXXXXXXXXX signifies the KeyID.
Step 4: Submit Data in Admin Panelβ
Go to the Admin panel.
Navigate to 3rd Party > Social Login > Apple Login setup your data.
Use the following information:
- Client ID: The Bundle ID you previously specified.
- Team ID: Obtained from the Apple Developer page.
- Key ID: KeyID from the AuthKey_example.p8 file name.
- Service File: Downloaded AuthKey_example.p8 file.
Save and enable Apple Login status.
By following these steps, you can successfully set up and implement Apple Sign-In in your Project.
tip
Recommended tutorial is below π