1. 开始使用
1.1安装Flutter
1.1.1 准备
1、最新的系统
2、最新的xcode
3、安装brew https://brew.sh/
4、安装chrome浏览器
1.1.2 下载sdk
执行命令，查看要下载的sdk版本
uname -a
Darwin macdeMacBook-Pro-2.local 20.2.0 Darwin Kernel Version 20.2.0: Wed Dec 2 20:39:59 PST 2020; root:xnu-7195.60.75~1/RELEASE_X86_64 x86_64
根据版本下载对应的包
3.3.4 x64 eb6d86e 2022/10/6 2.18.2
3.3.4 arm64 eb6d86e 2022/10/6 2.18.2
1.1.3 配置环境变量
把下面的配置，分别复制到文件中
vim ~/.bash_profile
vim ~/.zshrc
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/mac/Documents/flutter/bin:$PATH
执行命令，使之生效
source ~/.bash_profile
source ~/.zshrc
查看是否成功
flutter --version
1.1.4 fultter升级
Flutter 有 3 个发布渠道，分别是 stable、beta 和 master。我们推荐使用 stable 渠道除非你需要体验最新更新的 Flutter 特性。
flutter channel
要切换到其它渠道，使用 flutter channel <channel-name>。当你切换了渠道以后，使用 flutter upgrade 下载 Flutter SDK 和依赖的 packages。例如：
flutter channel stable
flutter upgrade
1.2 遇到的问题
1.2.1 执行flutter doctor时，卡住不动
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
1.2.2 执行flutter upgrade时，卡住不动
删除缓存文件夹中的内容
/Users/mac/Documents/flutter/bin/cache
1.2.3 需要java11
在运行到android手机上的时候，需要java11。
https://www.oracle.com/java/technologies/downloads/#java11-mac
安装完成后，配置项目文件。
项目目录 -> android -> gradle.properties
org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true
android.enableJetifier=true
// 新增下面的路径（mac）
org.gradle.java.home=/Library/Java/JavaVirtualMachines/jdk-11.0.16.1.jdk/Contents/Home
// window
# org.gradle.java.home=D\:\\Program Files\\Java\\jdk-11.0.6
项目目录 -> android -> app -> build.gradle
compileOptions {
sourceCompatibility JavaVersion.VERSION_11
targetCompatibility JavaVersion.VERSION_11
}
kotlinOptions {
jvmTarget = '11'
}
1.3 创建项目
flutter create my_app
cd my_app
flutter run
// 项目项目权限
chmod -R 777 my_app
// 或者直接运行
// flutter run -d chrome
// run后，会检查可运行设备
Multiple devices found:
macOS (desktop) • macos • darwin-x64 • macOS 11.1 20C69 darwin-x64
Chrome (web) • chrome • web-javascript • Google Chrome 102.0.5005.61
[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (To quit, press "q/Q"): 2
1.4 项目目录
| 文件或目录 | 说明 |
|---|---|
| .dart_tool | 记录了一些dart工具库所在的位置和信息 |
| .idea | android studio 是基于idea开发的，.idea 记录了项目的一些文件的变更记录 |
| lib | lib文件夹内存放我们的dart语音代码 |
| android | Android项目文件夹 |
| ios | iOS项目文件夹 |
| linux | Linux项目文件夹 |
| macos | macos项目文件夹 |
| web | web项目文件夹 |
| windows | windows项目文件夹 |
| test | 用于存放我们的测试代码 |
| build | 编译后的文件目录 |
| .gitignore | git忽略配置文件 |
| .metadata | IDE 用来记录某个 Flutter 项目属性的的隐藏文件 |
| pubspec.lock | 当前项目依赖所生成的文件 |
| pubspec.yaml | 当前项目的一些配置文件，包括依赖的第三方库、图片资源文件等 |
| 项目名.iml | 工程文件的本地路径配置 |
| README.md | READEME文件 |
| analysis_options.yaml | 分析dart语法的文件，老项目升级新项目有警告信息，内容可以注释或者删掉 |
1.5 项目入口文件
在lib中，main.dart
// 需要引入包
import 'package:flutter/material.dart';
//入口
void main() {
runApp(const Center(
child: Text(
"hello nihao",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.red, fontSize: 40),
),
));
}
1.6 调试
1.6.1 查看连接的设备
flutter devices 在任何目录下都可以执行
3 connected devices:
21091116AC (mobile) • KR79W4GMM7EAKRQG • android-arm64 • Android 12 (API 31)
macOS (desktop) • macos • darwin-x64 • macOS 11.1 20C69
darwin-x64
Chrome (web) • chrome • web-javascript • Google Chrome
106.0.5249.103
1.6.2 运行
flutter clean 清除build
flutter run 只能在项目对应的目录下运行
flutter run -d all 所有设备都运行
flutter run -d 指定设备运行
本地服务运行，可用手机访问
flutter run -d web-server --web-port 8989
flutter run -d web-server --web-hostname 192.168.31.191 --web-port 8989
192.168.31.191 : 自己本地的ip ， 启动后，在手机上浏览器中，直接输入 192.168.31.191:8989 即可访问
常用快捷键
r键：热加载，重新加载
R键：热重启项目
p键：显示网格，可以很好的掌握布局情况
o键：切换android 和 ios预览模式
q键：退出调试预览模式
1.6.3 vscode
在vscode中安装插件
flutter
dart
代码提示工具
Flutter Widget Snippets
Awesome Flutter Snippets
1.7 打包
Android 打包
flutter build apk --no-shrink
web打包
flutter build web
// 不推荐使用第一种, 上面打出来的包,内容过多,如果是pc端使用,可以用上面的方式
flutter build web --web-renderer html
网友评论