学习Flutter的第一天（开始使用）

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

学习Flutter的第一天（开始使用）