Master Flutter: From Environment Setup to Hybrid App Development

Introduction

Flutter is Google’s open‑source UI toolkit that enables developers to build high‑performance applications for mobile, web, desktop, and embedded platforms using a single Dart codebase. Compared with React Native, Flutter renders directly via Skia, offering superior performance.

1. Environment Configuration

1.1 Download Flutter SDK

git clone https://github.com/flutter/flutter.git

1.2 Set Environment Variables

# FLUTTER_HOME is the path to the cloned Flutter folder
export FLUTTER_HOME=/Users/.../flutter
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin

1.3 Refresh Variables

source ~/.bash_profile
source ~/.zshrc   # if using zsh

1.4 Development Tools

Xcode + Android Studio (recommended)

Visual Studio Code

1.5 Android Studio Plugin Installation

Install the Flutter and Dart plugins via Preferences → Plugins → Marketplace .

1.6 Install Android SDK Command‑line Tools

Enable Android SDK Command‑line Tools in SDK Tools section of Android Studio.

1.7 Run flutter doctor

If you encounter Unable to find bundled Java version on Flutter , execute:

cd /Applications/Android\ Studio.app/Contents/jre
ln -s ../jre jdk
ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk
flutter doctor

2. Project Creation

2.1 Create a Flutter Application

flutter create my_app

2.2 Create a Flutter Module for Native Integration

flutter create --template module my_module

2.3 Project Structure

my_app/
  .dart_tool/      # dependency metadata
  .idea/          # IDE configuration
  android/        # Android project
  ios/            # iOS project
  lib/            # Dart source code
  test/           # Unit tests
  web/            # Web project
  pubspec.yaml    # package configuration

3. Programming Paradigm

Flutter uses a declarative UI model written in Dart, which focuses on *what* the UI should look like rather than *how* to build it. This contrasts with imperative programming that describes step‑by‑step UI updates.

3.1 Declarative Example

When a state variable changes, the framework automatically rebuilds the affected widgets, eliminating manual UI updates.

3.2 Imperative vs Declarative Comparison

In imperative code (e.g., native Android or iOS), developers must manually locate UI controls and update their properties. In declarative Flutter code, the engine tracks state changes and updates the UI tree automatically.

4. Core Architecture

Flutter is organized into three layers:

4.1 Embedder

The platform‑specific layer that creates rendering surfaces, handles threads, and integrates with the host OS.

4.2 Engine

Implemented mainly in C++, the engine provides low‑level services such as Skia graphics, text layout, file/network I/O, accessibility, plugin architecture, and the Dart runtime.

4.3 Framework

A Dart‑based UI SDK offering widgets, animation, painting, gestures, and layout. It builds on top of the engine and is composed of:

Foundation classes (animation, painting, gestures)

Rendering layer (RenderObject tree)

Widget layer (composable UI components)

Material & Cupertino libraries (design‑system widgets)