Getting Started with Flutter: Motivation, Environment Setup, and Code Walkthrough

1. Introduction

Flutter has been around since the 2015 Google I/O conference, with its first alpha released in May 2017 and the stable 1.0 version in December 2018. The recent Flutter 3 release supports six major platforms: Android, iOS, Windows, Web, macOS, and Linux, and has attracted over 158k stars on GitHub (as of November 2023).

The author admits to having delayed learning Flutter due to time constraints and now plans to study it because the company app must be adapted for HarmonyOS and to build a multi‑platform information‑flow app.

1.1 Motivation for Learning Flutter

HarmonyOS NEXT removes the Linux kernel and Android AOSP, supporting only the Hap format.

The company's app primarily serves Huawei users, making HarmonyOS adaptation necessary.

1.2 Recommended Learning Approach

If you already have Android experience, the fastest way is to compare Android concepts with Flutter, read the official "Flutter for Android developers" guide, build a small Flutter app, and deepen knowledge by solving problems encountered during development.

2. Flutter Development Environment Setup

2.1 Download Flutter SDK

Download the latest stable SDK (e.g., flutter_windows_3.13.9-stable.zip ) and extract it to a directory such as D:\Coding\flutter .

2.2 Update PATH

Add the Flutter bin directory to the system PATH . After updating, open a new terminal and run flutter --version to verify.

2.3 (Optional) Use Domestic Mirrors

If you cannot access the internet directly, set the following environment variables to use Chinese mirrors:

PUB_HOSTED_URL – Dart package repository

FLUTTER_STORAGE_BASE_URL – Flutter binary storage

Examples of mirror URLs: pub.flutter-io.cn , mirrors.tuna.tsinghua.edu.cn/dart-pub , mirrors.cloud.tencent.com/flutter , etc.

2.4 Run flutter doctor

Execute flutter doctor to check missing dependencies. Install Android SDK command‑line tools and accept Android licenses using flutter doctor --android-licenses . Resolve any remaining warnings (e.g., missing CocoaPods on macOS).

2.5 Choose an IDE

Common IDEs are Visual Studio Code and Android Studio/IntelliJ IDEA. Install the Flutter and Dart plugins in the chosen IDE.

2.5.1 VS Code

Open the Extensions view, install Flutter and Dart , then run Flutter: Run Flutter Doctor from the Command Palette.

2.5.2 Android Studio

Open Plugins → Marketplace, search for Flutter and Dart , and install them.

2.6 First Project Experience

You can create a project via the command line, Android Studio, or VS Code. The command‑line example:

flutter create --project-name hello_flutter --org cn.coderpig --platforms=android,ios --android-language java --ios-language objc hello_flutter

After creation, you can enable desktop platforms with:

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

Run flutter devices to list available devices and flutter run -d to launch the app.

3. Line‑by‑Line Walkthrough of main.dart

3.1 Imports

import 'package:flutter/material.dart';

Shows how to import relative paths and use aliases (e.g., import 'package:http/http.dart' as http; ).

3.2 main() Function

void main() {
  runApp(const MyApp());
}

Entry point that launches the Flutter app.

3.3 MyApp Class

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Stateless widget that sets up the app title, theme, and home page.

3.4 MyHomePage Class

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State
createState() => _MyHomePageState();
}

Stateful widget with a title property.

3.5 _MyHomePageState Class

class _MyHomePageState extends State
{
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children:
[
            const Text('You have pushed the button this many times:'),
            Text('$_counter', style: Theme.of(context).textTheme.headlineMedium),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Shows state handling with setState , a counter, and UI composition.

3.6 Adding a Decrement Button

void _decrementCounter() {
  setState(() {
    _counter--;
  });
}
// In the Scaffold's floatingActionButton:
floatingActionButton: Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    FloatingActionButton.extended(
      onPressed: _incrementCounter,
      icon: Icon(Icons.add),
      label: Text('Increment'),
    ),
    SizedBox(height: 10),
    FloatingActionButton.extended(
      onPressed: _decrementCounter,
      icon: Icon(Icons.remove),
      label: Text('Decrement'),
    ),
  ],
);

Demonstrates how to extend the demo with a second button that decreases the counter.

3.7 Project Structure Overview

hello_flutter/
│── .dart_tool/          # Auto‑generated Flutter files
│── .idea/               # IDE configuration
├── android/             # Native Android project
├── ios/                 # Native iOS project
├── lib/                 # ★ Flutter source code
│   └── main.dart        # ★ Entry point
├── linux/               # Linux platform files
├── macos/               # macOS platform files
├── test/                # Test files
├── web/                 # Web platform files
├── windows/              # Windows platform files
├── .metadata            # Dart metadata
├── analysis_options.yaml # Linter configuration
├── pubspec.lock         # Dependency lock file
└── pubspec.yaml         # ★ Project configuration (dependencies, assets, etc.)

The pubspec.yaml defines the project name, description, SDK constraints, dependencies (e.g., http ), and assets.

With this foundation, the reader can start building Flutter apps, adapt them for HarmonyOS, and explore further tutorials that compare Android concepts with Flutter.