Develop, Deploy and Test Flutter Apps

Reading Time : 8 min read
Build and test ReactNative Apps quick start

Introduction

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

What does Flutter do? Can you build iOS apps using Flutter?

For users, Flutter makes beautiful app UIs come to life. For developers, Flutter lowers the bar to entry for building mobile apps. It speeds up the development of mobile apps and reduces the cost and complexity of app production across iOS and Android. For designers, Flutter helps deliver the original design vision, without loss of fidelity or compromises. It also acts as a productive prototyping tool.

Install

System requirements

To install and run Flutter, your development environment must meet these minimum requirements:

    • Operating Systems: macOS (64-bit)
    • Disk Space: 700 MB (does not include disk space for IDE/tools).
    • Tools: Flutter depends on these command-line tools being available in your environment.
        • bash, <code class="highlighter-rouge">mkdir, <code class="highlighter-rouge">rm, <code class="highlighter-rouge">git, <code class="highlighter-rouge">curl, <code class="highlighter-rouge">unzip, <code class="highlighter-rouge">which

      <code class="highlighter-rouge"><br />

      <code class="highlighter-rouge"><br />

<code class="highlighter-rouge"><br />

<code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge">

Get the Flutter SDK

<code class="highlighter-rouge"><code class="highlighter-rouge">

Clone alpha branch from Flutter repository using Git and add bin folder to your PATH.

<code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge">

The above command sets your PATH variable temporarily, for the current terminal window. You are now ready to run Flutter commands!

<code class="highlighter-rouge"><code class="highlighter-rouge">

Note: To permanently add Flutter to your path, see the reference https://flutter.io/setup-macos/#update-your-path.

<code class="highlighter-rouge"><code class="highlighter-rouge">

Run flutter doctor

<code class="highlighter-rouge"><code class="highlighter-rouge">

Run the following command to see if there are any dependencies you need to install to complete the setup:

<code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge">

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately.

<code class="highlighter-rouge"><code class="highlighter-rouge">

For example:

<code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge">

Platform setup

<code class="highlighter-rouge"><code class="highlighter-rouge">

macOS supports developing Flutter apps for both iOS and Android. Complete at least one of the two platform setup steps now, to be able to build and run your first Flutter app.

<code class="highlighter-rouge"><code class="highlighter-rouge">

iOS setup

<code class="highlighter-rouge"><code class="highlighter-rouge">

Install Xcode

<code class="highlighter-rouge"><code class="highlighter-rouge">

To develop Flutter apps for iOS, you need a Mac with Xcode 9.0 or newer:

<code class="highlighter-rouge"><code class="highlighter-rouge">

    1. Install Xcode 9.0 or newer (via web download or the Mac App Store).
    2. Configure the Xcode command-line tools to use the newly-installed version of Xcode by running  sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer from the command line.This is the correct path for most cases, when you want to use the latest version of Xcode. If you need to use a different version, specify that path instead.

  • Make sure the Xcode license agreement is signed by either opening Xcode once and confirming or running <code class="highlighter-rouge">sudo xcodebuild -license from the command line.

<br />

<code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

With Xcode, you’ll be able to run Flutter apps on an iOS device or on the simulator.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

Deploy to iOS devices

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

To deploy your Flutter app to a physical iOS device, you’ll need some additional tools and an Apple account. You’ll also need to set up physical device deployment in Xcode.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

  1. Install homebrew.
  2. Open the terminal and run these commands to install the tools for deploying Flutter apps to iOS devices.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

If any of these commands fails with an error, run  brew doctor and follow the instructions for resolving the issue.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

    1. Follow the Xcode signing flow to provision your project:
        1. Open the default Xcode workspace in your project by running  open ios/Runner.xcworkspace in a terminal window from your Flutter project directory.

    2. In Xcode, select the  Runner project in the left navigation panel.
    3. In the  Runner target settings page, make sure your Development Team is selected under General > Signing > Team . When you select a team, Xcode creates and downloads a Development Certificate, registers your device with your account, and creates and downloads a provisioning profile (if needed).
        • To start your first iOS development project, you may need to sign into Xcode with your Apple ID.
          Xcode account add
          Development and testing is supported for any Apple ID. Enrolling in the Apple Developer Program is required to distribute your app to the App Store. View the differences between Apple membership types.
        • The first time you use an attached physical device for iOS development, you will need to trust both your Mac and the Development Certificate on that device. Select  Trust in the dialog prompt when first connecting the iOS device to your Mac.<br /><img src="https://flutter.io/images/setup/trust-computer.png" alt="Trust Mac" /><br />Then, go to the Settings app on the iOS device, select General > Device Management  and trust your Certificate.

    4. If automatic signing fails in Xcode, verify that the project’s General > Identity > Bundle Identifier value is unique.
      Check the app's Bundle ID
    5. Start your app by running  flutter run.

<code class="highlighter-rouge"><br />

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

How to Set Up and Test a Flutter App on an Android Device?

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

Install Android Studio

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

  1. Download and install Android Studio.
  2. Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This will install the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

Set up and deploy Flutter apps on your Android device

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

To prepare to run and test the Flutter app on an Android device, you’ll need an Android device running Android 4.1 (API level 16) or higher.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

    1. Enable Developer options and USB debugging on your device. Detailed instructions are available in the Android documentation.
    2. Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
    3. In the terminal, run the  flutter devices command to verify that Flutter recognizes your connected Android device.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

By default, Flutter uses the version of the Android SDK where your  adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the environment<code class="highlighter-rouge">ANDROID_HOME variable to that installation directory.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

Create Project

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

Here I created a sample flutter_app project using following terminal command:

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

Run the app

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

To list out all connected devices, please use the commandflutter devices to show all:

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

If you have only one device is connected, just use the command flutter run to install your app into the device.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

Otherwise, if have more than one device connected; please specify a device with the ‘-d <deviceId>’ flag, or use ‘-d all’ to act on all devices.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

Note: For iOS device, if you see the error as below, please double check the iOS Setup step to fix it.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

Generate a Native Binary

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

To generate an APK file, run:

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

The output looks like:

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

To generate an IPA file, run:

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

The output looks like:

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

Testing your apps on real devices

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

In this part, I will guide you how to use Kobiton Cloud to test your apps. A Kobiton account is required to access Kobiton system. If you do not have a Kobiton account yet, go ahead to create a free trial account and sign in. It takes just a few moments.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

  • Uploading Mobile Apps to Kobiton Store for Testing
  • Launch a manual test with your expected device
  • Modify your desiredCaps to automate your app with the expected device
    • You can set your test to reference the application at the Kobiton Storage URL with the app capability, as shown in this example for Java.

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">

<code class="highlighter-rouge">

<code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge"><code class="highlighter-rouge">


Accelerate Deploying and Testing Mobile Apps

Interested in Learning More?

Subscribe today to stay informed and get regular updates from Kobiton

Ready to accelerate delivery of
your mobile apps?

Request a Demo