Introduction:
In this article, we will learn about what is Flutter, how to set up your macOS machine for Flutter development and create your first Flutter application.
Before we delve into the specifics of Flutter, let’s first understand the underlying concept. We can develop mobile applications for Android and iOS using a programming language and an Integrated Development Environment (IDE) provided by each platform.
We can develop android application using Kotlin programming language and Android Studio IDE. For developing iOS application, we can use Objective-C or Swift as programming language and Xcode as an IDE.
The benefits of this approach is we can create and optimized our app for a specific platform. This makes the application fast and efficient.
But the problem with this approach is that, we have to maintain two separate code bases for our mobile application one for android and one for iOS. If we want to add new feature to our application, then we have to develop that same feature twice using two different programming languages and IDE. This is where Flutter comes in.
What Is Flutter?
Flutter is an open-source UI software development kit (SDK) created by Google. It is used for building beautiful, cross platform applications from a single code base, meaning we can create apps for Android, iOS, Web, Windows, macOS and Linux using the same codebase.
Key Features:
Cross Platform Development: Flutter enables developers to write code once and deploy it across various platforms, significantly reducing time and effort compared to developing separate apps for each platform.
Dart Programming Language: Flutter apps are written in Dart programming language. It is optimized for UI development and provides fast execution times.
Widgets: Widgets are the fundamental building blocks of Flutter’s core concept. Every element in a Flutter application, from the layout to buttons and text on the screen, is represented as a widget..
Hot reload: Flutter provides a “hot reload” feature, enabling developers to observe changes in their code reflected in the app almost immediately. This feature significantly speeds up and streamlines the development process.
Material and Cupertino design: Flutter supports both Google's Material Design and Apple's Cupertino style, allowing developers to create apps that look native to both Android and iOS platforms.
Setting Up Development Environment:
Note: Flutter requires macOS 11 or later
Step 1:
For Apple silicon Mac, we need to execute below command in terminal to install Rosetta 2.
sudo softwareupdate --install-rosetta --agree-to-license
Step 2:
To develop Flutter applications for iOS, we need to install Xcode 16 or later. To install Xcode, open App Store, search for Xcode and hit install. It’s a big download, so it may take some time depending on your internet speed.
Once the installation is complete, execute below commands in terminal to configure command line tools to use the installed Xcode version.
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
Step 3:
We will install Homebrew. Homebrew is a super handy package manager that makes it easy to install all sorts of softwares.
To install Homebrew, open terminal and execute below command.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Just follow the prompts and once it’s done, you are ready to install other tools with simple commands!
Step 4:
We need to install CocoaPods. CocoaPods is required to compile and enable Flutter plugins for our iOS applications. We can install it using Homebrew. Execute below command in terminal to install CocoaPods using Homebrew.
brew install cocoapods
Step 5:
To develop Flutter applications for Android, we need to install Android Studio.
To install Android Studio, goto https://developer.android.com/studio and download the latest version of Android Studio as per your macOS chip (Intel or Apple silicon).
The setup wizard will guide you through downloading Android SDK and some additional tools.
Once the Android Studio is installed, open SDK manager and make sure below components are installed in order to create Flutter apps for Android.
Android SDK Platform, API 35
Android SDK Command-line Tools
Android SDK Build-Tools
Android SDK Platform-Tools
Android Emulator
Step 6:
To build Flutter applications, we will install Visual Studio Code.
We can install Visual Studio Code using Homebrew. Execute below command in terminal to install Visual Studio Code.
brew install --cask visual-studio-code
Step 7:
Now, we will install Flutter extension for Visual Studio Code. This extension will help to develop Flutter applications using Visual Studio Code.
To install Flutter extension for Visual Studio Code, open up the extensions option in Visual Studio Code and search for Flutter and install the Flutter extension as shown below.
Or you can goto https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter to download and install it.
Step 8:
Now, we need to install Flutter SDK. There are two ways to install Flutter SDK.
We can use VS Code Flutter extension and then install Flutter SDK
We can download the Flutter SDK bundle manually on our machine.
Let’s use second approach. To download the Flutter SDK, goto https://docs.flutter.dev/get-started/install/macos/mobile-ios#download-then-install-flutter and download the bundle as per your Mac machine processor (Intel or Apple Silicon)
Once the SDK is downloaded, execute below commands in terminal to extract the Flutter SDK zip to development folder in home directory.
unzip ~/Downloads/flutter_macos_arm64_3.24.5-stable.zip -d ~/development/
Step 9:
To run Flutter commands in terminal, we need to add Flutter to PATH environment variable. To add Flutter to PATH environment variable, follow below steps.
Open Finder
Execute keyboard shortcut Command + Shift + H to go to home directory.
Execute keyboard shortcut Command + Shift + . to view all hidden files.
As we have already installed Homebrew, there should be a file called “.zshrc”.
Open .zshrc file in your preferred text editor and add line
export PATH=$HOME/development/flutter/bin:$PATHat the end of that file where $HOME is an environment variable which points to our home directory on Mac.Save the changes in .zshrc file and close it.
Step 10:
We’ve installed the necessary components to develop Flutter applications on macOS machine. To verify that our Flutter development setup is complete for macOS, execute the following command in terminal:
flutter doctor
If above command returns an error, then run the above command again with -v (flutter doctor -v) flag to get detailed output and follow the instructions in the output. If any change is made in any component, then make sure to rerun the command again to verify the installation status.
Create Your First Flutter App:
Now we are ready to create our first Flutter application. To create our first Flutter application, follow below steps:
Launch Visual Studio Code
Open command palette using Command + Shift + P keyboard shortcut.
Start typing “flutter new”.
Select the “Flutter: New Project” option from the list.
Visual Studio Code will prompt to locate the Flutter SDK on our machine. Select the location as per Step 7. This is one time step only.
It will display, different project templates to create Flutter application like Application or Empty Application. Select Application as your project template.
It will prompt to select the location on your machine to create the project.
Once the project location is selected, it will prompt to enter the project name.
While entering the project name, make sure all the characters are in small case and words are separated by underscore character. Once you enter the project name, hit enter key to create the project. Flutter will now create your project and Visual Studio Code will open up the project once created.
Now you can hit F5 to launch your Flutter applications.
Links:
I have also created a YouTube video regarding this topic, so if you would like to watch a video tutorial, then please go to https://youtu.be/ShC7TyomFTs
Conclusion:
In this article, we delved into the world of Flutter, exploring its essence and setting up our macOS machine for Flutter development. We also embarked on the journey of creating and building our inaugural Flutter application. I trust you found the article both informative and enjoyable.
Happy Coding!