Skip to content

5. Other Packages Setup

Jump to bottom
Faisal Ramdan edited this page May 28, 2021 · 1 revision

Permission handler setup for Android

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.sonub.dating">
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:protectionLevel="dangerous" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <application>
    <!-- ... -->
  </application>
  </manifest>

Image Picker Setup

To upload files(or photos), we will use image_picker package.

Image picker setup for Android

API 29+ No configuration required - the plugin should work out of the box.

API < 29 Add android:requestLegacyExternalStorage="true" as an attribute to the <application> tag in AndroidManifest.xml. The attribute is false by default on apps targeting Android Q.

Image Picker Setup for iOS

  • Open ios/Runner/Info.plist with VSCode
  • Add the three keys.
    • NSPhotoLibraryUsageDescription - describe why your app needs permission for the photo library. This is called Privacy - Photo Library Usage Description in the visual editor.
    • NSCameraUsageDescription - describe why your app needs access to the camera. This is called Privacy - Camera Usage Description in the visual editor.
    • NSMicrophoneUsageDescription - describe why your app needs access to the microphone, if you intend to record videos. This is called Privacy - Microphone Usage Description in the visual editor

Example)

<key>NSPhotoLibraryUsageDescription</key>
<string>$(EXECUTABLE_NAME) need access to Photo Library.</string>
<key>NSCameraUsageDescription</key>
<string>$(EXECUTABLE_NAME) need access to Camera.</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(EXECUTABLE_NAME) need access to Microphone.</string>

Location Setup

When app boots we save user's location into Firestore. The app can do so much things with user location.

We use location package to get user's location. See location for more information.

Location Setup For Android

  • Open AndroidManifest.xml under android/app/src/main and add the following:
<manifest>
    ...
  <!-- add user-permission for accessing location -->
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
</manifest>

Location Setup For iOs

  • Open Info.plist under ios/Runner and add the following:
  <key>NSLocationAlwaysUsageDescription</key>
  <string>This app needs the location service enabled to provide locational information.</string>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>This app needs the location service enabled to provide locational information.</string>
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>This app needs the location service enabled to provide locational information.</string>

I18N Setup

If an app serves only for one nation with one language, the app may not need localization. But if the app serves for many nations with many languages, then the app should have internationalization. The app should display Chinese language for Chinese people, Korean langauge for Korean people, Japanese for Japanese people and so on.

You can set texts on menu, buttons, screens in different languages.

Android platform does not need to have any settings.

For iOS,

  • Open Info.plist
  • Add the following. You can add more languages.
<key>CFBundleLocalizations</key>
<array>
	<string>en</string>
	<string>ch</string>
	<string>ja</string>
	<string>ko</string>
</array>
  • Create translations.dart file in the same folder of main.dart
    • and add the following code.
    • In the code below, we add only English and Korean. You may add more languages and translations.

Example of translations.dart

import 'package:get/get.dart';

/// Default translated texts.
///
/// This will be available immediately after app boots before downloading from
/// Firestore.
Map<String, Map<String, String>> translations = {
  "en": {
    "app-name": "App Name",
    "home": "Home",
  },
  "ko": {
    "app-name": "앱 이름",
    "home": "홈",
  }
};

/// Update translation document data from Firestore into `GetX locale format`.
updateTranslations(Map<dynamic, dynamic> data) {
  data.forEach((ln, texts) {
    for (var name in texts.keys) {
      translations[ln][name] = texts[name];
    }
  });
}

/// GetX locale text translations.
class AppTranslations extends Translations {
  @override
  Map<String, Map<String, String>> get keys => translations;
}
  • Initialize getxfire like below. It will set the default language when the user didn't choose his language yet.
await ff.init(
  settings: {
    'app': {
      'default-language': 'ko',
    }
  },
  translations: translations,
);
  • Add Locale(ff.userLanguage) and AppTranslations() to GetMaterialApp() like below. ff.userLanguage has the user language.
    • If user set his own language, then it will follow the user language.
    • If the language is set on Firestore settings, it will follow the Firestore setting.
    • Or it follow the language that was set on device setting.
GetMaterialApp(
  locale: Locale(ff.userLanguage),
  translations: AppTranslations(),
)
  • Open home.screen.dart
    • Update app bar title with the following and you will see translated text in Korean.
