1.2 环境搭建与项目结构

本节将带你完成 Flutter 开发环境的搭建了解项目的目录结构并掌握日常开发中最常用的命令行工具。一、Flutter SDK 安装与配置1.1 系统要求操作系统最低要求WindowsWindows 10 64-bitx86-64macOSmacOS 10.14Mojave及以上Linux64 位系统glibc 2.17 及以上1.2 下载 Flutter SDK方式一官网下载推荐前往 Flutter 官方网站下载对应平台的 SDK 压缩包https://flutter.dev/docs/get-started/install方式二通过 Git 克隆适合持续更新gitclone https://github.com/flutter/flutter.git-bstable1.3 配置环境变量macOS / Linux编辑~/.zshrc或~/.bashrc添加以下内容exportPATH$PATH:/你的安装路径/flutter/bin使配置生效source~/.zshrcWindows打开「系统属性」→「高级」→「环境变量」在「Path」中新增 Flutter SDK 的bin目录路径例如C:\flutter\bin1.4 国内镜像配置中国用户必配由于网络原因建议配置国内镜像加速# 添加到环境变量exportPUB_HOSTED_URLhttps://pub.flutter-io.cnexportFLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn1.5 安装 Android / iOS 开发依赖Android 开发安装 Android Studio打开 Android Studio → SDK Manager安装Android SDKAndroid SDK Platform-ToolsAndroid SDK Build-Tools接受 Android 许可协议flutter doctor --android-licensesiOS 开发仅 macOS安装 XcodeApp Store安装命令行工具sudoxcode-select--install安装 CocoaPodssudogeminstallcocoapods二、项目目录结构解析使用以下命令创建一个新的 Flutter 项目flutter create my_appcdmy_app创建完成后项目目录结构如下my_app/ ├── android/ # Android 原生工程Java/Kotlin │ ├── app/ │ │ └── src/main/ │ │ ├── AndroidManifest.xml │ │ └── kotlin/... │ └── build.gradle │ ├── ios/ # iOS 原生工程Swift/Objective-C │ ├── Runner/ │ │ ├── AppDelegate.swift │ │ └── Info.plist │ └── Podfile │ ├── lib/ # ⭐ Dart 代码主目录核心开发目录 │ └── main.dart # 应用程序入口文件 │ ├── test/ # 单元测试与 Widget 测试目录 │ └── widget_test.dart │ ├── web/ # Web 平台支持目录如已启用 │ ├── linux/ # Linux 平台支持目录 ├── macos/ # macOS 平台支持目录 ├── windows/ # Windows 平台支持目录 │ ├── assets/ # 静态资源目录图片、字体、JSON 等 │ ├── pubspec.yaml # ⭐ 项目配置文件依赖、资源声明 ├── pubspec.lock # 锁定依赖版本自动生成勿手动修改 ├── analysis_options.yaml # Dart 静态分析规则配置 └── README.md # 项目说明文档2.1 核心文件详解lib/main.dart— 程序入口importpackage:flutter/material.dart;voidmain(){runApp(constMyApp());// 启动 Flutter 应用}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:Flutter Demo,home:constMyHomePage(),);}}pubspec.yaml— 项目配置文件name:my_app# 项目名称description:A new Flutter project.version:1.0.01# 版本号构建号environment:sdk:3.0.0 4.0.0# Dart SDK 版本限制dependencies:flutter:sdk:flutter# 在此添加第三方依赖例如# http: ^1.0.0flutter:assets:# 声明静态资源-assets/images/fonts:# 声明自定义字体-family:MyFontfonts:-asset:assets/fonts/MyFont.ttf2.2 推荐的lib/目录规范结构随着项目规模扩大建议按以下方式组织lib/目录lib/ ├── main.dart # 入口文件 ├── app.dart # 应用根 Widget │ ├── pages/ # 页面层各功能页面 │ ├── home/ │ │ ├── home_page.dart │ │ └── home_controller.dart │ └── detail/ │ └── detail_page.dart │ ├── widgets/ # 可复用组件 │ ├── custom_button.dart │ └── loading_widget.dart │ ├── models/ # 数据模型 │ └── user_model.dart │ ├── services/ # 网络请求与业务逻辑 │ └── api_service.dart │ ├── utils/ # 工具函数 │ └── date_utils.dart │ └── constants/ # 常量定义颜色、字符串等 ├── colors.dart └── strings.dart三、常用命令与工具3.1flutter doctor— 环境检测flutter doctor是配置环境时最重要的诊断命令它会自动检测开发环境是否配置完整。flutter doctor示例输出Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.19.0, on macOS 14.3) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.1) [✓] VS Code (version 1.87.0) [✓] Connected device (2 available) [✓] Network resources • No issues found!常用参数命令作用flutter doctor快速检测显示摘要flutter doctor -v显示详细检测信息flutter doctor --android-licenses接受 Android 许可证提示所有条目显示[✓]才表示环境配置完成。若有[✗]或[!]按提示修复即可。3.2flutter run— 运行应用flutter run常用参数命令说明flutter run在默认连接设备上运行flutter run -d chrome在 Chrome 浏览器中运行Webflutter run -d emulator-5554指定设备 ID 运行flutter run --release以 Release 模式运行性能最优flutter run --profile以 Profile 模式运行性能分析flutter run --flavor staging指定 flavor 运行多环境构建运行时热键Hot Reload / Hot Restart在flutter run运行状态下终端支持以下快捷键按键功能rHot Reload热重载保留状态RHot Restart热重启重置状态p显示/隐藏组件边界 Widget Boundsq退出应用3.3flutter build— 构建应用flutter build目标平台各平台构建命令命令说明flutter build apk构建 Android APK默认 Releaseflutter build apk --debug构建 Android Debug APKflutter build apk --split-per-abi按 ABI 分包构建减小包体积flutter build appbundle构建 Android App Bundle推荐上架 Google Playflutter build ios构建 iOS需要 macOS Xcodeflutter build ipa构建 iOS IPA 安装包flutter build web构建 Web 产物输出到build/web/flutter build macos构建 macOS 应用flutter build windows构建 Windows 应用flutter build linux构建 Linux 应用构建产物路径build/ ├── app/outputs/flutter-apk/app-release.apk # Android APK ├── app/outputs/bundle/release/app-release.aab # Android Bundle ├── ios/iphoneos/Runner.app # iOS 产物 └── web/ # Web 产物3.4 其他常用命令命令功能说明flutter create 项目名创建新项目flutter pub get获取/更新依赖包flutter pub add 包名添加依赖包flutter pub remove 包名移除依赖包flutter pub upgrade升级所有依赖到最新版本flutter clean清除构建缓存解决奇怪报错时使用flutter test运行所有测试flutter analyze静态分析代码检查潜在问题flutter format .格式化所有 Dart 代码flutter upgrade升级 Flutter SDK 到最新稳定版flutter channel查看/切换 Flutter 发布渠道flutter devices列出所有已连接的设备flutter emulators列出可用的模拟器四、推荐开发工具工具说明下载地址VS Code轻量推荐日常开发https://code.visualstudio.comAndroid Studio功能全面官方支持https://developer.android.com/studioFlutter 插件VS Code提供代码补全、调试、Hot ReloadVS Code 插件市场搜索 “Flutter”Dart 插件VS CodeDart 语言支持VS Code 插件市场搜索 “Dart”FlutterFire CLIFirebase 集成工具dart pub global activate flutterfire_cli小结知识点要点SDK 安装下载后配置PATH环境变量国内用户需配置镜像目录结构lib/是核心pubspec.yaml管理依赖与资源flutter doctor环境配置完成后必须全部显示[✓]flutter run支持热重载r和热重启R大幅提升开发效率flutter build根据目标平台选择对应子命令Release 模式用于生产发布 下一节1.3 Dart 语言基础— 了解 Flutter 的编程语言基础