Flutter Lesson 1: Flutter Introduction and Environment Setup

Flutter has become a popular framework for cross-platform app development. In this lesson, we'll introduce you to the basic concepts and advantages of Flutter, and guide you through the detailed steps to set up a complete development environment on different operating systems, laying the foundation for your future Flutter development journey.

I. What is Flutter?

Flutter is an open-source UI software development kit (SDK) launched by Google in 2017. It is used to build high-performance, high-fidelity cross-platform applications. It allows developers to use a single codebase to create apps that run on Android, iOS, Windows, macOS, Linux, and the web.

The core features of Flutter include:

• Single codebase: Write once, run on multiple platforms.
• Self-painted UI: Instead of relying on platform-native controls, it renders the interface itself, ensuring consistency across platforms.
• High performance: Near-native app performance with smooth scrolling at 60fps (frames per second).
• Hot Reload: Quickly view the effects of code changes, significantly improving development efficiency.
• Rich component library: Offers a large number of ready-to-use Material Design and Cupertino (iOS-style) components.

II. Cross-platform Advantages and Application Scenarios

Advantages of Cross-platform Development

1. High development efficiency
   • One set of code runs on multiple platforms, reducing development and maintenance costs.
   • The Hot Reload feature allows developers to see the effects of code changes almost in real-time.
2. UI consistency
   • Maintains a consistent user experience and visual effect across different platforms.
   • Avoids interface inconsistencies caused by differences in platform-native controls.
3. Excellent performance
   • Compared to bridging technologies like React Native, Flutter compiles directly to native code.
   • The self-painting UI engine reduces cross-platform communication overhead.
4. Strong community support
   • Officially supported and continuously updated by Google.
   • A rich ecosystem of third-party libraries and plugins.

Typical Application Scenarios

1. Startup products: Quickly validate product ideas and reduce initial development costs.
2. Internal enterprise applications: Tools that need to be deployed across multiple platforms with relatively fixed functions.
3. Content display apps: News, e-commerce, blogs, and other apps focused on UI display.
4. MVP (Minimum Viable Product): Rapidly develop product prototypes for market testing.
5. Apps requiring highly customized UI: Flutter's self-painting engine can achieve complex UI effects.

Well-known apps such as Alibaba, Tencent, Google Ads, and BMW have adopted Flutter for part or all of their functions.

III. Development Environment Configuration

Setting up a Flutter development environment requires installing multiple components, and the configuration steps vary slightly across operating systems.

1. Configuration for Windows

Step 1: Install Flutter SDK

1. Visit the Flutter official download page: https://flutter.dev/docs/get-started/install/windows
2. Download the latest Flutter SDK zip package.
3. Extract it to the directory where you want to install Flutter (e.g., C:\src\flutter).
4. Configure environment variables:
   • Open "Control Panel > System and Security > System > Advanced system settings > Environment Variables".
   • Find Path in the user variables and click "Edit".
   • Click "New" and add the path to the bin directory of Flutter (e.g., C:\src\flutter\bin).
   • Click "OK" to save the settings.

Step 2: Install Android Studio

1. Download Android Studio: https://developer.android.com/studio
2. Run the installer and follow the wizard to install.
3. On first launch, you'll be prompted to install components like Android SDK, Android SDK Platform, and Android Virtual Device. Check all and install them.

Step 3: Configure Android Environment

1. Launch Android Studio.
2. Open "File > Settings > Appearance & Behavior > System Settings > Android SDK".
3. Ensure that the Android version corresponding to your target device is installed.
4. Configure Android environment variables:
   • Create a new system variable ANDROID_HOME with the value being your Android SDK path (usually C:\Users\YourUsername\AppData\Local\Android\Sdk).
   • Add %ANDROID_HOME%\platform-tools to the Path variable.

2. Configuration for macOS

Step 1: Install Flutter SDK

1. Visit the Flutter official download page: https://flutter.dev/docs/get-started/install/macos
2. Download the latest Flutter SDK zip package.
3. Extract it to the directory where you want to install Flutter (e.g., ~/development/flutter).
4. Configure environment variables:
   • Open the terminal and enter open ~/.bash_profile or open ~/.zshrc (depending on the shell you use).
   • Add the following content: export PATH="$PATH:~/development/flutter/bin".
   • Save the file and run source ~/.bash_profile or source ~/.zshrc to make the configuration take effect.

Step 2: Install Android Studio

1. Download Android Studio: https://developer.android.com/studio
2. Open the downloaded android-studio-ide-xxx-mac.dmg file and drag it to the Applications folder.
3. On first launch, install the recommended components.

Step 3: Install Xcode (Required for iOS Development)

