Flutter Demo by KBTG: Flutter Secure App Project Template

https://medium.com/flutter/announcing-flutter-2-2-at-google-i-o-2021-92f0fcbd7ef9

In this article, I used all my experiences to create a Flutter project that everyone can use as a starter. For this, I use Flutter 2.2.2 . The project consists of a demo in 3 parts:

1. Flutter CI/CD and Flavor Template you can fill out the needed information in Fastlane to deploy to TestFlight for iOS and Firebase distribution for Android
2. Flutter Method Channel Template you can use this part if you have to connect it to a native SDK or need any function from Native. Otherwise, you can comment the code out.
3. Flutter Basic Security Template it’s built-in security for both iOS/Android to secure the app. You don’t need to do anything.

Flutter CI/CD and Flavor Template

Xcode

I duplicate the schema into 3 types:

• Dev: development environment, aka our main flavor.
• UAT: user acceptance testing environment, which is nearly 100% of the production environment. We use it mostly for testing out our new code to see what will happen before going to production.
• Production: production environment, used only when we deploy to production.

Duplicate the configurations from Debug to Debug-dev, Debug-uat, and Debug-production. It has to be the same name as the Schema.

Here’s what the final result will look like.

Create the dev, uat, production folders into your Xcode project. No need to copy them to Xcode project.

Create a new script in Build Phases and create the new run script.

Copy this script to the new script.

# Type a script or drag a script file from your workspace to insert its path.
echo "Current Config ======= ${CONFIGURATION}"
if [ "${CONFIGURATION}" == "Debug" ] || [ "${CONFIGURATION}" == "Debug-dev" ] || [ "${CONFIGURATION}" == "Release" ] || [ "${CONFIGURATION}" == "Release-dev" ]; then
cp -r "${PROJECT_DIR}/dev/GoogleService-Info.plist"
echo "Development plist copied"
elif [ "${CONFIGURATION}" == "Debug-uat" ] || [ "${CONFIGURATION}" == "Release-uat" ]; then
cp -r "${PROJECT_DIR}/uat/GoogleService-Info.plist" "${PROJECT_DIR}/Runner/GoogleService-Info.plist"
echo "UAT plist copied"
elif [ "${CONFIGURATION}" == "Debug-production" ] || [ "${CONFIGURATION}" == "Release-production" ]; then
cp -r "${PROJECT_DIR}/production/GoogleService-Info.plist" "${PROJECT_DIR}/Runner/GoogleService-Info.plist"
echo "Production plist copied"
fi

The script will copy the files from dev, uat, production folders to Xcode Project when needed. I use GoogleService-Info.plist which is the Firebase plist file that I copy in a different folder for different environments. For example, you have to copy dev-firebase to dev folder and production-firebase to production folder. For other assets, you can do the same.

Go to FastLane folder in Xcode project to configure your Fastlane. I’ve already placed the mock information, and you need to change it to your own credential.

Android Studio

Adding productFlavors into build.gradle(app) like the image below. It will add flavor dev, uat, and production similar to Xcode. I put the needed parameters inside in case you need to use it.

I’ve added folder dev, uat, production inside App > Src for using specific assets in each environment. You don’t have to do anything. It will use the right asset by itself, and you need to put it in the right folder and make sure the name is correct. I’ve created the Fastlane template inside the Android folder as well. You can change the credential to yours.

Next Step, I add a different environment into Flutter by adding main_dev.dart, main_sit.dart, main_prod.dart. These 3 files will point to main.dart and inject parameters into main.dart

We will call the following.

flutter run --flavor dev -t lib/main_dev.dart 

Flutter Method Channel Template

I’ve added Flutter method channel to both iOS/Android with 3 different types of functions:

1. return result immediately
2. return result when passing into a function
3. return result from a callback using delegate in iOS and lambda in Android

Flutter Basic Security Template

I’ve added the needed security in both Xcode and Android Studio. You can comment out if you don’t need it.

Here’s my Flutter template.

theamorn/flutter-template

And here’s my demo.

To sum up, here’s a checklist that you need to complete:

1. Set up Fastlane in both iOS/Android
2. Check AppDelegate.swift/ MainActivity.kt to see if you want to comment out anything
3. Check deploy.sh, which is the bash script to auto-deploy once you finish setting up Fastlane

This project will keep updating whenever there’s a new version of Flutter, so I definitely recommend bookmarking this article and check back regularly.

Want to read more stories like this? Or catch up with the latest trends in the technology world? Be sure to check out our website for more at www.kbtg.tech