Flutter based app development with FlutterFlow on a Mac

Flutter development requires a set of applications and operating systems components to work in concert with one another. This is often called a toolchain and thats the term I prefer since it indicates that they are dependent on one another and is generic enough to convey that the tools come from multiple vendors. FlutterFlow allows you to avoid much of the complexity of these tools by delivering much of the development environment in a browser. However for real on device testing and complex app debugging for example for banner adverts or in-app purchases you really need local debugging tools on real devices.

If you can stretch to it the Mac Studio is an amazing, powerful and almost silent desktop computer which is perfect for developers too. My Mac Studio is 64GB, M1 ultra, and 1TB SSD. It is the best computer I have ever had, replaced my obsolete Mac Pro (2013) which had been on 24 hours a day for almost ten years.

TL:DR – macOS is a great choice for a development environment provided you do things the Apple way and don't think you are running Linux. Any current Mac computer will be fine.

A FlutterFlow based Flutter app DevTools debugger and profiler running from a Mac Studio, against a directly connected Android device.

In this screenshot you can see the Flutter DevTools debugger and profiler running against my Flutter based app built with FlutterFlow which is running on an Android device directly connected with a cable to a Mac Studio 2022.

Installing Flutter on a Mac 

• Install Xcode from the App Store, and install the Command Line tools too, you may have to run Xcode once then go back to Software Update to get the Command Line tools to show up as an update or you can use terminal commands to get them.
• Optionally Install Homebrew, the free and open-source Package Manager for macOS from https://brew.sh. You'll probably need it.
• Get the Flutter SDK by downloading the latest stable release, extracting it to your desired location. I've started using /Users/yourusername/Development so as to keep things for my user and away from macOS folders which might not behave the way you might expect these days what with system integrity protection (SIP) and the filesystem (AFPS).
• Add the location you chose to your path by editing your .zshrc and adding the flutter folder to your path $ export PATH="$PATH:[PATH_TO_FLUTTER_FOLDER]/flutter/bin"
• You should now download the latest Android command. The latest tools include support for Apple Silicon. You can do this from the terminal but by far the easiest way is to use the sdkmanager in Android Studio 'Chipmunk' to get the Android SDK Build tools 33.0.0 which finally has everything required for Flutter app development on an Apple Silicon based Mac computer.

  

• Once you've downloaded it (taking care to make sure you download the version for Apple silicon)You can find the SDK manager graphical user interface on the three dots menu item on the main project screen

  

• These are the SDK Tools selected in Android Studio 'Chipmunk' for a working installation on a Mac computer with Apple silicon.

  

• Now you can run flutter doctor.Right now I just need an android target so I can ignore the CocoaPodsissue. For android development my Mac with Apple silicon is almost ready to go!

  % flutter doctor
  Doctor summary (to see all details, run flutter doctor -v):
  [!] Flutter (Channel stable, 3.0.5, on macOS 12.5 21G72 darwin-arm, locale en-GB)
      ✗ Downloaded executables cannot execute on host.
        See https://github.com/flutter/flutter/issues/6207 for more information
  
  [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
  [!] Xcode - develop for iOS and macOS (Xcode 13.4.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 2021.2)
  [✓] Connected device (2 available)
  [✓] HTTP Host Availability
  
  ! Doctor found issues in 2 categories.
  

• If you see this kind of failure try check each message and update your tools to make sure everything is where we need it to be.

  Fixing the dependencies in my FlutterFlow based Flutter app

  • Flutter reuqires the Android Gradle Plugin with support for Apple Silicon. In your project, adjust the android/build.gradle to set classpath 'com.android.tools.build:gradle:7.2.0' The android build system is based on Gradle, and the Android Gradle plugin adds several features that are specific to building Android apps. Android Studio 'Chipmunk' (2021.2.1) Supports a maximum plugin version of 7.2 which supports Apple Silicon.
  • In android/gradle/wrapper/gradle-wrapper.properties adjust the distributionURL distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip . This was necessary to avoid the bad CPU type in executable errors.
  • It runs! My flutter APK is synced to my Google device, and runs there. It also runs in the arm based Google device emulators and is super fast! Unlike the old Intel emulators which were truly awful. I can use the hot reload and observatory debugger tools on my Apple Mac Mini M1, 2020 with Apple Silicon, without Rosetta.

  Resources

  • Flutter 3.x for macOS is available from flutter.dev.
  • flutter_m1_patcher: ^1.6.0 is no longer required with Flutter 3.x pub.dev.
  • Homebrew. The Missing Package Manager for macOS (or Linux) is available from brew.sh.
  • Android command line tools are available from developer.android.com/studio.
  • The sdkmanager tool is provided in the Android SDK Tools package and is documented here sdkmanager.
  • The emulator tool is provided in the Android SDK Tools package and is documented here emulator.
  • Google's Maven repository which is located at maven.google.com.
  • To get the newest version of AAPT2 that's not bundled in the build-tools, you can download AAPT2 direct from Google's Maven repository which is documented here: AAPT.
  • The latest version is now included in released android tools. Previously I found Apple Silicon support here: AAPT 7.3.0-alpha06-8137612.
  • See this comment on ndk/issues/1299.
  • This may not be needed anymore but previously I had to install Android NDK 24 or later % sdkmanager --install "ndk;25.0.8775105"