Flutter开发入门总结

用户90561493152222025-04-02 14:07

一、flutter是什么

1.1定义

Flutter是基于Dart-OOP语言，支持移动、Web、桌面和嵌入式的跨平台开发框架。

可以先了解Dart的语法，然后在编码过程中慢慢熟悉。

Dart语法为其他语言向dart移植预留了许多关键字。

Dart语法融合了其他常用语法的许多特性。

1.2优势

 控制到像素，直接生成机器码，不需要经过Javascript的桥接损耗性能（相对于React Native）。

 声明式UI，即不需要像Native一样单独定义视图后向父容器中添加，而是可以直接通过对象嵌套声明元素属性和子元素来编写视图。

二、开发环境

1、外网是必需条件

2、学习中用到的网站

flutter.dev/docs 开发文档

flutterchina.club/ 中文网

pub.dev/flutter flutter插件

book.flutterchina.club/ flutter实战电子书

flutter-widget-livebook.blankapp.org/basics/intr... flutter widget效果一览

rxlabz.github.io/panache_web... 皮肤定制

2.1安装

 Flutter下载地址：flutter.io/sdk-archive...

在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要翻墙，也可以去Flutter github项目下去下载安装包，地址：github.com/flutter/flu... 。

将安装包zip解压到你想安装Flutter SDK的路径（如：C:\src\flutter；注意，不要将flutter安装到需要一些高权限的路径如C:\Program Files\）。 在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行，接下来，就可以在Flutter命令行运行flutter命令了。

 Android Studio

 Xcode（仅苹果系统）

2.2 添加环境变量

配置完环境变量后，即可在全局使用flutter指令。

2.2.1 Windows

添加环境变量到用户PATH。

  1. 转到 "控制面板>用户帐户>用户帐户>更改我的环境变量"
  2. 在"用户变量"下检查是否有名为"Path"的条目:
  3. 如果该条目存在， 追加 flutter\bin的全路径，使用 ; 作为分隔符
  4. 如果该条目不存在，创建一个新用户变量 Path ，然后将 flutter\bin 的全路径作为它的值.
  5. 重启Windows以应用此更改.

2.2.2 MacOS

打开终端，打开(或创建) $HOME/.bash_profile，添加路径。FLUTTER_INSTALL_PATH为flutter的安装路径 。

bash 复制代码 
1.	touch .bash_profile // 若无则创建 
2.	vim .bash_profile // 打开 
3.	// shift + i 进入insert模式 
4.	export PATH=[FLUTTER_INSTALL_PATH]/flutter/bin:$PATH // 写入路径
5.	//esc 退出insert模式 
6.	:wq // 保存并退出 
7.	source $HOME/.bash_profile  // 刷新当前终端窗口 
8.	echo $PATH  // 验证"flutter/bin"是否已在PATH中

2.3 环境检查

在命令行输入flutter doctor命令来查看是否还需要安装其它依赖。 该命令检查系统环境并在命令行窗口中显示报告。 Dart SDK已经在打包在Flutter SDK里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务，根据提示语完成安装。

三、开发与调试

3.1 VSCode的配置与使用

VSCode是一个轻量级编辑器，支持Flutter运行和调试。

  1. 启动 VSCode
  2. 调用 View>Command Palette...
  3. 输入 'install', 然后选择 Extensions: Install Extension action
  4. 在搜索框输入 flutter ，在搜索结果列表中选择 'Flutter', 然后点击 Install
  5. 选择 'OK' 重新启动 VS Code
  6. 验证配置： 调用 View>Command Palette... 输入 'doctor', 然后选择 'Flutter: Run Flutter Doctor' action 查看"OUTPUT"窗口中的输出是否有问题

3.2 创建Flutter应用

  1. 启动 VSCode
  2. 调用 View>Command Palette...
  3. 输入 'flutter', 然后选择 'Flutter: New Project' action
  4. 输入 Project 名称 (如myapp), 然后按回车键，这时就得到了一个最基本的flutter项目
  5. 指定放置项目的位置，然后按蓝色的确定按钮
  6. 等待项目创建继续，并显示main.dart文件

3.3 调试

在命令行进入项目根目录，使用flutter run将应用安装到设备上。可以安装到虚拟机，也可以安装到真实设备。 通过VSCode能够方便地进行热更新调试，同时可以使用专用的调试工具。 Windows只支持为Android设备构建并运行Flutter应用，而MacOS同时支持iOS和Android设备。

3.3.1 连接Android模拟器

按照以下步骤在Android模拟器上运行并测试Flutter应用，详细信息参阅 Managing AVDs：

  1. 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device。
  2. 选择一个设备并选择 Next。
  3. 为要模拟的Android版本选择一个或多个系统印象，然后选择 Next。建议使用 x86 或 x86_64 image .
  4. 在 "Emulated Performance"下, 选择 Hardware - GLES 2.0 以启用 硬件加速.
  5. 验证AVD配置是否正确，然后选择 Finish。
  6. 在"Android Virtual Device Manager"中，点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面。
  7. 运行 flutter run 启动设备。连接的设备名是 Android SDK built for ，其中 platform 是芯片系列，如 x86。

