DEV Community: Sudara Sachindana

Flutter Installation and Environment Setup Guide

Sudara Sachindana — Tue, 28 Jan 2025 07:22:16 +0000

System Requirements

Before you begin, ensure your system meets the following requirements:

Operating System: Windows, macOS, or Linux (64-bit)
Disk Space: 1.64 GB (does not include disk space for IDE/tools)
Tools: Git for Windows

1. Install Flutter SDK

Step 1: Download Flutter SDK

Open your web browser and visit the Flutter website: https://flutter.dev/docs/get-started/install.
Select your operating system (Windows, macOS, Linux, or ChromeOS).
Download the Flutter SDK for your platform.

Step 2: Extract Flutter SDK

Locate the downloaded file.
Extract it to your preferred location:
- Windows: Extract to C:\src\flutter (or another location).
- macOS/Linux: Extract to ~/development/flutter.

Step 3: Add Flutter to PATH

Update your system's PATH to include the Flutter SDK's bin directory.
- Windows:
  - Open the Start menu and search for "Environment Variables."
  - Under "System Variables," find "Path" and click "Edit."
  - Add C:\src\flutter\bin to the list.
- macOS/Linux:
  - Open a terminal and edit your shell configuration file (~/.bashrc, ~/.zshrc, or ~/.bash_profile):
```
   export PATH="$PATH:~/development/flutter/bin"
```
Save the file and run:
```
   source ~/.bashrc
```
To verify the addition of Flutter to your PATH, run:

   echo $PATH

Step 4: Verify Flutter Installation

Open a terminal or command prompt.
Run the following command:

   flutter doctor

This checks for any missing dependencies and ensures that Flutter is correctly installed.
1. Review the output and resolve any issues mentioned (e.g., missing tools or SDKs).

2. Install Development Tools

Step 1: Install a Code Editor

Download and install Visual Studio Code or Android Studio.
For Visual Studio Code:
- Open the Extensions Marketplace.
- Search for "Flutter" and "Dart" extensions and install them.

Step 2: Install Android Studio

Download and install Android Studio.
Open Android Studio and complete the setup wizard to install essential components.
Open the SDK Manager (under Configure > SDK Manager) and ensure the following components are installed:
- Android SDK
- Android Emulator
- Platform Tools
Add the platform-tools directory to your PATH.
- Example (macOS/Linux):
```
 export PATH="$PATH:~/Library/Android/sdk/platform-tools"
```

Step 3: Install Xcode (macOS only)

Open the App Store and download Xcode.
Install the Command Line Tools by running:

   xcode-select --install

Accept the Xcode license agreement:

   sudo xcodebuild -license

3. Configure Device/Emulator

For Android

Set up an Android Virtual Device (AVD):
- Open Android Studio.
- Go to Tools > AVD Manager > Create Virtual Device.
- Follow the prompts to configure your emulator.
Alternatively, connect a physical Android device:
- Enable Developer Mode and USB Debugging on your device.
- Connect the device via USB to your computer.

For iOS (macOS only)

Set up an iOS Simulator:
- Open Xcode.
- Go to Xcode > Preferences > Locations > Command Line Tools and select the installed version.
- Run the simulator:
```
 open -a Simulator
```
Alternatively, connect a physical iOS device:
- Use a USB cable to connect the device.
- Trust the computer from your iOS device.

4. Run Flutter Doctor

Run:

  flutter doctor

Follow the output instructions to fix any missing dependencies.

5. Create Your First Flutter App

Step 1: Create a New Flutter Project

Open a terminal and run:

   flutter create my_first_app
   cd my_first_app

Step 2: Run the App

On an Android Emulator:

   flutter run

On an iOS Simulator:

   flutter run -d ios

On a connected physical device:

   flutter run -d <device_id>

6. Optional: Enable Web/Windows/Linux Development

Enable Web Development

Run:

   flutter config --enable-web

Start the web server:

   flutter run -d web

Enable Desktop Development

Enable support for Windows/Linux:

   flutter config --enable-windows-desktop
   flutter config --enable-linux-desktop

Run the app:

   flutter run -d windows

7. Upgrade Flutter

To keep Flutter up to date, run:

  flutter upgrade

Introduction to Flutter

