How to test Flutter Apps on Android Devices?

Flutter’s cross-platform capabilities streamline app development, but thorough testing on Android devices remains essential due to the platform’s wide range of screen sizes, OS versions, and hardware configurations.

This article covers Flutter and its role in app development, along with steps to configure Flutter on Windows. It also explains how to test apps on Android using BrowserStack Real Device Cloud.

Understanding Flutter Apps

Flutter is an open-source UI framework developed by Google for building natively compiled applications from a single codebase. It allows developers to create high-performance apps for Android, iOS, web, and desktop using the Dart programming language.

Flutter apps are known for their fast rendering, expressive UI, and strong community support. The framework includes a rich set of pre-built widgets and integrates seamlessly with platform-specific APIs, making it a preferred choice for cross-platform development.

Its “write once, run anywhere” approach significantly reduces development time and ensures consistency across devices and platforms.

To maintain this consistency across the fragmented Android ecosystem, testing Flutter apps on a wide range of real devices is essential. Platforms like BrowserStack offer on-demand access to real Android devices, allowing teams to validate app behavior and performance under real user conditions.

Flutter and its Importance in App Development

Overall, Flutter empowers developers to create high-quality, visually appealing, and performant applications that run on multiple platforms. Its efficiency, flexibility, and rich ecosystem make it an essential tool for modern app development, offering the following benefits:

1. Cross-platform Development: Flutter enables developers to create seamless applications on multiple platforms and eliminates the need for separate development teams and codebases.
2. Native Performance: The Flutter framework eliminates the need for bridges or intermediaries and directly interacts with the device’s GPU, resulting in smooth animations, fast rendering, and excellent performance.
3. Community and Ecosystem: Flutter has gained significant popularity and has a thriving community of developers. The community actively contributes to the ecosystem by creating open-source packages, libraries, and tools, making it easier for developers to extend Flutter’s capabilities and solve common development challenges.
4. Development and Maintenance: With Flutter, developers can write code once and deploy it across multiple platforms, reducing development and maintenance efforts.
5. Cost-Effectiveness: Flutter’s ability to develop cross-platform apps with a single codebase translates into business cost savings. The reduced development time, shared resources, and streamlined maintenance result in lower development and operational costs than building separate native apps for each platform.

How to configure Flutter on Windows

Follow the steps below to configure Flutter on Windows:

1. First step is to download the Flutter SDK for Windows: Flutter_windows_2.10.3-stable.zip

2. Extract the zip file and place the contained flutter in the desired location for the Flutter SDK (Eg. C:\Users\<Your-User-Name>\Documents)

• Flutter should not be installed in a directory that requires elevated privileges (Eg. C:\Program Files\)

3. Add Flutter to the PATH in the Environment variable

• From the Start search bar, enter ‘env’ and select Edit environment variables for your account
• Under User Variables, for the entry PATH, add a full path to the location where flutter\bin is in your system (Eg. C:\src\flutter\bin)

4. Open Windows Powershell or Command Prompt Window and from the directory that has the Flutter (see above), run the below command to see if there are platform dependencies that should be completed:

C:\src\flutter> flutter doctor

5. This command checks your environment and reports the status of your Flutter installation. You can see if any software needs to be installed or further tasks to be performed.

6. Once all the dependencies/software are installed, configure Android Studio to execute your test case.

Integrating Flutter Apps with BrowserStack Real Device Cloud

BrowserStack is a cloud-based web and mobile testing platform allowing users to test their website and mobile applications across several browsers, Operating systems, and real mobile devices.

Follow the below steps to test Flutter App on Real Android Device using BrowserStack App Automate:

Step 1: Configure Appium

• Login to BrowserStack and launch App Automate.
• Choose the System/Language/Operating System of your choice from the available list i.e., Python Language is chosen for this particular example. Once selected, you will be redirected to the Introduction page in Browserstack.
• Follow the steps and set up the environment for the sample Python repository.
• Make sure that Appium is installed in your system.
  • If not installed, you can install it via the command: pip install Appium-Python-Client

Step 2: Upload App and Run Flutter Test on Android Device

• Upload an Android Native App(.apk or .aab file) to BrowserStack servers.
  • If you do not have an Android App, you can use the sample Android App to run the test on BrowserStack App Automate. This example uses the sample Android App for testing