1. Open the App Store, search for and install Xcode (over 10GB, requires an Apple ID).
2. After installation, open Xcode and agree to the license agreement.
3. Install Xcode command-line tools:

xcode-select --install

4 . Ensure the Xcode license agreement is signed:

sudo xcodebuild -license accept

IV. Configure Emulator / Real Device Debugging Environment

Configure Android Emulator

1. Launch Android Studio.
2. Click "Configure > AVD Manager" on the welcome screen.
3. Click "Create Virtual Device".
4. Select a device model (e.g., Pixel 6) and click "Next".
5. Choose a system image (it's recommended to select a version with Google APIs), click "Download" to download it.
6. After the download is complete, click "Next" and then "Finish" to create the emulator.
7. Click the "Launch" button in the emulator's action bar to run the emulator.

Configure iOS Simulator (macOS Only)

1. Open Xcode.
2. Click "Xcode > Open Developer Tool > Simulator".
3. The first launch may take a few minutes.
4. You can select different devices and iOS versions through the "Hardware > Device" menu.

Configure Real Device Debugging

Android Real Device

1. On your Android device, open "Settings > About Phone".
2. Tap "Build Number" 7 times continuously to enable developer mode.
3. Return to Settings and enter "Developer Options".
4. Enable "USB Debugging" and "Install via USB" options.
5. Connect your phone to the computer using a USB cable.
6. On the authorization prompt that appears on your phone, check "Always allow this computer" and click "Allow".

iOS Real Device (macOS Only)

1. Connect your iPhone to your Mac using a USB cable.
2. Open Xcode and click "Xcode > Preferences > Accounts".
3. Add your Apple ID (a free account can also be used for debugging).
4. In Xcode, open the ios directory of the Flutter project (ios/Runner.xcworkspace).
5. In the project settings, select your device as the run target.
6. For the first run, you need to trust the developer certificate on your iPhone:
   • Open "Settings > General > Device Management" on your iPhone.
   • Select your Apple ID and click "Trust".

V. Verify Environment: flutter doctor Command Analysis and Troubleshooting

flutter doctor is a very useful command provided by Flutter to check if the development environment is configured correctly.

Run flutter doctor

1. Open the terminal (use Command Prompt or PowerShell on Windows).
2. Enter the following command:

flutter doctor

3 . The command will check all necessary components and display the results.

Output Analysis

The command output will show the status of each component in a list:

• ✅ Indicates that the component is installed and configured correctly.
• ❌ Indicates that the component is missing or misconfigured.
• ⚠️ Indicates a warning, which may affect some functions.

A typical successful output is as follows:

[✓] Flutter (Channel stable, 3.10.0, on macOS 13.3.1 22E261 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] Connected device (3 available)
[✓] Network resources

Common Issues and Solutions

1. Android license status unknown

flutter doctor --android-licenses

Then enter y as prompted to accept all license agreements.

2 . Android Studio-related issues
- Ensure the Flutter and Dart plugins are installed:
In Android Studio, go to "File > Settings > Plugins", search for and install the "Flutter" plugin (which will automatically install the Dart plugin).

3 . Xcode-related issues
- Ensure Xcode is installed correctly and updated to the latest version.
- Run sudo xcode-select -s /Applications/Xcode.app/Contents/Developer to configure the Xcode path.

4 . Connected device not detected
- Ensure the device has debugging mode enabled.
- Try reconnecting the device.
- Restart the adb service (Android):

adb kill-server
adb start-server

5 . Network issues
- Flutter may need access to Google services. If network access is restricted, you can configure a mirror:

# Temporary configuration
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# Permanent configuration (macOS/Linux)
echo 'export PUB_HOSTED_URL=https://pub.flutter-io.cn' >> ~/.bash_profile
echo 'export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn' >> ~/.bash_profile
source ~/.bash_profile

VI. Integrated Development Environment (IDE) Selection

Although Flutter can be developed using any text editor, the following IDEs are recommended for a better development experience:

1. Android Studio
   • Google's official IDE with comprehensive support for Flutter.
   • Built-in emulator management and debugging tools.
   • Offers features like code completion, refactoring, and syntax highlighting.
2. Visual Studio Code
   • A lightweight editor with fast startup speed.
   • Requires the installation of Flutter and Dart plugins.
   • Supports core features such as Hot Reload and debugging.
   • Cross-platform with a consistent experience on Windows, macOS, and Linux.
3. IntelliJ IDEA
   • Based on the same platform as Android Studio, with similar features.
   • The Community Edition is free, while the Ultimate Edition requires payment.
   • Also requires the installation of Flutter and Dart plugins.