如何安装配置Flutter开发环境以及真机运行hello world

# 如何安装配置Flutter开发环境以及真机运行hello world

## 前言

Flutter是Google推出的跨平台移动应用开发框架，支持iOS、Android、Web等多平台开发。本文将详细介绍从零开始配置Flutter开发环境到在真机上运行第一个Hello World应用的全过程，适合初学者快速上手。

## 一、系统要求

在开始安装前，请确保您的系统满足以下最低要求：

### Windows系统
- 操作系统：Windows 10或更高版本（64位）
- 磁盘空间：1.32 GB（不包括IDE/tools）
- 工具：PowerShell 5.0+和Git for Windows

### macOS系统
- 操作系统：macOS 10.14 (Mojave)或更高版本
- 磁盘空间：2.8 GB（不包括IDE/tools）
- 工具：bash, mkdir, rm, git, curl, unzip, which

### Linux系统
- 操作系统：Ubuntu 20.04 LTS或更高版本
- 磁盘空间：600 MB（不包括IDE/tools）
- 工具：bash, mkdir, rm, git, curl, unzip, which

## 二、安装Flutter SDK

### 1. 下载Flutter SDK
访问Flutter官网下载页面（https://flutter.dev/docs/get-started/install），选择适合您操作系统的安装包。

**Windows用户**：
```bash
# 使用PowerShell下载
Invoke-WebRequest -Uri https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_3.13.0-stable.zip -OutFile flutter.zip

macOS/Linux用户：

curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.13.0-stable.zip

2. 解压安装包

将下载的zip包解压到您希望安装的目录（建议不要放在需要管理员权限的目录）：

Windows：

Expand-Archive flutter.zip -DestinationPath C:\src\flutter

macOS/Linux：

unzip flutter_macos_3.13.0-stable.zip -d ~/development

3. 配置环境变量

将Flutter添加到PATH环境变量中：

Windows： 1. 搜索并打开”编辑系统环境变量” 2. 点击”环境变量”按钮 3. 在”用户变量”下找到Path，点击编辑 4. 添加新的路径：C:\src\flutter\bin

macOS/Linux： 编辑~/.bashrc或~/.zshrc文件，添加：

export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"

然后运行：

source ~/.bashrc

三、安装依赖工具

运行以下命令检查缺失的依赖：

flutter doctor

1. 安装Android Studio（Android开发必需）

1. 下载并安装Android Studio（https://developer.android.com/studio）
2. 启动Android Studio，完成初始设置
3. 安装Android SDK：
   • 打开”Preferences > Appearance & Behavior > System Settings > Android SDK”
   • 确保勾选了Android SDK Platform 33+
   • 点击”Apply”安装

2. 配置Android设备

使用物理设备：

1. 启用开发者选项（设置 > 关于手机 > 连续点击版本号7次）
2. 启用USB调试模式
3. 通过USB连接电脑

使用模拟器：

1. 在Android Studio中打开”AVD Manager”
2. 创建新的虚拟设备（推荐Pixel 5 API 33）

3. 安装Xcode（iOS开发必需，仅macOS）

xcode-select --install
sudo xcodebuild -license accept

四、配置编辑器

推荐使用VS Code：

1. 安装VS Code（https://code.visualstudio.com/）
2. 安装Flutter和Dart插件：
   • 打开扩展市场（Ctrl+Shift+X）
   • 搜索并安装”Flutter”和”Dart”

五、创建并运行第一个Flutter应用

1. 创建新项目

flutter create hello_world
cd hello_world

2. 连接设备

确保设备已连接并被识别：

flutter devices

应该能看到类似输出：

2 connected devices:

iPhone 13 (mobile) • 00008030-00123456789ABC • ios • iOS 16.4
Chrome (web)       • chrome                   • web • Google Chrome 114.0.5735.90

3. 运行应用

flutter run

首次运行会下载必要的依赖，可能需要几分钟时间。成功后您将在设备上看到默认的Flutter计数器应用。

六、修改为Hello World应用

1. 打开lib/main.dart文件
2. 替换全部内容为：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello World'),
        ),
        body: const Center(
          child: Text('Hello, Flutter World!'),
        ),
      ),
    );
  }
}

1. 保存文件，应用会自动热重载（如果没有，按r键手动触发）

七、常见问题解决

1. Flutter doctor显示问题

• Android license问题：

  flutter doctor --android-licenses
  

  全部输入y接受

• Xcode未配置（macOS）：

  sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  

2. 设备未识别

• 检查USB调试是否开启
• 尝试更换USB线或端口
• 对于Android设备，可能需要安装驱动程序（Windows）

3. 网络问题

在中国大陆可能会遇到网络连接问题，可以设置镜像：

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

八、下一步学习建议

1. 阅读Flutter官方文档（https://flutter.dev/docs）
2. 尝试修改UI元素（颜色、字体、布局等）
3. 学习状态管理（如setState、Provider等）
4. 探索Flutter的热重载功能，实时查看修改效果

结语

通过本文，您已经成功搭建了Flutter开发环境并在真机上运行了第一个应用。Flutter的强大之处在于其快速的开发周期和跨平台能力，接下来可以继续探索Flutter的各种组件和功能，开始您的跨平台应用开发之旅！ “`

这篇文章共计约1900字，包含了从环境配置到真机运行的完整流程，采用Markdown格式编写，适合发布到技术博客或文档平台。如需调整内容细节或补充特定平台的信息，可以进一步修改完善。