Note: app_url generated must be noted down since it is used as an identification for your uploaded app

• Locate the sample Android app’s python file (browserstack_sample.py) in your local system and configure your test script with the following:
  1. Desired Capabilities – Consists of Access credentials
  2. URL of the app under test
  3. Device and OS Version to run the test on (In this case, Oppo Reno 6)
  4. Other BrowserStack capabilities – Project, Build, Name
  5. Remote Webdriver to start a test session on BrowserStack
  6. Test case for sample Android App

• Enter the following code to test the Flutter App on Android Device Oppo Reno 6

import os

from appium import webdriver

from appium_flutter_finder.flutter_finder import FlutterElement, FlutterFinder

import time 

desired_cap = {

    # Set your access credentials

    "browserstack.user" : "Username",

    "browserstack.key" : "Password",

    # Set URL of the application under test (step 8)

    "app" : "bs://c700ce60cf13ae8ed97705a55b8e022f13c5827c",

    # Specify device and os_version for testing

    "device" : "Oppo Reno 6",

    "os_version" : "11.0",

    # Set other BrowserStack capabilities

    "automationName": 'flutter',

    "project" : "First Python project",

    "build" : "browserstack-build-1",

    "name" : "first_test"

}

# Initialize the remote Webdriver using BrowserStack remote URL

# and desired capabilities defined above

driver = webdriver.Remote(

    command_executor="http://hub-cloud.browserstack.com/wd/hub",

    desired_capabilities=desired_cap

) 

# Test case for the BrowserStack sample Android app.

# If you have uploaded your app, update the test case here.

finder = FlutterFinder()

email_finder = finder.by_value_key('email')

email_element = FlutterElement(driver, email_finder)

email_element.send_keys('abcc@gmail.com')

password_finder = finder.by_value_key('password')

password_element = FlutterElement(driver, password_finder)

password_element.send_keys('abcd1234')

login_btn_finder = finder.by_value_key('login_btn')

login_btn_element = FlutterElement(driver, login_btn_finder)

login_btn_element.click()

increment_finder = finder.by_value_key('increment')

counter_finder = finder.by_value_key('counter')

increment_element = FlutterElement(driver, increment_finder)

counter_element = FlutterElement(driver, counter_finder)

increment_element.click()

assert(counter_element.text == '1')

# Invoke driver.quit() after the test is done to indicate that the test is completed.

driver.quit()

• Open the Command Prompt, navigate to the android folder of the cloned sample Python repository in your local machine and run the command:

python browserstack_sample.py

Step 3: Leverage BrowserStack Debugging Tools

Once your test has run, BrowserStack provides robust debugging tools to help analyze your Flutter app’s behavior during the test. These tools are available in the BrowserStack App Automate dashboard:

1. Test Overview: See a summary of your test builds and sessions, including pass/fail status and test duration.

2. Detailed Test Sessions: Click on your test session to view detailed information such as:

• Video Playback of the entire test run, so you can visually verify app behavior.
• Screenshots captured during the test to help identify UI issues.
• Appium Logs to understand the test script execution and debug failures.

3. Filtering and Sorting: Quickly filter tests by status, device, OS version, or build for easier management.

4. Flaky Test Identification: The dashboard helps you spot tests that frequently fail to prioritize fixes.

5. Sharing: Easily share test results and session links with your team for collaboration.

Test Results

After running your test script, you can view detailed test results in your BrowserStack App Automate Dashboard. Each test session provides insights into how your Flutter app performed on a real Android device.

Talk to an Expert

Conclusion

On a closing note, to take full advantage of features, tests must be run on real mobile devices (iOS, Android, Windows, etc.) instead of Emulators and Simulators. There is no way to accurately identify all possible bugs without testing apps in real user conditions, and that is where BrowserStack App Automate comes in. BrowserStack’s real device cloud offers thousands of real mobile devices from major vendors and manufacturers for app testing (manual and automated). Each device is loaded with real operating systems – multiple versions of popular operating systems.

QAs can access thousands of popular mobile device-OS combinations to test their app. They don’t have to worry about buying and updating devices and installing software. They must sign up for free, choose the required device-OS combination and start testing their app.