3.3.2 连接iOS模拟器

按以下步骤在iOS模拟器上运行并测试Flutter应用：

  1. 在MAC上，通过 Spotlight 或open -a Simulator命令打开模拟器。
  2. 通过检查模拟器 Hardware > Device 菜单中的设置，确保模拟器正在使用64位设备（iPhone 5s或更高版本）。
  3. 根据电脑屏幕大小，模拟高清屏iOS设备可能会溢出屏幕。可以在模拟器的 Window> Scale 菜单下设置设备比例。

3.3.3 连接Android真机设备

  1. 要准备在Android设备上运行并测试Flutter应用，需要Android 4.1（API level 16）或更高版本的Android设备，并在计算机安装adb。
  2. 在Android设备上启用 开发人员选项 和 USB调试 。详细说明可在Android文档中找到。
  3. 使用USB将手机插入电脑。如果设备出现调试授权提示，授权电脑可以访问该设备。
  4. 在命令行运行 flutter devices 命令以验证Flutter识别连接的Android设备。
  5. 在命令行 使用flutter run命令启动应用。
  6. 默认情况下，Flutter使用的Android SDK版本是基于 adb 工具版本。 如果想让Flutter使用不同版本的Android SDK，则必须将该 ANDROID_HOME 环境变量设置为相应的SDK安装目录。

3.3.4 连接iOS真机设备

要将Flutter应用安装到iOS真机设备，需要一些额外的工具和一个Apple帐户，还需要在Xcode中进行一些设置。

  1. 安装 homebrew （如果已经安装了brew,跳过此步骤）。
  2. 打开终端并运行如下这些命令:
sql 复制代码 
brew update 
brew install --HEAD libimobiledevice 
brew install ideviceinstaller ios-deploy cocoapods 
pod setup

如果这些命令中的任何一个失败并出现错误，运行brew doctor并按照说明解决问题。

  1. 遵循Xcode签名流程来配置项目，配置完成后即可真机调试。

 打开命令行，进入Flutter项目根目录中，通过 open ios/Runner.xcworkspace 命令打开默认的Xcode workspace。

 在Xcode中，选择导航面板左侧中的Runner项目。

 在Runner设置页面中，确保在 General > Signing > Team 下选择了你的开发团队。当你选择一个团队时，Xcode会创建并下载开发证书，向你的设备注册你的帐户，并创建和下载配置文件（如果需要），也可以手动选择，下图为手动选择。

 要开始您的第一个iOS开发项目，需要使用Apple ID登录Xcode，如下图，Display Name是这个 App 将会在主屏幕以及其他地方展示的名字，Bundle Identifier需要具有唯一性。

四、 构建与发布

4.1 安卓

步骤如下，详细参考官网链接：flutter.dev/docs/deploy...

4.1.1 项目图标及应用名称配置

项目根目录/android/app/src/main/res/ 下的png文件即为应用图标，所有图片文件名保持一致以便于配置。

  1. 打开文件：项目根目录/android/app/src/main/AndroidManifest.xml
  2. 修改：
ini 复制代码 
android:name="io.flutter.app.FlutterApplication"
android:label="test_flutter_vscode" // 应用名称 
android:icon="@mipmap/ic_launcher" // png文件的图标名称：ic_launcher

4.1.2 注册应用

  1. 在命令行输入以下指令生成密钥
vbnet 复制代码 
//MacOS 
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key0 
// Windows 
keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

命令在官网都有，但实际上每个人计算机的java包所在位置并不一样，使用flutter doctor -v命令，可以快速查看到java包路径，如下图。

  1. 复制该路径，进行如下操作，注意有空格的路径需要加引号，不是复制粘贴就完事了
  1. 有了这个key.jks文件后，可以到项目目录下的android文件夹下，创建一个名为key.properties的文件，并打开粘贴下面的代码，根据提示文字替换掉尖括号里的内容。

当然，key.jks的目录在生成的时候也可以自定义。

ini 复制代码 
storePassword=<password from previous step> 
keyPassword=<password from previous step> 
keyAlias=key 
storeFile=<location of the key store file, such as /Users/<user name>/key.jks>
  1. 接下来在gradle中注册key，文件位置/android/app/build.gradle 替换以下代码:
