Installing Flutter on OS X, 2021 Edition — New Bumps

I wrote a guide for installing Flutter on OS X last year, and I’ve started over again on a new computer to have discovered a few bumps that you might run into on your Mac.

First step is to go through the setup. This can take you less than 30 minutes. When it does work without any bumps, then you’ve discovered nirvana because:

  • You built a quick “my_app” for Flutter
  • You started an iOS emulator on your computer
  • And then it actually ran within the emulator magically

The next steps you wish to run to are to deploy on your real mobile devices — both iOS and Android — and then say to yourself, “Whaaaaaaat?” That’ll take you maybe 1 or 2 more hours.

But in case you ran into a few bumps, I include a few that I ran into that were new to me from the last time I did all these installs from zero.

✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.

This bump took me 20 minutes to resolve, and if it happens to you then this guide is for your! Read onwards!

Null Safety Isn’t A Bump

Please note that the Dart world has introduced something geeky cool called “null safety” protection. And the default demo Flutter app tells you:

It feels kind of amazing when it all works. Right?

Running with unsound null safety

That sounds … unsafe. It just means that the demo itself hasn’t been updated to its new shiny status of providing null safety. Just wait and this’ll get fixed in the demos. No worries!

This came out in November of 2020, so expect to see it in more places.

To get more nerdy, visit this comprehensive null safety page. And reading about the pre-announcement will help you get excited about what this means to you. Better experiences! :+)

Getting Your Android Emulator Running Bump

The instructions for getting your Android emulator running from Android Studio refers to step 1 as your needing to “Enable VM acceleration on your machine” but lands you in a page talking about graphic acceleration. No worries. You don’t need to think about this at all if you’re just starting out. Forget it and move on!

While building an emulator device, it’ll ask you for a system image. That needs to get downloaded first before you get to go forward. If you choose a device with a “Play Store” icon next to it, then it will give you a choice of many past versions of Android. So you get so many choices! Yaaaaaay. yay. ya … This is important if you are debugging your app on all the versions of all the devices in the world. If you’re not going to do that right now, then just pick one version of the OS you want on the device you want, and keep moving!

I made a Pixel 4 with the latest version of Android

And then you get a “playlist” of devices. Go ahead and hit the play button!

Nothing like a playlist of devices. I’ve only got one “song” right now.

And if you close your iOS emulator (or keep it up too if you don’t mind selecting the target devices from your command line incantation) it’ll pop up on your Android device magically.

Sign up for the Resilience Tech Briefing with no more than 2021 characters, zero images, and all in plain-text.

By clicking submit, you agree to share your email address with the site owner and Mailchimp to receive marketing, updates, and other emails from the site owner. Use the unsubscribe link in those emails to opt out at any time.

Processing…
Success! You're on the list.

Getting Your Path Set Right Bump

Keep in mind that updating your path is important when trying to get Flutter nirvana to happen for you. I’m lazy and always forget how to do this correctly. You need to know which UNIX shell you’re running to get this right. If you have a vanilla Mac install, then you’re using Z shell.

In the case below, I’ve verified that I’m running Z shell. And I know that I’ve plopped my Flutter SDK inside a top-level directory named ‘development’ with the binary executables sitting in flutter/bin.

% echo $SHELL
/bin/zsh
% cat ~/.zshrc
export PATH="$PATH:/Users/johnmaeda/development/flutter/bin"

This will “set and forget” for you so that when you’re distracted by something else at your workplace (or at home), you’ll remember how to get running with your Flutter studies more quickly.

Android Studio Plugin Bump

  • Flutter complains that it can’t find something special in your Android Studio install … even though you did it right. Flutter doctor keeps returning the same thing and you’re feeling icky.
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.

The solution is to do this from your terminal after you’ve installed the Flutter and Dart plugin after a few times and restarting the IDE — hoping it will miraculously work at some point.

% flutter channel dev
% flutter doctor
% flutter channel master
% flutter doctor

And if the stars are aligned, you’ll see this beauty:

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.26.0-2.0.pre.131, on Mac OS X 10.15.7 19H114
    darwin-x64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] Connected device (1 available)

Visual Studio Editor Bump

You’re trying to edit the code, and then remember how great VS (Visual Studio) Code is. And so you download and install Visual Studio. Wrong! You need to install Visual Studio Code instead.

They sound so similar, right?

They sound the same and look the same from a download perspective. But they’re not!

You’re not going to be able to install the Flutter or Dart extensions here. If you installed it, just drag it from Applications to the Trash and it might go away quietly.
If you land over here, then you’re good to go!

So if you’re on Mac, and you’re running your emulator:

% open -a Simulator

And you have a terminal window open and are running the sample my_app

% flutter run

From File > Open you can select the my_app directory and it appears on screen like this:

I’ve opened the main file where the program is sitting ripe for you to edit “main.dart”
Launching lib/main.dart on iPhone SE (2nd generation) in debug mode...
Running Xcode build...                                                  
 └─Compiling, linking and signing...                         6.6s
Xcode build done.                                           13.3s
Syncing files to device iPhone SE (2nd generation)...               71ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on iPhone SE (2nd generation) is available
at: http://127.0.0.1:53534/jVj95avQHXg=/

Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety

You edit the code in VS Code … say change the color from ‘blue’ to ‘red’ …

Save the main.dart file with a command-S. Then hit the ‘r’ key in the terminal window to do a “Hot reload” and then this happens:

Performing hot reload...                                                
Reloaded 1 of 538 libraries in 216ms.

And then the app turns red …

It was blue, and now it’s red!

Change Your info.plist Bump

Some Flutter modules will ask you do things for iOS that are special. Same happens for Android, too. For iOS if you need to do this:

<key>io.flutter.embedded_views_preview</key>
<true/>

Then this is where you want to navigate towards:

Changing your info.plist might feel a bit scary but it’s okay!

Related Posts