Banner

Flutter 界面介绍及安装

2026-10-09

Flutter 是 Google 的开源跨平台 UI 框架，用 Dart 写一套代码，可以运行到 iOS、Android、Web、Windows、macOS、Linux 等平台。 它的界面不是简单调用原生控件，而是通过自己的渲染引擎把 UI 画出来，所以多端一致性比较好。

Flutter 界面结构

Flutter 界面通常分三层理解：

层级作用常见内容
Framework描述 UI、处理状态和交互Widget、布局、动画、手势
Engine负责渲染、文本、Dart 运行时Impeller / Skia、Dart VM
Embedder把 Flutter 嵌入具体平台iOS、Android、Web、桌面


日常开发主要接触的是 Framework 层。

页面骨架：Scaffold / CupertinoPageScaffold

Android / 通用风格常用 Scaffold，它提供标准页面结构：

  • AppBar：顶部导航栏
  • body：页面主体
  • BottomNavigationBar：底部 Tab
  • FloatingActionButton：悬浮按钮
  • Drawer：侧边菜单
  • SnackBar：轻量提示

iOS 风格则常用 CupertinoPageScaffold 和 CupertinoNavigationBar。

设计风格：Material 与 Cupertino

  • Material：偏 Android / 现代扁平风格，入口是 MaterialApp。
  • Cupertino：偏 iOS 风格，入口是 CupertinoApp。

从 Flutter 3.47 开始，Material 和 Cupertino 已逐步解耦为独立包 material_ui / cupertino_ui，但旧写法仍然兼容，新项目可以按团队节奏选择是否迁移。

渲染引擎：Impeller 正在成为默认

传统渲染引擎是 Skia，新一代引擎是 Impeller。Impeller 通过预编译着色器减少动画卡顿，已在 iOS、Android 和桌面端逐步成为默认渲染后端。

Flutter 入门部署手册

1. 环境要求

  • macOS 12 或更高版本
  • Xcode（开发 iOS/macOS 时需要）
  • Android Studio 或命令行工具（开发 Android 时需要）
  • Git
  • Flutter 3.x 稳定版

2. 安装 Flutter

使用 Homebrew 安装

brew install --cask flutter

手动安装

如果不想用 Homebrew，也可以从 Flutter 官网下载 SDK，解压后把 flutter/bin 加入 PATH：

export PATH="$PATH:$HOME/flutter/bin"

建议写入 ~/.zshrc 或 ~/.bash_profile，避免每次重启终端后失效。

3. 环境检查

flutter doctor

输出中每一项前面的符号含义：

  • ✅ 表示该依赖已就绪
  • ❗ 表示需要补充安装
  • ❌ 表示缺少关键依赖

常见需要补装的项：

# iOS 开发
sudo xcode-select --switch /Applications/Xcode.app
sudo xcodebuild -runFirstLaunch

# Android 开发
# 在 Android Studio 中安装 Android SDK、Android SDK Platform-Tools、Android Emulator

# Chrome Web 开发
brew install --cask google-chrome

再次运行 flutter doctor，确认没有阻塞项即可。

4. 创建项目

flutter create hello_flutter
cd hello_flutter

5. 项目结构

hello_flutter/
├── android/          # Android 平台工程
├── ios/              # iOS 平台工程
├── macos/            # macOS 平台工程
├── web/              # Web 平台工程
├── windows/          # Windows 平台工程
├── linux/            # Linux 平台工程
├── lib/              # Dart 源码目录
│   └── main.dart     # 应用入口
├── test/             # 测试文件
├── pubspec.yaml      # 依赖与资源配置
├── pubspec.lock      # 依赖锁定文件
├── README.md         # 项目说明
└── .gitignore        # Git 忽略规则

开发时主要关注 lib/ 和 pubspec.yaml。平台目录除非需要写原生插件，否则一般不需要手动修改。

6. 常用命令

# 安装依赖
flutter pub get

# 运行应用
flutter run

# 指定设备运行
flutter run -d chrome
flutter run -d macos
flutter run -d <device_id>

# 列出可用设备
flutter devices

# 代码检查
flutter analyze

# 格式化代码
dart format .

# 运行测试
flutter test

# 清理构建缓存
flutter clean

7. 打包发布

Android

flutter build apk --release

产物位置：

build/app/outputs/flutter-apk/app-release.apk

如果同时需要拆分 ABI 以减小包体积：

flutter build apk --split-per-abi

iOS

flutter build ios --release

之后需要在 Xcode 中打开 ios/Runner.xcworkspace，配置签名、Bundle ID 和证书，再通过 Archive 导出 IPA。

Web

flutter build web --release

产物位置：

build/web/

可直接部署到 Nginx、Cloudflare Pages、Vercel 等静态托管服务。

macOS

flutter build macos --release

产物位置：

build/macos/Build/Products/Release/

8. 常见问题

flutter doctor 提示许可证未接受

flutter doctor --android-licenses

依赖安装失败

flutter clean
flutter pub get

热重载不生效

修改了 main() 函数签名、资源文件或原生配置时，热重载不会生效，需要按 R 完整重启。

iOS 构建失败

确认 Xcode 命令行工具已设置：

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

Android 构建失败

确认 android/local.properties 中 flutter.sdk 指向正确的 Flutter 安装路径。如果不存在，运行一次 flutter build apk 通常会自动生成。

端口被占用

flutter run -d chrome --web-port=8080


5
Flutter
Flutter能够便捷、快速地开发精美移动端及多端应用
2026-10-09
8
目录