Scaffold(
  appBar: AppBar(
    title: Text('app-name'.tr),
  ),
  • When user change his language, the app should change the text in user's language.

Display selection box like below

DropdownButton<String>(
  value: ff.userLanguage,
  items: [
    DropdownMenuItem(value: 'ko', child: Text('Korean')),
    DropdownMenuItem(value: 'en', child: Text('English')),
  ],
  onChanged: (String value) {
    ff.updateProfile({'language': value});
  },
),

Then update the language like below.

class _MainAppState extends State<MainApp> {
  @override
  void initState() {
    super.initState();
    ff.translationsChange.listen((x) => setState(() => updateTranslations(x)));
    ff.userChange.listen((x) {
      setState(() {
        Get.updateLocale(Locale(ff.userLanguage));
      });
    });
    // ...
  • To update translations in real time,
    • You can code like below in initState() of MainApp. It listens for the changes in Firestore translations collection and update the screen with the translations.
ff.translationsChange.listen((x) => setState(() => updateTranslations(x)));

  • Admin can update the translations on Admin site.

  • Or admin can overwrite the translated texts simply by updating it under /translations collection in Firestore.

    • Go to Firestore
    • Create translations collection if it is not existing.
    • Create en document if not existing.
    • Add(or update) app-name property in en document.
    • And you will see the app-name has changed on the app.

Push Notification Setup

  • Settings of push notification on Android and iOS platform are done in the sample app.

  • Refer to Firestore Messaging

    • If you are not going to use the sample app, you need to setup by yourself.

Additional Android Setup

  • If you dont have google-services.json yet, you may refer for the basic configuration of Android Setup.
  • If you want to be notified in your app (via onResume and onLaunch) when you click the notification on the system tray you need to include the following intent-filter under the <activity> tag of your android/app/src/main/AndroidManifest.xml.
<activity>
  <!-- default configuration here -->
  <intent-filter>
      <action android:name="FLUTTER_NOTIFICATION_CLICK" />
      <category android:name="android.intent.category.DEFAULT" />
  </intent-filter>
</activity>
  • For testing on real device you need to add the SHA certificate fingerprints on your firebase console project.
    • To get the SHA-1 you can refer to Debug hash key.
    • Open Firebase Console
    • Project Settings => General => Your Apps, Select Android apps then under SHA certificate fingerprints you can add the SHA-1 that you have copy from your pc.

Additional iOS Setup

  • To Generate the certificate required by Apple for receiving push notifcation. You can follow this guideline Generate Certificates Skip the section titled "Create the Provisioning Profile".

  • If you dont have GoogleService-Info.plist yet, you may refer for the basic configuration of iOS Setup.

  • Open Xcode, select Runner in the Project Navigator. In the Capabilities Tab turn on Push Notifications and Background Modes, and enable Background fetch and Remote notifications under Background Modes.

  • Follow the steps in the Upload your APNs certificate section of the Firebase docs.

  • Add/Update Capabilities.

    • In Xcode, select Runner in the Project Navigator. In the Capabilities Tab turn on Push Notifications and Background Modes, and enable Background fetch and Remote notifications under Background Modes.

  • If you need to disable the method swizzling done by the FCM iOS SDK (e.g. so that you can use this plugin with other notification plugins) Add the following into Info.plist

  <key>FirebaseAppDelegateProxyEnabled</key>
  <false/>

Algolia Setup

Firestore does not support full text search, which means users cannot search the title or content of posts and comments. But this is a must functionality for those apps that provide a lot of information to usres.

One option(recomended by Firebase team) to solve this matter is to use Algolia. Algolia has free account that gives 10,000 search every months. This is good enough for small sized projects.

Before setup Algolia, you may try forum code as described in Forum Coding to test if this settings work.

  • Go to Algolia site and Register.
  • Create app in Algolia.
  • Then, you set ALGOLIA_APP_ID(Application ID), ALGOLIA_ADMIN_API_KEY, ALGOLIA_SEARCH_ONLY_API_KEY, ALGOLIA_INDEX_NAME. There are three ways to set the settings.
    • Add it on admin site if you have installed.
    • Add it on Firestore settings/app document. You need to input manullay.
    • Add it on GetxFire.init().
  • When the settings are properly set, Search functionality would work fine.

Social Media & Donation

Clone this wiki locally