scss 复制代码 
android { 
为:
def keystoreProperties = new Properties() 
def keystorePropertiesFile = rootProject.file('key.properties') 
if (keystorePropertiesFile.exists()) { 
keystoreProperties.load(new FileInputStream(keystorePropertiesFile)) 
} 
android { 
替换以下代码:
buildTypes { 
release { 
// TODO: Add your own signing config for the release build. 
// Signing with the debug keys for now, 
// so `flutter run --release` works. 
signingConfig signingConfigs.debug 
} 
} 
为:
signingConfigs { 
release { 
keyAlias keystoreProperties['keyAlias'] 
keyPassword keystoreProperties['keyPassword'] 
storeFile file(keystoreProperties['storeFile']) 
storePassword keystoreProperties['storePassword'] 
} 
}
 buildTypes { 
release { 
signingConfig signingConfigs.release
 } 
}

4.1.3 打开代码混淆，当需要压缩和防破译时使用

  1. 规则配置，创建 /android/app/proguard-rules.pro 文件并添加以下代码：
kotlin 复制代码 
## Flutter wrapper 
-keep class io.flutter.app.** { *; } 
-keep class io.flutter.plugin.** { *; } 
-keep class io.flutter.util.** { *; } 
-keep class io.flutter.view.** { *; } 
-keep class io.flutter.** { *; } 
-keep class io.flutter.plugins.** { *; }

例如Firebase的非flutter驱动的包还需要另外添加相应的规则。

  1. 开启混淆或压缩功能，打开 /android/app/build.gradle 文件，找到 buildTypes 的定义。 在 release 配置部分, 设置 minifiyEnabled 和 useProguard 标签为true，并引用上一步创建的文件：
arduino 复制代码 
buildTypes { 
release { 
signingConfig signingConfigs.release 
minifyEnabled true 
useProguard true 
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 
} 
}

4.1.4 检查配置

  1. 检查应用名，见4.1.1。
  2. 检查应用id，/android/app/build.gradle，找到 applicationId 字段，一旦发布，应用id就固定了，升级时应确保应用id与已发布的版本一致。
  3. 检查应用版本号，可以修改pubspec.yaml file，找到version字段就可以修改。详细配置，修改build.gradle文件。

versionCode ：

一个正整数，用作内部版本号。此数字仅用于确定一个版本是否比另一个版本更新，数字越大表示版本越新。这不是向用户显示的版本号；向用户显示的版本号由下面的 versionName 设置来设定。 Android 系统使用 versionCode 值来防止降级，方法是阻止用户安装 versionCode 低于设备上当前所安装版本的 APK。 该值是一个正整数，所以其他应用可以通过编程方式对其进行求解，例如为了检查升级或降级关系而求解该值。您可以将该值设为您需要的任何正整数，不过，您应确保应用的每个后续版本都使用一个更大的值。如果您已将某个 APK 的 versionCode 用于以前的版本，则无法将该 APK 上传到 Play 商店。

versionName：

一个字符串，用作向用户显示的版本号。您可以将此设置指定为原始字符串或对字符串资源的引用。 该值是一个字符串，所以您可以使用 .. 字符串或者其他任何类型的绝对或相对版本标识符来描述应用版本。除了向用户显示之外，versionName 没有其他用途。 示例如下图：

4.1.5 构建

4.1.5.1 bundle模式

打包后为bundle文件，使用bundletool（点击下载）可以在本地使用命令行进行与google商店一样的apk分发测试

1. 生成

 正常打包指令

ini 复制代码 
bundletool build-apks --
bundle=/MyApp/my_app.aab --
output=/MyApp/my_app.apks

 MacOS在不安装的情况下可以如下方式使用

css 复制代码 
#### java -jar bundletool-all.jar build-apks --bundle=MyApp/app.aab --output=Myapp/My_app.apks
2. 注册
javascript 复制代码 
bundletool build-apks --bundle=/MyApp/my_app.aab --output=/MyApp/my_app.apks 
--ks=/MyApp/keystore.jks 
--ks-pass=file:/MyApp/keystore.pwd 
--ks-key-alias=MyKeyAlias --key-pass=file:/MyApp/key.pwd 
bundletool install-apks --apks=/MyApp/my_app.apks  //--device-id=serial-id，添加指令以指定设备
4.1.5.2 直接打包为apk
ruby 复制代码 
flutter build apk --split-per-abi  // 打包后文件位于<app dir>/build/app/outputs/apk/release/ 
flutter install  // 安装到已连接的设备

4.2苹果

详细参考：flutter.dev/docs/deploy...

在命令行中进入项目根目录，指令步骤如下：

arduino 复制代码 
flutter clean // 清除已构建文件
flutter build ios // 构建苹果应用包
open ios/Runner.xcworkspace // 打开工作空间

product->achieve->distrbute app->enterprise->只勾选strip swift symbols->如果不能自动选择到签名，选择手动导入，直接构建应用安装包。

相关推荐
庸俗今天不摸鱼几秒前
【万字总结】前端全方位性能优化指南（十）——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下7 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox18 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞20 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行21 分钟前
Firefox账号同步书签不一致（火狐浏览器书签同步不一致）
前端·firefox
m0_5937581022 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周25 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队43 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯（axios、ecahrts）版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05苍穹外卖面试总结06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07RAG 实践- Ollama+RagFlow 部署本地知识库08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09如何本地部署AI智能体平台，带你手搓一个AI Agent10Android下HWC以及drm_hwcomposer普法(上)