Build the sample Flutter app

Overview

You can use the sample app provided with our Flutter SDK to customize and test your mobile app messages with minimal effort.

📘

Note:

The following instructions show building the sample app using VSCode. You will need to make a few changes in Xcode for iOS.

Before you begin

• Download the Acoustic Flutter plug-in.
• Install VSCode and the flutter extension. The Flutter extension package includes Dart by default.
• The Acoustic Flutter SDK supports Flutter SDK version >=2.12.0 <3.0.0. Verify the correct Flutter SDK is installed when setting up the VSCode environment.

Prepare the project

1. From VSCode, open the Acoustic Flutter SDK folder by opening the project from the root of the unzipped Flutter SDK.
2. You will see the following notification message: "Some packages are missing or out of date, would you like to get them now?".
3. Click Get packages.

If you do not see the Get Packages prompt:

1. Open the terminal in VSCode.
2. Type cd applications/sample to navigate from the root directory of this project to the sample app directory.
3. Then run the flutter pub get command.

You will also need to add the packages for each of the plug-ins.

1. To update all the plug-in files, navigate to pubspec.yaml file inside one of the plug-in folders from the root directory of the SDK folder.

cd plugins/**insert your plugin folder name here**

For example, from the root directory of the SDK folder, navigate to the flutter_acoustic_mobile_push plug-in folder, cd plugins/flutter_acoustic_mobile_push. You can find the pubspec.yaml file for this plug-in within this folder.
2. Open the pubspec.yaml file and save it. Saving the file will initiate the Get packages prompt.
3. Click Get packages to update packages across the entire project.
4. If some packages fail to update, you will need to navigate into the pubspec.yaml file of that specific plug-in folder and save the file to re-initiate the prompt for that file.

Set up your Android app

1. Go to the applications/sample/android/app/src/main/assets/MceConfig.json file and set the SDK properties. For more information, see Configuration (MceConfig.json).
2. Using the terminal in VSCode, from the SDK directory of the repo folder, change the directory to cd applications/sample.
3. Run the flutter clean command.
4. Delete the pubspec.lock file in the sample app directory.
5. Run the flutter pub get command. A new pubspec.lock file is generated.
6. Copy your google-services.json file and add it to the applications/sample/android/app/ directory.
7. Navigate to applications/sample/android/app/build.gradle.
8. Find the defaultConfig section in the build.gradle file and replace the applicationId value com.example.ca_mce_flutter_sdk with your package_name from the google-services.json file.
9. Make sure an emulator/device is connected to VSCode.
10. Build the project from applications/sample/lib/main.dart file. Right-click on the main.dart file and click Start Debugging.

Set up your iOS app

1. Go to the applications/sample/ios/Runner/MceConfig.json file and set the SDK properties. For more information, see Configuration (MceConfig.json).

📘

Note:

An AppKey is required to run the iOS version of this app on an initial installation.

📘

Note:

Configure the SDK using the Swift application delegates to avoid the black screen when starting the app. For example, your value for the appDelegateClass for the sample app would be "Runner.AppDelegate".

2. Within the Runner target in Xcode, verify that Profile for the Build Active Architectures Only section in the Xcode > Build Settings tab is set to No. If not, change the setting to No. Profile and Release should be set to No, and Debug should be set to Yes.

An additional setting may need to be updated when building on a device instead of an emulator. Navigate to the Runner target > Build Settings in Xcode, and in the Build Options section, set Allow Multi-Platform Builds to No.

In VScode, go to applications/sample/ios/Runner.xcodeproj/project.pbxproj and replace all instances of i386 with i386 arm64.

3. Update the Xcode bundle identifiers from the defaults provided in the Runner project to com.acoustic.sample or to the values you used when you created the provisioning for the sample app in your Apple developer account for the following targets:

   • Runner
     in the General tab, update the following:
     – Bundle Identifier: com.acoustic.sample
     in the Signing & Capabilities tab, update the following:
     – Bundle Identifier: com.acoustic.sample
     – App Groups: group.com.acoustic.sample
     – Keychain Sharing: com.acoustic.sample
   • Notification Service
     in the General tab, update the following:
     – Bundle Identifier: com.acoustic.sample.NotificationService
     in the Signing & Capabilities tab, update the following:
     – Bundle Identifier: com.acoustic.sample.NotificationService
     – App Groups: group.com.acoustic.sample
     – Keychain Sharing: com.acoustic.sample

4. Using the terminal in VSCode, from the root directory of the SDK folder, change the directory to cd applications/sample/ios.

5. Run pod install.

6. Make sure an emulator/device is connected to VSCode.

7. Build the project from applications/sample/lib/main.dart file. Right-click on the main.dart file and click Start Debugging.

If the emulator fails to build, you must clean and rebuild the project as follows:

a. Using the terminal in VSCode, from the root directory of the SDK folder, change the directory to cd applications/sample.

b)Run the following commands in the order provided, allowing time for each command to complete before proceeding to the next:

• flutter channel stable
• flutter upgrade
• flutter pub upgrade

c. Run the flutter pub get command to re-update the dependencies.

d. Change the directory to applications/sample/ios.

e. Run the pod install command.

f. Build the project again from applications/sample/lib/main.dart file. Right-click on the main.dart file and click Start Debugging.