i am all a flutter over flutter

By | August 21, 2020

This post will be about flutter, Google’s cross platform mobile IDE, and how to set it up on your computer. Flutter is a competing product to react native, facebook’s cross platform mobile framework. Both are good and are battling for our hearts and minds. At this time I have not tried react native but eager to check it out.

This post assumes you are using a mac with macOS Catalina 10.15 and later. You can install flutter on a PC but you can only develop Android apps. What’s the point in that? Get a mac!

Setting up a zsh shell

Catalina requires a zsh shell instead of bash. So you will need to set your terminal to a zsh shell. To do this open a terminal window and under “Preferences” set “shells open with” to “Command (complete path):” and enter “/bin/zsh” in the edit box .

Quit the terminal and reopen to confirm the correct shell is installed by typing in the following command “echo $SHELL”. It should reply back with “/bin/zsh”. If not repeat the step above.

Install Flutter

Android Studio, Flutter and XCode require tons of disk space. When I did this originally I had a mac book pro with a 128GB SSD. I ran out of space and had to upgrade to a new MacBook Pro. The IDEs, Android Studio, Flutter and XCode take a ton of space plus each simulator you install can take up to 10GB of space. You can circumvent the simulator disk creep by using an actual Android device or iOS device plugged into your system.

Use the following link to get the Flutter SDK. https://flutter.dev/docs/get-started/install

Unzip the file and it should automatically be named “flutter”. Then move it to this location “Macintosh HD\Users\<your user name>\ Developer\”. Note: you might need to create the folder “Developer”.

Open a terminal window make sure the proper shell is being used for Catalina. The title bar of the shell should read “<your user name> — -zsh”. If not repeat “Setting up a zsh shell” above.

Next create or modify the “.zshrc” file. Do this by typing “vim ~/.zshrc” in the terminal. Press the “i” key to insert in vim and copy and paste the following.

export PATH="$PATH:$HOME/Developer/flutter/bin"

Hit “esc” and then “:wq!” to save your changes. Once back in the terminal. type in “cat ~/.zshrc” to confirm the file has the desired changes.

Quit the terminal and reopen. Enter “flutter –version” to confirm what version of flutter is installed. In my case it also started to install a bunch of stuff. I assume this happened because the zip file was out of date.

The last step is to get the latest version of flutter by entering “flutter upgrade”. You might notice that this also installs “Dart” which is the language that flutter uses. It takes awhile so come back to it later.

Install Android Studio

Use this link to install Android Studio https://developer.android.com/studio

Start android studio and click “Configure/preferences” on the welcome screen.

Click on “Plugins” in the configure screen list. Then type in “Flutter” in search field above the plugin list. Choose “Flutter” and press install. It will also ask to install “Dart”.

Restart android studio and you will now have a new Flutter option on the screen. Click “Start a new Flutter project”.

On the next screen choose “Flutter Application”.

Click on the next few screens, which allow you to change location and names, and you will be presented with a new working Flutter app. Congratulations you have created your first Flutter app! Before we run the app we need a device to run it on. That comes next.

Virtual devices

Android Studio has many virtual devices that allow you to test your code. I found that they were very helpful while laying out the UI for different devices. iOS also has virtual devices that are automatically installed with XCode. XCode will be discussed later in this blog.

Be aware that Android virtual devices take up a lot of disk space and you will want to install only the ones you need. I choose to install a small, medium and large size virtual device for UI work. You can also target various operating systems to test compatibility.

One last thing, be aware that virtual devices take a lot of processing power. If you don’t want your system to have a melt down use an actual device. I choose to install my apps on my iPhone so I could play around with them in real life.

Install an Android emulator

To create a virtual Android device choose “Tools/AVD Manager” inside Android Studio.

You will be presented with a list of devices. Choose Nexus 6, since it can accelerated using your graphics card.

After you have selected the device the next screen will be used to select the operating system. Choose x86 Pie version. It a good lightweight choice. Please note that every operating system takes some space so you don’t want to add too many them.

Once you chosen your operating system the “Verify Configuration” screen will show. For the Nexus 6 choose hardware acceleration so that the virtual device can use your computers graphics hardware and press “Finish”.

“Your Virtual Devices” page will display. Press the green “Run” button to start the device. Later you can add more devices to test screen sizes and different operating systems.

Run the app

In Android Studio select your virtual device as shown below and press the run button. Android Studio will compile your Flutter project and launch the app on your virtual device.

Unfortunately the first time I did this I got an error about accepting Android licenses. After some googling I had to enter the following in the terminal to globally accept all licenses.

export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jre/jdk/Contents/Home
yes | ~/Library/Android/sdk/tools/bin/sdkmanager --licenses

Install X Code

To build iOS apps you need to install XCode from the app store.

After XCode is installed open it for the first time and agree to all the license prompts. Once it has completely opened leave it open for the next step.

Next configure the Xcode command-line tools by running the following two commands in the terminal. Since this command uses sudo you will need to enter your mac password.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

Quit the terminal and XCode.

Setup your iOS devices in the simulator

Once you setup Flutter restart Android Studio. Android Studio will now have a new option to access the iOS simulator. You will find it in the drop down shown below.

Select “Open iOS Simulator” and the following will be displayed. You can then select the device you want to simulate. You can play around any iPhone you want. Pretty cool stuff.

After you have the iOS device open it will be available in the dropdown in Android Studio. Select the device and press run. Android Studio will compile your Flutter project and then start XCode to run the app on your device.

And there is more

Click the button below to view our next blog where will modify this app to demonstrate views, widgets, plugins, hot reload, context, state, etc.