2、开发环境准备:Flutter SDK安装与配置、Android Studio配置、Java/Kotlin环境检查、创建第一个Flutter Module
说实话,很多同学卡在集成这一步,不是因为代码写不出来,而是环境没搭好。我见过太多人花了一整天装Flutter,结果跑个demo都报红。今天咱们就把这事一次性捋清楚。
2.1 Flutter SDK 安装与配置
先下载Flutter SDK。我个人习惯去官网拿稳定版,别追新,稳定才是王道。
下载地址:https://flutter.dev/docs/get-started/install
选你对应的操作系统,Windows、macOS、Linux都行。
下载完解压,放到一个你记得住的位置。比如我放的是 C:\flutter(Windows)或 /Users/你的名字/flutter(macOS)。
然后配置环境变量。把 flutter/bin 目录加到 PATH 里。为什么要加?因为终端要能找到 flutter 命令。
小技巧:配置完环境变量后,重启终端再执行 flutter --version。如果显示版本号,说明配置成功。我曾经遇到一个同学,配完没重启,折腾了半小时才发现。
接下来跑 flutter doctor。这个命令会检查你的环境缺什么。嗯,这里要注意:它可能会报一堆红叉,别慌,一个个解决就行。
flutter doctor
常见的几个问题:
- Android SDK 没找到 —— 后面会讲怎么配
- Xcode 没装(macOS) —— 去App Store装
- Chrome 没装 —— 如果你做Web开发,需要装一个
2.2 Android Studio 配置
Android Studio 是咱们的主力IDE。我建议用最新稳定版,别用预览版,坑多。
装好之后,打开 Plugins 市场,搜索 Flutter 插件,安装。它会自动帮你装好 Dart 插件。重启IDE,搞定。
注意:Flutter 插件和 Dart 插件版本要匹配。我遇到过插件版本不对,导致代码提示失效的情况。解决办法:去插件市场手动更新到最新。
然后配置 Android SDK。打开 File → Settings → Appearance & Behavior → System Settings → Android SDK。确保你装了以下组件:
| 组件 | 说明 |
|---|---|
| Android SDK Platform 33 或更高 | 编译目标版本 |
| Android SDK Build-Tools | 构建工具 |
| Android SDK Command-line Tools | 命令行工具 |
| Intel HAXM(Windows/macOS) | 模拟器加速 |
配完之后,在 flutter doctor 里应该能看到 Android Studio 那一项变绿了。
2.3 Java/Kotlin 环境检查
Flutter 集成到安卓项目,底层还是走 Java/Kotlin 的。所以 JDK 必须装。
打开终端,输入:
java --version
如果显示版本号,说明 JDK 已装。我建议用 JDK 17 或 11,太老的版本会报兼容性问题。
如果没有,去 Oracle官网 或 Adoptium 下载。装完记得配 JAVA_HOME 环境变量。
避坑指南:我曾经遇到一个项目,JDK 版本是 8,结果 Flutter 编译时报 Unsupported class file major version。换成 JDK 17 后问题消失。所以,别用太老的 JDK。
Kotlin 的话,Android Studio 自带 Kotlin 插件,一般不用单独装。但如果你用 IntelliJ IDEA,记得去插件市场装一下。
2.4 创建第一个 Flutter Module
环境配好了,咱们来创建第一个 Flutter Module。注意,这里不是创建 Flutter App,而是 Module。Module 是专门用来集成到安卓项目里的。
打开终端,进入你的项目目录。比如我习惯把所有项目放 ~/Projects 下。
cd ~/Projects
flutter create --template module my_flutter_module
这个命令会生成一个 my_flutter_module 文件夹。里面包含:
lib/—— Dart 代码目录android/—— 安卓壳工程ios/—— iOS 壳工程pubspec.yaml—— 依赖配置文件
打开 pubspec.yaml,你会看到:
name: my_flutter_module
description: A new Flutter module.
environment:
sdk: ">=3.0.0 <4.0.0"
dependencies:
flutter:
sdk: flutter
嗯,这里要注意:Module 的 pubspec.yaml 和普通 Flutter App 的几乎一样,唯一的区别是它没有 main.dart 里的 runApp()。因为 Module 是被宿主 App 调用的,不是独立运行的。
接下来,咱们写一个简单的页面。在 lib/ 下新建 main.dart:
import 'package:flutter/material.dart';
class MyFlutterModule extends StatelessWidget {
const MyFlutterModule({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Flutter Module')),
body: const Center(
child: Text('Hello from Flutter Module!'),
),
),
);
}
}
这个页面很简单,就是一个标题加一行文字。但别小看它,这是咱们集成到安卓的第一步。
核心知识点:Flutter Module 的本质是一个 可复用的 Flutter 组件库。它通过 FlutterEngine 和 FlutterFragment 与安卓原生代码通信。说白了,就是安卓端开一个窗口,把 Flutter 页面塞进去。
最后,验证一下 Module 能不能正常构建。在终端执行:
cd my_flutter_module
flutter build apk --debug
如果一切顺利,你会看到 BUILD SUCCESSFUL。如果报错,多半是环境问题,回头检查 flutter doctor 的输出。
2.5 本章知识体系
下面这张图帮你理清整个流程:
这张图把咱们今天做的事串起来了。从 Flutter SDK 开始,到 Android Studio 配置,再到 Java/Kotlin 环境检查,最后创建 Module。每一步都是下一步的前提。
个人经验:我刚开始做 Flutter 集成时,总想跳过环境检查这一步。结果每次编译报错都要回头查环境。后来我学乖了,每次新项目都先跑一遍 flutter doctor,确保全绿再动手。省下来的时间够喝三杯咖啡。
好了,环境准备好了。下一章咱们就正式把 Flutter Module 集成到安卓项目里。到时候你会看到,原来集成就这么简单。
公众号:蓝海资料掘金营,微信deep3321