Flutter CI/CD Workflow: A Simple Guide Using App Center

Introduction to CI/CD for Flutter Development 

In the fast-paced world of mobile app development, efficiency, reliability, and agility are key. Continuous integration and continuous delivery (CI/CD) has become an essential practice for Flutter developers to achieve these goals. CI/CD automates and streamlines the entire software delivery process, from the moment you commit code changes to making your app available to users on the App Store or Google Play (or for internal testing) on both Android and iOS devices. Let's explore the benefits of CI/CD for Flutter development and delve into how to leverage powerful tools like App Center to streamline your workflow.

What is CI/CD?

CI/CD stands for Continuous Integration and Continuous Delivery (or Deployment). It emphasizes frequent code integration, automated testing, and consistent software delivery to production environments. Here's a breakdown of the key components:

• Continuous Integration: Developers regularly merge their code changes into a shared repository, enabling early detection of issues.
• Continuous Delivery/Deployment: Automated processes build, test, and deploy code to various environments, ensuring a smooth flow towards production.

Benefits of CI/CD:

• Accelerated Delivery: Automation accelerates software updates, reducing time-to-market and enabling quicker responses to market demands.
• Early Detection of PR Issues: CI/CD swiftly spots PR issues like coding style violations and security flaws, minimizing the chance of them progressing to production. This proactive stance fortifies software quality and stability.
• More Stable Production Setup: Continuous deployment guarantees consistent and controlled codebase deployment to production environments. This practice mitigates the risk of configuration drift and ensures stability across development, testing, and production environments.
• Enhanced Collaboration: CI/CD promotes teamwork by encouraging frequent code integration and providing immediate feedback. This fosters transparency and shared ownership of the codebase among team members.
• Iterative Development: CI/CD facilitates frequent releases of small changes. This allows for faster feedback loops, user input incorporation, and adaptation to evolving requirements.

CI/CD for Flutter Applications:

In the following sections, we'll explore implementing CI/CD pipelines for Flutter applications using App Center. We'll delve into best practices, practical tips, and real-world examples to help you master CI/CD for your Flutter projects.

What is Flutter?

Launched in 2018 by Google, Flutter has become a popular open-source framework (SDK) for building native-quality applications for mobile, web, and desktop platforms. Its growing adoption can be attributed to several key features that address common challenges in cross-platform development.

Key Features of Flutter:

• Performance You Can Trust: Flutter apps are compiled directly to native machine code, ensuring exceptional performance, smooth animations, and a seamless user experience across different devices and platforms.
• Expressive UI at Your Fingertips: Flutter boasts a rich collection of customizable UI components, widgets, and layouts. This empowers you to design stunning and interactive user interfaces that adhere to each platform's design guidelines.
• Write Once, Deploy Everywhere: The beauty of Flutter lies in its ability to leverage a single codebase for deployment across various platforms (iOS, Android, Web, Desktop).  This translates to reduced development time and minimized maintenance overhead.Witness the efficiency of Flutter with popular apps like Alibaba's Xianyu (e-commerce), Google Ads (mobile advertising), and The New York Times (news) reaching users on both mobile and web. Even desktops are benefiting from Flutter, with apps like Hamilton (the musical's companion app) and Stadia (Google's game streaming platform)
• Native Feature Integration: Flutter integrates seamlessly with platform-specific features and APIs. Access device hardware, sensors, and native functionalities via platform channels. This approach provides an indirect access layer, but it ensures smooth integration without compromising performance or user experience.

Interested in a more in-depth comparison? Check out our blog post: exploring Flutter vs React Native in 2024!

What is App Center?

App Center, developed by Microsoft, is a comprehensive platform designed to streamline the entire mobile app development lifecycle. It offers a suite of tools and services that empower developers to build, test, distribute, and monitor their applications more efficiently. With its cloud-based infrastructure and user-friendly interface, App Center streamlines the app development process, enabling teams to deliver high-quality apps to users with confidence.

Key Features of Microsoft App Center:

• Continuous Integration (CI): Automate the build and testing of your mobile apps across various device configurations and platforms with App Center's CI service. Supporting popular frameworks and tools like Xamarin, React Native, and Flutter, App Center allows you to effortlessly set up CI pipelines to build, test, and validate your apps.
• Continuous Delivery (CD): Streamline app update deployment and distribution with App Center's CD service. Distribute app builds to targeted audiences, monitor deployment status, and gather user feedback seamlessly by configuring release pipelines.
• Automated Testing: App Center offers a range of testing services, including Real Device Testing (App Center Test Cloud), App distribution, crash reporting (Requires App Center SDK) and more to help you identify and address issues early in the development process. Run automated tests on real devices in the cloud, ensuring the quality and reliability of your apps across various platforms and device configurations.
• Analytics and Monitoring: Gain valuable insights into user behavior, app crashes, and performance bottlenecks with App Center's comprehensive analytics and monitoring capabilities. Make data-driven decisions and prioritize improvements effectively by tracking app usage, performance, and stability in real-time.

By leveraging the strengths of Flutter for efficient cross-platform development and App Center's suite of tools for streamlined app management, you can significantly enhance your mobile app development workflow. If you're looking to hire Flutter developer experts, this combination ensures that your app is built with speed, quality, and reliability at the forefront. Stay tuned for the following sections, where we'll delve deeper into implementing CI/CD pipelines for Flutter applications using App Center!

Lets Dive-in! Setting Up App Center for Your Flutter Project

Till now, we explored the advantages of Flutter for cross-platform development and the comprehensive app management features of App Center. Now, let's bridge these powerful tools by setting up the App Center for your Flutter project. This will automate the build, test, and deployment processes, boosting your development workflow and productivity.

Here's a step-by-step guide to set up App Center for your Flutter project:

1: Create a New App in App Center

• Head over to the App Center website and sign in using your Microsoft account.
• Once logged in, locate the "Add new app" button (usually on the top right corner of the dashboard) and click on it.
• Provide a name for your app, select the appropriate platform (likely "Android" or "iOS" depending on your target platform), and click on "Create" to finalize the app creation process. Note: We'll revisit App Center later to retrieve some key details for the next steps.

2: Configuring Your Flutter Android Project in App Center

Step 1:  Adding a New App in App Center

Begin by launching the App Center dashboard and creating a new app.  Here's what you'll need to provide:

• Platform Selection: Choose the platform(s) your app targets. In this case, select "Android" or for cross-platform development, you can choose both "Android" and "iOS".
• App Name: Assign a unique and descriptive name to your app for easy identification within the App Center.

Optional: App Owner: For improved organization within your team, you can assign an owner to the app. This can be helpful for managing access and responsibilities.

Step 2:  Adding the App Center Script for the Android App

appcenter-post-clone.sh is a shell script file which allows you to tailor the App Center setup process for your Flutter project. This contains a series of commands that will be executed on your system. The exact actions it takes will depend on the specific content you paste into the script. By following the instructions and pasting the provided content, you'll be enabling App Center to interact with your Flutter project effectively

1. Navigate to your Flutter project's Android directory (flutterApp/android/app).
2. Create a new file named appcenter-post-clone.sh.

Paste the following content into the script:

#!/usr/bin/env bash
#Place this script in project/android/app/
cd ..
# fail if any command fails
set -e
# debug log
set -x

cd ..
git clone -b stable https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH

flutter channel stable
flutter doctor -v

echo "Installed flutter to `pwd`/flutter"

# build APK
flutter clean
flutter pub get
flutter build -v apk --release

# if you need to build bundle (AAB) in addition to your APK, uncomment the following line below and last line of this script.
#flutter build appbundle

# copy the APK where AppCenter can find it
mkdir -p android/app/build/outputs/apk/; mv build/app/outputs/apk/release/app-release.apk $_

# copy the AAB where AppCenter can find it
#mkdir -p android/app/build/outputs/bundle/; mv build/app/outputs/bundle/release/app.aab $_

Step 3: Updating Android .gitignore File

1. Locate the .gitignore file within your Android app directory (android/.gitignore).
2. Update the file to exclude the following entries (if not already excluded):

gradlew
gradlew.bat

.gitignore file is now going to look like this: 

# gradle-wrapper.jar
/.gradle
/captures/
# /gradlew
# /gradlew.bat
/local.properties
GeneratedPluginRegistrant.java

# Remember to never publicly share your keystore.
# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
key.properties
**/*.keystore
**/*.jks

Step 4: Committing and Pushing Changes

Commit the newly created script appcenter-post-clone.sh and the updated .gitignore file to your source control system (e.g., GitHub, GitLab). And push your changes to the remote repository.

Step 5: Configuring Build in App Center

1. In your App Center dashboard and navigate to the app.
2. Click on the "Build" tab and connect your source control repository (e.g., GitHub).
3. Select the project, and choose the branch containing your Flutter code.
4. Click on the configuration icon to access the build settings.
5. If you encounter an error about missing Android projects, ensure you've completed Step 3 and your branch is up-to-date.
6. Under environment variables, add a new variable named JAVA_HOME and set its value to the path of your Java 11 x64 installation (e.g., JAVA_HOME: $(JAVA_HOME_11_X64)).
7. Look for the "Build scripts" section. If the appcenter-post-clone.sh script appears there, it signifies successful integration.
8. Choose your preferred build frequency: automatic builds on every push or manual triggers. Consider the free quota limitations (4 build hours per month) when selecting the frequency. Android and IOS builds usually consumes around 5 to 10 minutes each.

Step 6: Ensuring App Signing for Android

1. Within the build configuration settings, ensure you have a valid keystore JKS file uploaded. You'll also need the password, alias, and key password associated with the keystore.

If you haven't generated a keystore file yet, follow the Android Studio key generation steps

Step 7: Building and Distributing Your App

1. Once everything is configured, click "Save & build" to initiate the build process.
2. After a successful build, navigate to the build details and select the latest generated version.
3. Click on "Distribute" to share the app with testers. You can choose to distribute the app Over-the-Air (OTA) to collaborators or download the APK directly.  

Disclaimer: While App Center can be configured for automatic builds on every commit, we recommend a manual distribution approach to optimize build times. Frequent automatic builds for minor changes can consume unnecessary resources. By triggering builds and distributions only when needed, you can save valuable time and resources.

Here's a breakdown of the benefits of manual distribution in App Center:

• Reduced Build Time and Costs: Automatic builds for every commit can add up, especially for larger projects. Manual distribution allows you to control when builds are triggered, saving time.
• Focus on Meaningful Changes: By manually triggering builds, you ensure they occur after significant code changes, leading to more efficient testing and iteration cycles.
• Resource Optimization: Manual distribution helps avoid unnecessary builds and distribution cycles, minimizing resource consumption on App Center's servers.

(Optional): Running Tests and Handling Builds

How to Run UI Tests on New Builds:

App Center doesn't directly integrate with Flutter for UI tests by default. However, you can achieve this by:

1. Writing your UI tests using a framework like Flutter Driver: This framework allows you to automate user interactions and test your app's UI.
2. Integrating this with our custom script: This script can trigger your UI tests and upload the results to App Center as it also generates our build.

Build Failures and Notifications:

App Center will notify you (via email by default) if a build fails. You can also configure additional notification channels, such as Slack alerts. To set up Slack alerts, you'll need to integrate the App Center with your Slack workspace using webhooks or any third party workflow integration.

3: Setting up your Flutter IOS Project in App Center

In the previous section, we walked through integrating the App Center for building and distributing your Flutter Android app. Now, let's navigate the steps to configure the App Center for your Flutter iOS project.

Step 1: Adding a New iOS App in App Center

• Log in to your App Center dashboard.
• Click the "Add new" button and select "Add new app" from the dropdown menu.
• Provide a name and optional description for your app.
• Under "Platform," choose "iOS" and under "Development technology," select "Swift/Objective-C."
• Click on "Add new app" to finalize the creation of your iOS app in App Center.

Step 2: Connecting the Repository

1. Within your newly created iOS app in the App Center, locate the "Build" tab.
2. Click on the "Connect" button to link your source control repository (e.g., GitHub, GitLab).
3. Choose your preferred service, authenticate with your credentials, and select the project and branch containing your Flutter code.

Step 3: Adding App Center Script for iOS

Next, let's add another App Center script (appcenter-post-clone.sh) in the iOS directory (flutterApp/ios/appcenter-post-clone.sh) with the following content and push it to your source control.

#!/usr/bin/env bash
#Place this script inside project/ios/
# fail if any command fails
set -e
# debug log
set -x
cd ..
git clone -b stable https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH
flutter channel stable
flutter doctor
echo "Installed flutter to `pwd`/flutter"
cd ./ios
flutter precache --ios
flutter pub get

Step 4: Configuring Build Settings

1. In the App Center dashboard, navigate to the "Build" section for your iOS app.
2. You'll see your iOS project readily available under the "Build app" section. This indicates successful integration.
3. Configure any additional build settings as needed within the App Center.
4. Here, enable the “Sign builds” option.
5. This option requires two files -
   1. Provisioning Profiles (.mobileprovision) 
   2. Certificates (.p12)

The Apple Developer Portal provides a dedicated section for managing certificates, identifiers & profiles (commonly abbreviated as "Certificates, IDs & Profiles"). You can access this section to generate or download the necessary files for signing your iOS app in the App Center. (Check Step 5)

Step 5: Sign, Build and Distribute Your iOS App

Before building our iOS app, we need to make sure it's signed properly to run on a real device.  Apps on iPhones and iPads, can only run if they have a digital signature created using Apple's code signing tools. 

Requirements:

• Apple Developer Program membership (https://developer.apple.com/programs/)

Signing Process:

1. Generate a Certificate Signing Request (CSR): (Two Options)
   1. Option 1 (Requires Xcode):
      1. Open Xcode and navigate to Product > Create Signing Request.
      2. Fill out the information and save the generated CSR file.
   2. Option 2 (Without Xcode):
      1. Open Keychain Access on your Mac.
      2. Go to "Keychain Access" > "Certificate Assistant" > "Request a Certificate from a Certificate Authority."
      3. Fill in the necessary details.
      4. Save the CSR file to your computer.
2. Create a Certificate:
   1. Login to your Apple Developer account and go to Certificates, Identifiers & Profiles.
   2. Select Certificates > All > +.
   3. Choose the appropriate certificate type (e.g., iOS App Development, Push Notifications).
   4. Upload the CSR file (From Step 1).
   5. Follow prompts to complete certificate creation.
3. Download and Install Certificate:
   1. Download the issued certificate from the Developer Portal.
   2. Double-click the certificate to install it in your Keychain Access.
4. Create a Provisioning Profile
   1. In the Apple Developer Portal, navigate to Provisioning Profiles and create a new profile.
   2. Select the app ID and certificate you created earlier.
   3. Choose the devices or distribution method (App Store, Ad Hoc, etc.).
   4. Download the generated provisioning profile.
5. Upload Signing Credentials
   1. Upload the .p12 certificate file to your App Center dashboard in the "Signing" section as mentioned in the previous steps
6. Build and Distribute:
   1. Initiate the build process for your Flutter iOS app using your chosen service.

Step 6: Distributing Your App (It's a Wrap!) 🚀

After a successful build, you can proceed to distribute your iOS app through App Center's distribution features. 

With both Android and iOS setups complete, you've now successfully integrated App Center into your Flutter project. This integration empowers you with streamlined development, automated builds, and efficient app distribution for both major mobile platforms. Stay tuned for further exploration and tips to optimize your Flutter development experience!

Final Words: Building Amazing Apps Faster with Flutter and App Center

In this blog, we've explored the advantages of CI/CD for efficient software delivery and delved into two powerful tools: Flutter, the versatile native framework, and App Center, the comprehensive mobile app distribution platform by Microsoft. 

However, the Flutter ecosystem offers a wealth of CI/CD options to choose from. Codemagic and fastlane are other popular choices, tailored specifically for mobile development. Additionally,  Xcode Cloud integrates seamlessly for iOS development. Ultimately, the best CI/CD solution depends on your specific needs and preferences.  By combining Flutter with a robust CI/CD pipeline, you can streamline your development process, accelerate delivery, and build amazing apps faster.

We've covered the step-by-step process of integrating App Center for distributing your Flutter applications on both Android and iOS platforms. While App Center excels at automation, there are scenarios where a manual approach might be preferred.

Manual approaches often involve:

• Manual Build Generation: You'll need to initiate build commands directly through the Flutter CLI or your IDE.
• Signing and Validating iOS Builds: For iOS builds, you'll need to handle signing and validation processes manually, which can add complexity.

The Benefits of App Center:

Even when considering manual distribution options, App Center can still be valuable. Here's how:

• Shorten development cycles: Flutter's hot reload and App Center's automation features enable rapid development iteration and testing.
• Ensure high-quality apps: Automated testing throughout the CI/CD pipeline helps identify and address bugs early on, leading to more robust and reliable apps.
• Simplify app distribution: App Center streamlines app distribution to testers and various deployment environments.
• Gain valuable insights: App Center's analytics and monitoring capabilities provide valuable user behavior and app performance data to guide future improvements.

Choosing Your Approach:

The best approach depends on your project's needs and development stage. App Center provides a robust automated solution, but manual distribution can be suitable for smaller projects or initial testing phases.

With Flutter and App Center working in tandem, you're well-equipped to craft stunning, high-performing mobile applications faster and more efficiently. Stay tuned for further explorations and insights into maximizing your Flutter development experience!

That's it folks!!!

Looking to scale your app development?

Hire Flutter app developers from F22 Labs to craft high-performance, cross-platform applications. Our team leverages the latest tools and best practices to deliver apps that meet your business goals efficiently. Let's bring your app idea to life!