Flutter Download

Flutter!! It is a powerful and versatile UI framework developed by Google that allows software developers to build natively complied mobile desktop applications from a single codebase. You can also use Flutter for web applications development. Whether you are an experienced developer or just starting out, this all-inclusive guide will walk you through everything you need to know about how to install flutter and setup for your development needs.

What is Flutter?

Flutter has reshaped how applications are developed by offering an all-inclusive toolkit that simplifies the process. With its rich collection of pre-built widgets and seamless cross-platform functionality, Flutter has become a preferred choice for developers worldwide.

Key Benefits of Flutter

  1. Fast Development: With the ‘Hot Reload’ feature, developers can see the changes instantly without restarting the application.
  2. Beautiful UI: Flutter provides customizable widgets that align with Material Design and Cupertino (iOS style) guidelines.
  3. Cross-Platform Support: Using Flutter for multiplatform mobile development can help you reduce development costs and effort.
  4. Strong Community and Support: Backed by Google, Flutter has a strong community and extensive documentation to help developers at every step.

Understanding the Flutter SDK

The Flutter Software Development Kit (SDK) is the backbone of Flutter Development. This includes:

  • Dart SDK: The Dart programming language is optimized for UI Development, offering features like sound null safety and asynchronous programming.
  • Flutter Framework Libraries: Pre-built widgets, tools, and utilities simplify app development.
  • Command-Line Tools: Commands like flutter create, flutter build, and flutter run streamline the development process.

The SDK is an essential toolkit for building, testing, and deploying Flutter applications. By mastering it, you get the full potential of the capabilities of Flutter.

Preparing Your Development Environment

Before installing Flutter, it is important to set up your development environment to ensure smooth operation. Below is what you need:

System Requirements

Make sure your system meets the below requirements:

1.) Windows:

  • Operating System: Windows 10 or later (64-bit).
  • Disk Space: 1.64 GB (additional space may be required for IDEs and emulators).
  • Tools: Git for Windows for version control.

2.) macOS:

  • Operating System: macOS 10.14 (Mojave) or later.
  • Disk Space: 2.8 GB
  • Tools: XCode for iOS Development

3.) Linux

  • Operating System: Any modern 64-bit Linux distribution
  • Disk Space: 1.64 GB
  • Tools: Git and libGLU library

Development Tools

To build a Flutter app, you will need an IDE (Integrated Development Environment) and additional tools:

  • Android Studio: Recommended for Android Development.
  • XCode: Necessary for iOS Development on macOS.
  • Visual Studio Code: A lightweight alternative with excellent Flutter support.

Installing Flutter SDK

For Windows Users

    • Extract the Files: Unzip the downloaded file to a directory (for example, C:\tools\flutter). Avoid the directories that require admin permission.
    • Update the Path: Now that you have unzipped the FlutterSDK into a local directory, you need to tell your Windows device, where to find the SDK. For this, you can use the Control Panel on Windows to update the path variable.

Open Control Panel

Start with opening the control panel by using the search box near the start menu at the bottom of the Windows screen.

Control Panel

System and Security

When the control panel opens, find and click on System and Security.

System Security

System

Next, click on System.

System

Advanced Settings

Next, select advanced system settings.

Advanced system settings

Environmental Variables

Update your path to include a new entry to the Flutter SDK’s bin folder. For example, the path could be c:\tools\flutter\bin. After entering this information, press OK and close the control panel.

Select Environmental Variables

Check Installation

You have your system path set up now and you can verify your installation. Now open a new terminal and enter the below command to check if the Flutter SDK installation is done.

flutter -- version

The output should look as below.

Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git

Framework • revision 135454af32 (6 weeks ago) • 2022-12-15 07:36:55 -0800

Engine • revision 3316dd8728

Tools • Dart 2.18.6 • DevTools 2.15.0

If you see such output, Yipee! Your installation is done.

For macOS Users

Determine the Mac Chipset

The Chipset of your Mac will either be Apple (arm64) or Intel (x64). You must check and note the chipset before you begin the installation process. For that, open the Apple menu at the top left corner of your screen and click on “About this Mac”. This will open a dialog box where you can find your chipset information.

Determine Mac Chipset

Note: Just remember the chipset in order to download the correct version of SDK.

Version of SDK

Downloading and Unzipping

Download the Flutter SDK for your device’s correct chipset and extract the zip into a new Flutter folder on your hard drive. For example, you can put your Flutter SDK in your user directory:

/Users/<Mac_Username>/flutter

Determining the Mac Shell Version

Now, you need to tell your Mac about the Flutter SDK. This required a terminal to update your shell configuration. On a Mac, the shell is responsible for launching other programs.

Open your terminal by typing ⌘/Command + Space and typing Terminal.

Once your terminal is open, type the below command to determine the shell on your Mac.

Echo $SHELL

This command will give the output of the active shell in use.

If you see /bin/bash, modify .bashrc, and if you see /bin/zsh, modify .zshrc.

Both the above files, .bashrc and .zshrc, reside in the home folder. Edit them and add the path to the Flutter SDK.

Editing Your Mac Path

Now, you know the shell script that you have to use. You can edit the path to include the additional entry for the bin folder inside your Flutter folder.

Use the nano editor or any other editor like vi for this step.

In your terminal, first, open the script file:

Nano /Users/<Mac_Username>/ .zshrc

Now, add a line to the end of this script file:

export PATH=”$PATH:/Users/<Mac_Username>/flutter/bin”

Next, press ⌃/Control + o to save the file. Press enter to confirm the file name.

You can now exit by pressing ⌃/Control + x.

Now, close the terminal program and reopen it for the change to take effect.

Open a new terminal and check the Flutter SDK installation with the below command:

flutter -- version

Your output should look as the below:

Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git

Framework • revision 135454af32 (6 weeks ago) • 2022-12-15 07:36:55 -0800

Engine • revision 3316dd8728

Tools • Dart 2.18.6 • DevTools 2.15.0

If you see this output, your Flutter SDK installation for macOS is successful.

Setting Up an Integrated Development Environment (IDE)

For flutter-based mobile application development, you will need an IDE. This environment is where you can:

    • Edit Code
    • Organize files
 

IDE 1 - Installing Android Studio 

Android Studio is Google’s Integrated Development Environment that you can use to build apps for Android devices. Android Studio includes:

  • An IDE with a robust code editor.
  • Android SDK to build and package Android applications.
  • Emulators of different virtual Android devices.
  • The ability to connect to physical Android devices.

Follow the below installation instructions for your system.

Installing Android Studio on Windows

To install Android Studio, you need to download the Android Studio Installation Program. Once downloaded, launch the installer and follow the below steps:

Install Android Studio on Windows

Once finished, the setup program will close and Android Studio will open. It will launch a wizard to set up your development environment and download any necessary components.

Install Android Studio Command Line Tools

Next, install Android SDK command Line Tools. Follow the steps below:

  • Launch Android Studio
  • Go to More Options and choose SDK Manager
Installing Android Studio Command Line Tools

In the SDK Manager, under System Setup, click the checkbox for Android SDK Command-Line Tools (latest).

Android SDK Command Line Tools

Install the Android Studio Plugin

When you launch Android Studio, you will see an option to install plugins to extend Android Studio. Install plugins for Flutter development.

Launch Android Studio and select the ‘plugins’ item in the navigation list on the left side.

Install the Android Studio Plugin

After you select the Plugin, enter Flutter as a search term in the Marketplace. Install the Flutter plugin. Along with that, it will also install the Dart plugin as it is required.

Once the Plugin is installed, Android Studio will restart. Now you can create your First Flutter app. If you are looking for professional app development using Flutter, hire Flutter app developers and save your development time and effort.

 Flutter as a search term in the Marketplace

Install Android Studio for macOS

Follow the steps below to install Android Studio for macOS:

  • Go to the Android Studio homepage and click on the ‘Download Android Studio’ button.
  • Go to the downloads folder and double-click on the downloaded file.
  • When the installer opens, drag and drop the Android Studio icon to the Applications folder. This will copy Android Studio to the applications folder on your Mac.
Install Android Studio on macOS

You can now launch Android Studio from the downloads folder! Do that so Android Studio can download updates or necessary files.

Install the Flutter Plugin

When you launch Android Studio, you will see an option to install plugins to extend Android Studio. Install plugins for Flutter development.

Launch Android Studio and select the ‘plugins’ item in the navigation list on the left side.

Install Flutter Plugin

After you select the Plugin, enter Flutter as a search term in the Marketplace. Install the Flutter plugin. Along with that, it will also install the Dart plugin as it is required.

Once the Plugin is installed, Android Studio will restart. Now you can create your First Flutter app.

Android Studio restart

IDE 2: XCode (Mac Only)

To develop applications for Mac, you will need XCode. XCode is Apple’s Integrated Development Environment (IDE) and only runs on macOS. It will allow us to develop Flutter-based applications for iOS devices.

Similar to Android Studio, XCode includes:

  • An IDE for writing apps
  • Device simulators for different iOS versions.
  • Tools such as compilers and debuggers.

You cannot run XCode on a PC. However, you can create Flutter apps on PCs and then later build them on a Mac with XCode.

Installing XCode on MacOS

Go to the XCode on the Mac App Store Page and click on Open App Store.

Install XCode on MacOS

This will open the Apple App Store. It will display details about the XCode application.

open Apple App Store

Click on the install icon and download XCode.

Another component that you need for iOS Development is Cocoapods.

Installing Brew and Cocoapods

Cocoapods is an open-source package management tool for the XCode build environment. Installing this tool is crucial as Flutter synchronizes necessary packages with the Dart environment.

You can get cocoapods using the tool called Brew. It is an open-source freely available tool for Mac. You will have to install Brew first. Open the terminal and write the below code to install Brew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once this process is finished and Brew is installed, you can use it to install Cocoapods.

Open terminal and type:

brew install cocoapods

Your Mac is now ready for Flutter Development and running applications on iOS and macOS devices. Your next step is to now verify the Flutter environment.

Verifying Flutter Environment

Now that your setup is done, verify the flutter environment by:

Opening the Terminal or Command Prompt:

  • On Windows, use Command Prompt or PowerShell
  • On macOS, use the Terminal
  • On Linux, use any Terminal emulator

Type the below command and press enter:

flutter doctor

Conclusion

Setting up Flutter Environment is the very first step towards creating stunning Flutter applications. With this guide, you’re ready to learn the rich features Flutter offers and start building your first app. Remember, the journey doesn’t end here-Flutter’s documentation and community provide endless learning opportunities, get in touch with the Flutter App Development Company to know more and get your Flutter application developed for your business.