Flutter starter app running on iPhone 14 Pro simulator on macOS Ventura (Intel)
This is the first part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Follow along to learn everything you need to do to set up your environment, build a Flutter based app, put it into source control and publish it to the App Store and Google Play. Along the way you will need some third party tools and services and while the ones used in the examples will hopefully the simplest set of tools you can feel free to make other choices. We have published hundreds of apps for the App Store and Google Play, and will cover wider topics regarding publication and continuing distribution of your app. The first of those is about licenses and it is in this first article. Don't skip it!
TL:DR – Start Here! Get all the tools required and build your first mobile app using Flutter. Build the starter app on a Mac computer with Apple silicon.
Revised in June 2023 and again in October 2024 to take account of the fact that Apple don't make Intel based Mac computers anymore.
"If you wish to make an apple pie from scratch, you must first invent the universe." — Carl Sagan.
First things first lets set up a computer with all the tools and technology needed to build the Starter app for Flutter. Doing this checks the environment is properly set up and serves as a convenient starting point for your application. Here it what it looks like once all the tools are installed and you build it for iOS and Android.
Important — The iOS screenshot was produced on an Intel based Mac computer. The Android screenshot was produce on a Mac computer with Apple silicon.
The promise of cross-platform apps
One source to rule them all!
Take a moment to marvel at those screenshots. On the left is the Material design demo app from Flutter 3.x on iOS, running on a Simulator of the Apple iPhone 14 Pro running iOS 16, on the right is the Material design demo app from Flutter 3.x running on Android, actually a physical Google Nexus 6p running Android 8.1. Theres an appBar elevated from the rest of the content, with a background colour, a Title centred on iOS and left aligned on Android respecting the guidelines on platform variance. The text is nicely centred and theres a floating action button (FAB) at bottom right but nicely padded away from the screen edge and floating above the content. These are completely different operating systems and completely different resolution devices. The app is running from the same source code. Further in this article are Chrome browser and macOS versions of the same app, again from the exact same source code. This is the power that Flutter has. One set of code in one project to manage cross platform development with much of this heavy lifting done for you.
Setup Pre-requisites
You'll need to get these out of the way first. You will need a recent and decent Apple macOS based computer if you want to build for iOS and submit apps to the App Store. Other computer operating systems are supported by Android Studio and other tools for Flutter development for Android too, but it has to be a macOS based computer to build for iOS because Apple developer tool Xcode is needed and this is only licensed for use on macOS. Even if you do decide for example to use a Chromebook which is very capable of supporting Android Studio and Android app development, you will, I hope, want to build and run and test on iOS too. It is a key benefit of Flutter to be able to simultaneously ship on both platforms so keeping them both alive in your development and test cycle is crucial.
Apple silicon based Mac computers and Flutter development
If you have an Intel based Mac computer then you can just dive in and ignore anything related to Apple silicon. But all Apple computers are based on Apple silicon as of June 2023 so this article has been reworked to focus on Apple silicon based Mac computers.
Important — Flutter unfortunately still requires Rosetta 2. Rosetta 2 enables a Mac with Apple silicon to use apps and components built for a Mac with an Intel processor. It is a real shame that this is still required three years after the first Apple silicon Mac became available to developers on June 22, 2020 and also at the point at which Apple has completed its transition to Apple silicon with the announcement of the Mac Pro 2023. Apple does not sell Intel based Mac computers anymore. Flutter should really address the well known issues. You can read the detail on GitHub but its mostly a case of the last few critical items moving at a glacial pace. See https://github.com/flutter/flutter/issues/60118https://github.com/flutter/flutter/issues/101138 and https://github.com/flutter/flutter/issues/103386
Install Xcode for macOS. Android Studio needs to be able to use the Xcode command line tools to build iOS apps, and you will need to make some adjustments to the iOS part of the Flutter project using Xcode.
Optionally Install Homebrew, the free and open-source Package Manager for macOS from https://brew.sh. You'll probably need it.
Install Android Studio making sure to choose the right download for the chipset your Mac computer. Android Studio gives you a number of things but most importantly installs the Android SDK in your user Library folder at ~/Library/Android/sdk/ Android Studio Download Page
Run through the first run setup screens to set up Android Studio, and let it download the SDK and Flutter and Dart plugins.
Welcome wizard
Android Studio setup wizard screenshot, with cancel, previous, next and finish buttons. Click 'Next'.
Install type
Android Studio setup wizard screenshot, with install type Standard selected. Click 'Next'.
Select UI theme
Android Studio setup wizard screenshot, with Light theme selected. Select a theme and click 'Next'.
Verify settings
Android Studio setup wizard screenshot, showing the folders the SDK and JDK are installed in. Click 'Next'.
Licence Agreement
Android Studio setup wizard screenshot, with a list of licences items. Select each individually and then choose 'Agree' and then click 'Finish'.
Downloading components
Android Studio setup wizard screenshot, downloading components. Wait for it to complete.
Android Studio Projects
Android Studio welcome screenshot, Choose 'Plugins'.
Android Studio Plugins
Android Studio welcome screenshot, Choose 'Flutter'.
Now install the Android command line tools. They didnt get installed by the component download. You can download them from the Android Studio download page, the link is further down the list to the main download. You'll need the command line tools to run sdkmanager. Once downloaded, double click the zip file to extract it to your download folder and move it to your Android SDK folder, for example using this command from the terminal. mkdir -p ~/Library/Android/sdk/cmdline-tools; mv ~/Downloads/cmdline-tools ~/Library/Android/sdk/. On a new Mac you'll need to give terminal permissions for your download folder or this command will fail.
The command line tools require Java, Android Studio installed a Java runtime, a JDK, so you can use it. If you installed on the defaults then % sudo ln -s /Applications/Android\ Studio.app/Contents/jbr /Library/Java/JavaVirtualMachines/android-studio.jdk will create the necessary link.
Once you have done this the /usr/libexec/java_home command in macOS will resolve the location of Java correctly.
You can test that you have working Java in the terminal.
% java --version
openjdk 17.0.6 2023-01-17
OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
OpenJDK 64-Bit Server VM (build 17.0.6+0-17.0.6b802.4-9586694, mixed mode)
Honestly this is by FAR the easiest way to get a totally functional JVM on a Mac. It should update automatically whenever Android Studio updates it too - getting you out of the JVM maintenance business. It is OpenJDK too so no Oracle licence nonsense. You're welcome!
Accept the licences in Flutter. % flutter doctor --android-licenses.
Make sure the command line tools are in your terminal path for example like this assuming you also set an ANDROID_HOME
Prepare an Android and an iOS device and/or emulators for use as development targets. Real devices are provide a more realistic experience and are needed for testing some functionality although the emulators are very good these days and benefit from Apple silicon.
Checking your Flutter environment
Once you have completed the development pre-requisites above you can use the flutter doctor command to check your environment is set up correctly and flutter upgrade to check you have the latest release
Run flutter upgrade and the output should confirm flutter is installed
% flutter upgrade
Flutter is already up to date on channel stable
Flutter 2.0.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c5a4b4029c (23 hours ago) • 2021-03-04 09:47:48 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0
Run flutter doctor and the output should confirm your environment is set up.
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, 3.10.4, on macOS 13.4 22F66 darwin-arm64, locale en-GB)
✗ Downloaded executables cannot execute on host.
See https://github.com/flutter/flutter/issues/6207 for more information.
Flutter requires the Rosetta translation environment on ARM Macs. Try running:
sudo softwareupdate --install-rosetta --agree-to-license
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 14.3.1)
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart
side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] Connected device (2 available)
[✓] Network resources
! Doctor found issues in 2 categories.
You'll need to work through any issues reported until Flutter doctor reports that there are no issues. In particular, at the moment, you'll need to install Apple's Rosetta translation environment on Mac computers based on Apple silicon. To do so you can run % sudo softwareupdate --install-rosetta --agree-to-license. Then run Flutter doctor again and once there are no more issues you're ready to create a Flutter project.
Creating the app project
Note! There are some important factors to consider when naming your project.
When you originally create the project in Android Studio or using the flutter create command, it will create an application ID and package name which used by the android part of the project and will initially be the same. They are in fact independent of each other. You can change the package name (in pubspec.yaml, which is your code namespace, and it will not affect the application ID in app/src/main/AndroidManifest.xml. The application ID is used by Google Play and must not be changed once your app binary has been published to any track in Google Play. You can read more about this at 'configure the app module' on developer.android.com. You should seriously consider your app, application ID and related naming for publication now. Changing it is possible later but is not exactly trivial.
flutter create nameofyourproject and the output should be similar to this (more lines though).
Check you have a device connected successfully and then you can run your app for the first time.
Important — You cannot build for iOS without Rosetta 2. You also need certificates for development on real iOS devices. If you have Rosetta 2 you can use the Apple silicon iOS simulator launch using open -a simulator and it will appear as a run target in Android Studio.
Type flutter devices and the output should be similar to this
Plug an Android device in to your Mac, and make sure it appears in Flutter devices. In the terminal change into the project folder. % cd nameofyourproject and then Run the app. % flutter run DEVICENAME. The devicename is the ID of the device reported by Flutter devices, or macos or chrome. Try them all.
Or in Android Studio open the nameofyourproject project. You'll need to tell Android Studio that you trust it. Accept any nagging prompts. Then select your device or find the Android Emulator and cold boot it. Finally press the Run button in the toolbar. On a Mac with Apple silicon this is very fast indeed compared to the glacial build times and load times of the emulator. Android Studio running my first app on the provided Android emulator
Build and run the app for macOS
Type % flutter run -d macos and Flutter will build a macOS Silicon binary. You can see for yourself by selecting Get Info in Finder on the executable and noting it says Kind: Application (Apple Silicon).
macOS Get Info proving its an Apple silicon appStarter app, created from the command line, running as an Apple Silicon binary on macOS Ventura
Build and run the app for as a web app
Type % flutter run -d chrome and Flutter will build a web application.
Flutter Starter app running as a web app in Chrome
Publication Pre-requisites
Important — Don't skip these steps if you are planning to publish your app. Get started early as the Apple process in particular can take time, a couple of weeks is typical!
To publish your app in Google Play you will need to Sign in with your Google Account, Accept the terms, Pay the one time Registration Fee, and complete your Account details. You'll need this Google Account forever and it will be the only way to get back to the account in case of catastrophe so think carefully about the account to use.
To publish your app in the App Store you will need to Enroll in Apple Developer Program with an Apple ID and pay for the membership year. You will need an Apple ID with two-factor authentication turned on. You’ll need to provide basic personal information, including your legal name and address. You'll need to provide further business information if you enroll on behalf of a business and it really is worth doing this now as it will eventually cause you problems if you do not. It takes some time to complete the process and check your business information so get this done early or you may delay your app launch.
Well done! If you got this far you have a Flutter environment and a sample app that runs on a device or emulator.