Sudara Sachindana — Tue, 22 Jun 2021 09:35:07 +0000

Flutter is

“ Flutter is a mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from a single codebase.” — flutter.io

Overview on Flutter

Flutter is a great tool from Google for creating cross-platform applications which – starting from the newest stable version – can be deployed to the web, desktop, and mobile.

Google is promoting Flutter as a simple framework that allows us to create quality maintainable solutions. Easy, it is just the next cross-platform framework.

A Brief History of Flutter

Flutter launched as a project called Sky which at the beginning worked only on Android. Flutter’s goal is enabling developers to compile for every platform using its own graphic layer rendered by the Skia engine. Here’s a brief presentation of Flutter’s relatively short history.

Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, this allows you to create a native mobile application with only one code. It means that you can use one programming language and one codebase to create two different apps (IOS and Android).

Flutter’s beta version was launched on 13th March 2018 and it was first to live on 4th December 2018. In such a short amount of time, Flutter has already established its position in the market.

Flutter Architecture

Flutter is organized around layers. Each layer is build upon the previous.

From the diagram we can see the low level part of Flutter is an Engine built in C++. It provides low-level rendering support using Google’s Skia graphics library.

The high-level part of the diagram is the Framework written in Dart. It provides libraries to handle animation, gestures, rendering, widgets and more.

With all this layer the developer can do more with less code by using elements on the top or go down to customize some behavior of its app.

Everything is a widget

In Flutter, Everything is a widget nested inside the another widget. It comes with beautiful, customizable widgets and we can control the behavior of each widget and also styling becomes easy.

All the widget of a Flutter app form a hierarchy where a widget is a composition of other widgets and each widget inherits properties from its parent.

Flutter Highlights

Fast development

When developing with flutter, you can use a feature called hot reload. Hot reload build and run your projects faster than a second. This actually helps develop fast and resolve bugs faster.

Single code for Two platforms

Managing different codes for different platforms could be a tough job, given the fact that you need to maintain consistency. Well, that shall not be the case with Flutter, where you need to just write the code once, and you are good to go!

This saves a lot of time and resources that go into the development and testing of two separate codes. But, you need to test the end products on the different platforms separately in this case too.

High productivity

Since Flutter is cross-platform, you can use the same code base for your iOS and Android app. This can definitely save you both time and resources.

Lesser Coding

Flutter’s Dart programming language is strongly typed and object-oriented in nature. In Flutter, the programming style is declarative and reactive. Because JavaScript bridge is not necessary for Flutter, the start-up time of the app enhances.

Flutter Key Features

1. Hot Reload

The changes made by the developers can be seen instantaneously with Hot Reload. This feature is super-handy for developers as it makes the changes visible in the app itself. As the changes made are visible within seconds, developers can fix the bugs in no time.

The team can experiment with new features and improvise them continuously. Thus, this feature enables developers and designers to have complete freedom and boosts their creativity further.

2. Cross-Platform Development

CPD saves time, energy and money. With Flutter, you need to write the code once, maintain and can use that for two apps. The need has gone for developing a different code for a different platform. With Flutter, you can try developing for the Fuchsia platform which is a trial OS in process at Google.

3. Accessible Native Features and SDKs

Your app development process gets easy and delightful through Flutter’s native codes, third-party integrations, and platform APIs. Therefore, you can easily access the native features and SDKs on both Android and iOS platforms and reuse the widely-used programming languages such as Kotlin and Swift.

4. Minimal Code

Flutter is developed using Dart programming language. Dart uses JIT and AOT compilation that helps improve the overall startup time, functioning and accelerates the performance. JIT enhances the development system with the hot reload function. It refreshes the UI without putting in the effort to building a new one.

5. Widgets

In Flutter, the widgets are given an upper hand. It is capable of developing customizable and complex widgets. Most importantly, Flutter has all the sets of widgets from Material Design and Cupertino pack and it helps to provide a glitch-free experience in this case over and above all the other platforms.

6. Native Feel and Features

Flutter enables you to use your existing code Java, Obj-C and Swift to gain the key to native features which are platform specific. Camera and Geo location are features connected with the use of native languages and offers you the convenience of working in the native language and, it provides access to the native features of both iOS and Android platforms.