flutter 环境搭建

news/2024/5/5 14:04:57/文章来源:https://blog.csdn.net/woyebuzhidao321/article/details/128413281

一、简介

  • Flutter 是谷歌开发的一款开源、免费的,基于 Dart 语言的U1框架,可以快速在i0S和Android上构建高质量的原生应用。 它最大的特点就是跨平台和高性能。
  • Dart是由谷歌,在2011 年开发的计算机编程语言,它可以被用于Web、服务器、移动应用和物联网等多个领域。号称要取代JavaScript.

跨平台

  • 移动端
    • Android
    • ioS
  • Web端(各种浏览器)
  • 桌面(Windows、 Mac)
  • 嵌入式平台 (Linux、 Fuchsia)

高性能

  • Flutter 应用的性能,接近原生App 。
  • Flutter 采用 GPU (图形显示)渲染技术。
  • Flutter应用的刷新频率可达120 fps (120帧每秒)
    • 可以用 Flutter 来开发游戏
  • React Native 应用的刷新频率只能达到60 fps (60 帧每秒)

在这里插入图片描述

发展历程

  • 2015, Flutter (当时叫 Sky)在Dart开发者峰会上亮相2018-6, Flutter 发布了首个预览版本
  • 2018-12, Flutter 1.0 发布
  • 2019-9, Flutter 1.9 发布,添加 Web 端支持
  • 2020-9, Flutter 1.22 发布,带来了对 i0s 14 和 Android 11的支持
  • 当前版本: Flutter 1.22.5

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、环境搭建

  • Windows 下只能搭建 Android 开发环境
  • Mac下既能搭建Android开发环境,也能搭建 ioS开发环境
  • 硬盘空间
    • Windows (400 M+)
    • Mac (700 M+)
  • 上课期间,通过 Windows 10 下的Android 环境进行演示

Git

  • flutter开发需压迫git支持
  • 下载
    • https://git-scm.com/download
  • 安装
    • 双击、下一步…
  • 验证
    • git --version

在这里插入图片描述
在这里插入图片描述

Flutter 之 Windows 环境搭建

在 Windows 下,搭建 Flutter 运行的 Android 的环境。
详情参考:https://flutter.dev/

操作系统

操作系统: Windows 7 或更高版本 (64-bit)

硬盘空间

磁盘空间: 400 MB ( 不包括 Android Studio 的磁盘空间)

Git

Flutter 依赖 Git 命令行工具

如果未安装 Git for Windows,请先安装;

在 VS Code 中,安装 flutter 插件

安装完成 VS Code 后,在 VS Code 中安装 flutter 插件。操作步骤如下图: Extension => 搜索框中搜 flutter => 安装 Flutter 插件

在这里插入图片描述

网络

注意:在进行后续内容安装之前,请先确保网络环境(需要翻墙)。否则,后续的安装任务无法完成。

配置资源镜像

由于在国内访问 Flutter 有时可能会受到限制,Flutter 官方为中国开发者搭建了临时镜像,大家可以将 下面的资源地址加入到环境变量中:

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

找到 我的电脑 => 右键 点选 属性 => 点选 高级系统设置 => 参考下图

在这里插入图片描述
在这里插入图片描述

JDK

JDK(Java Development Kit)是 Java 开发套件的简称。既然要做原生应用,而且是基于 Android 的, 所以,需要安装 JDK。

下载

下载地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

请选择一个适合本地操作系统的安装包(操作系统+位数,例如:Windows x64)。 下载时,提示需要登陆,我们可以先注册 Oracle 账户,登陆后再下载(或者直接找老师要安装包)。

安装

下载完成后,双击安装包,开始安装(一直下一步就好,无需特殊配置)。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

验证

安装完成后,重新打开命令行(win+r 然后输入 cmd 回车),输入 java -version,然后回车,验证安装 是否成功(看到版本号,说明 JDK 安装成功)。

如果看不到效果。需要将 JDK 的安装路径,绑定的环境变量中。然后,重新打开命令行验证。 找到 我的电脑 => 右键 点击 属性 => 点击 高级系统设置 => 参考下图

在这里插入图片描述
然后将安装的 Java 路径,声明为 JAVA_HOME 配置完成后,再次执行上述 验证 ,确保 Java 命令可以运行

安装 Android Studio

Android Studio (简称 AS)是安卓开发的编辑器和运行环境。使用之前,先下载。(如已经安装,请 略过本节)
在安装 Android Studio 之前,请确保以下环境

  • 操作系统:Windows 7/8/10 (32-bit or 64-bit)
  • 内存:最小 4 GB,推荐 8 GB 或更高
  • 硬盘空间:最小2 GB,推荐 4 GB 或更高
  • JDK 版本:1.8(1.8 版本官方也直接称 8 版本)

最好不要下载最新的版本,1.8 版本在 React Native 和 Flutter 中都能使用

如果你之前没有接触过 Android 的开发环境,那么请做好心理准备,这一安装过程相当漫长。
结合自己的安装经历,把整个安装过程分成了 17 个步骤,下图是安装步骤的时间占比。

请注意!!!国内用户 有稳定的翻墙工具,否则在下载、安装、配置过程中会不断遭 遇链接超时或断开,无法进行开发工作。某些翻墙工具可能只提供浏览器的代理功能,或只针对特 定网站代理等等,请自行研究配置或更换其他软件。总之如果报错中出现有网址,那么 99% 就是 无法正常翻墙。

Step 1

下载 Android Studio 下载地址:https://developer.android.com/studio/index.html

Step 2

下载完成后,双击安装包。Android Studio Setup 将显示在屏幕上,点击 Next 继续

在这里插入图片描述

Step 3

选择你需要安装的组件,需要安装 Android Studio 和 Android Virtual Device(安卓虚拟设备)。需要 2.7GB 的空间。这里使用默认设置,点击 Next 继续。

在这里插入图片描述

Step 4

接下来会出现 Android Studio 的安装位置,这里我们使用默认位置,点击 Next 继续
在这里插入图片描述

Step 5

选择开始菜单文件夹,这里不做更改,点击 Install 继续

在这里插入图片描述

Step 6

接下来,我们会看到安装的进度条(可能会有点慢)。安装完成后,点击 Next 继续

在这里插入图片描述
在这里插入图片描述

Step 7

安装完成界面,点击 Finish,并启动 Android Studio(Start Android Studio)

在这里插入图片描述

Step 8

接下来,我们可以看到软件的位置。例如:SDK 和 JDK 的位置。另外,还可以看到需要下载的各个组件 的大小。
例如:
Android Emulator 是 247 MB
Android SDK Tools 是 149 MB
Google APIs Intel x86 Atom System Image 是 1.15 GB)
总共需要下载 1.69 GB(Total Download Size),点击 Finish 会下载所有的 SDK 组件

在这里插入图片描述
在这里插入图片描述

Step 9

然后进入下载界面,这一下载过程,可能需要 巨长巨长巨长 的时间。主要有两个原因

  • 首先,这里下载的内容很大(大约 1.69 GB)
  • 另外,这一下载过程需要翻墙(需要 Google 的下载地址)

该下载过程要保证翻墙软件稳定,否则,可能会失败(下载中断)。

如果下载中断,需要多次重启 Android Studio,重复这一下载过程。直到安装完成

在这里插入图片描述

Step 10

安装完成后,我们就会见到 Android Studio 的欢迎界面。点击 Create New Project 创建新项目。 这里创建项目的目的有两个:

  1. 确保项目的运行环境
  2. 可以在项目(编辑器菜单)中,安装模拟器软件
  3. 可以在项目(编辑器菜单)中,安装 Android SDK
  4. 启动模拟器(模拟器可以通过命令行启动,也可以通过 Android Studio 启动)

在这里插入图片描述

Step 11

接下来,会弹出 选择项目模板 的界面,我们可以根据自己的需要,选择一个项目模板。这里用默认选中 的模板。点击 Next 继续。

在这里插入图片描述

Step 12

接下来,是配置项目界面。我们可以设置项目名称,项目存储位置以及项目编程语言(Java or Kotlin)。这里我把项目名称重命名为 mytest(不要使用汉字和特殊字符)。点击 Finish 继续

安装 Flutter 插件

在 Android Studio 中安装 Flutter插件(Flutter 插件中自带 Dart 插件),安装之后,才可以在
Android Studio 中创建 Flutter 项目。操作步骤如下:
Android Studio => File => Settings => Plugins => Marketplace => 搜索 flutter => 点击 Install 执 行安装
在这里插入图片描述
安装完成后,重启 Android Studio

在这里插入图片描述
重启后,在 Installed 中,就可以看到已经安装的插件了

在这里插入图片描述

安装 Android SDK(可选)

正常来说,你可以忽略这一步。
因为 Android Studio 默认会安装最新版本的 Android SDK 。

Android SDK 是针对安卓开发的套件。
如果最新的 Android SDK 存在兼容性问题。这里你还可以单独安装指定版本的 Android SDK。

打开 Android Studio,在菜单 Tools 下找到 “SDK Manager”

在这里插入图片描述
在 SDK Manager 中选择"SDK Platforms"选项卡,然后,在右下角勾选"Show Package Details"。展开 指定版本(例如: Android 10 (Q) )的选项,确保勾选了下面这些组件(重申:你必须使用稳定的翻 墙工具,否则可能都看不到这个界面):

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image (官方模拟器镜像文件,使用非官方模拟器不需要安装此组 件)

在这里插入图片描述
然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build- Tools"选项,确保选中了 React Native 所必须的 29.0.2 版本。

在这里插入图片描述

总共有两个内容,组件大小约:113.0 MB,安装后占用空间约:451.9 MB

在这里插入图片描述
点击 OK 执行下载(这个下载时间也比较长,同时确保翻墙工具稳定可用)

在这里插入图片描述
如果下载过程中断,请重复选中以上两个组件,再次下载
例如,我本地下载中断,报错:SSL peer shut down incorrectly(网络中断报错) 只需要重复选中所需组件,再次下载即可。

下载完成后,点击 Finish

在这里插入图片描述

安装模拟器(可选)

模拟器是在电脑上模拟出来的手机界面,我们可以在模拟器中,查看 App 的执行效果。 如果已经安装了模拟器,你可以跳过本小节。
安装
打开 Android Studio。如果菜单中显示没有设备(No Devices),可以通过 AVD Manager 添加设备 (模拟器)

在这里插入图片描述
红色框中默认显示 no devices,表示没有模拟器可用(没有安装,或没有选择) 蓝色框中显示的是我之前安装过的模拟器。
如果你之前已经安装了模拟器,此时可以点选 no devices,然后在下拉框中,选择已经安装的模 拟器

在这里插入图片描述
如果你之前没有安装过模拟器,请参考以下步骤进行安装: 点击 Android Studio 的菜单 Tools,然后找到 ADV Manager

在这里插入图片描述
在弹出窗口中,点击 Create Virtual Device,添加虚拟设备

在这里插入图片描述
在弹出窗口中,我们可以选择多个模拟器,这里我们安装默认的,直接点击 Next 继续

在这里插入图片描述
在下面的窗口中,我们点选默认的 Download

在这里插入图片描述
在弹出窗口,默认选中 Decline (拒绝)

在这里插入图片描述
此时,我们选择 Accept(接收),然后 Next 高亮了,我们点击 Next 继续
在这里插入图片描述
然后进入下载页面,这里下载的组件,大约有 1.1GB,所以,下载时间可能有点长(而且需要翻墙)

在这里插入图片描述
下载完成,点击 Finish 继续

在这里插入图片描述
此时,对应的 Next 按钮高亮显示了,我们点击 Next 继续

在这里插入图片描述
接下来,我们会看到模拟器的信息,点击 Finish 继续
在这里插入图片描述
此时,我们安装的模拟器,就会出现在列表中。点击右上角的 X,关掉窗口即可。

在这里插入图片描述
当然,你可以继续安装其他的模拟器(右下角 + Create Virtual Device…),我们这里安装一款 就 OK 了
(如非必要,不要安装太多的模拟器,否则,你的电脑就卡死了)

然后,我们就可以在设备下拉框中,看到我们安装的模拟器了

在这里插入图片描述

启动

安装完成后,我们可以启动模拟器。
在设备下拉框中选择 已安装的模拟器

在这里插入图片描述
等待几秒钟后,如果没有问题,模拟器就启动起来了
在这里插入图片描述

Flutter SDK

下载地址:
https://flutter.dev/docs/development/tools/sdk/releases https://flutter.cn/docs/development/tools/sdk/releases (国内镜像地址)

在这里插入图片描述
点击版本号(1.22.5)下载(约 128 MB,需要等待一段时间)

通过 Git 下载

下载之前,先指定 flutter 的存放位置。例如 D 盘。然后通过以下命令获取 Flutter SDK
git clone -b master https://github.com/flutter/flutter.git

解压
将安装包 zip 解压到你想安装 Flutter SDK 的路径(如: D:\flutter ;注意,最好不要放到 C 盘)。

在这里插入图片描述

执行 flutter 命令

执行 flutter 命令有两种方式(二选一):

  • 通过 flutter_console.bat 打开命令行
    然后在命令行中运行 flutter 命令
  • 绑定环境变量(推荐)
    将 flutter 的执行路径,绑定到环境变量中。然后在任意打开的命令行中,都能运行 flutter 命令

接下来,我们分别介绍这两种方式

  1. 在 flutter 安装目录下找到 flutter_console.bat
    我本地路径是 D:\flutter\flutter_console.bat,如下图:

在这里插入图片描述
双击运行,接下来,你就可以在命令行中运行 flutter 命令了。启动后的效果如下图:
在这里插入图片描述
2. 绑定环境变量
如果你想在任何命令行中,都可以执行 命令(不是通过双击 flutter_console.bat 的方式运行
flutter 命令),你需要把 flutter 的执行路径,配到环境变量中

例如:我们本地 flutter 的执行路径是 D:\flutter\bin

在这里插入图片描述
然后,将 D:\flutter\bin 添加到环境变量中。
找到 我的电脑 => 右键 点选 属性 => 点选 高级系统设置 => 参考下图

在这里插入图片描述
配置环境变量后,一路 确定,然后再打开命令行,你就可以运行 flutter 命令了

除了 flutter 命令需要绑定环境变量,还有以下常用内容
将 Dart SDK 的执行路径绑定到环境变量中。绑定方式与上面一致

# 我本地的路径 
D:\flutter\bin\cache\dart-sdk\bin

上述路径下包含以下常用命令(在环境变量中添加上述路径后,你就可以在命令行中使用下列命
令)
dart
用来运行 Dart 程序
dart2js
将 Dart 代码,转成 JavaScript 代码
dart2native
将 Dart 代码提前编译(AOT)为原生 X64 机器码。支持 Windows, macOS 和 Linux dartdoc
为 Dart 程序生成文档
dartfmt
格式化 Dart 程序
pub
使用 Dart 生态(相当于 JavaScript 中的 npm 命令)

在这里插入图片描述
将 pub 全局组件的执行路径绑定到环境变量中(我们下载的 pub 包的命令)
pub 是管理 Dart 包的工具(相当于 JavaScript 中的 npm),负责管理维护 Dart 生态。

# 我本地的路径D:\flutter\.pub-cache\bin

绑定环境变量的方式与 flutter 一致。如下图:

在这里插入图片描述

检测 flutter

在命令行中,运行 flutter doctor ,可以检测 flutter 所需的环境条件是否都满足。一般来说,会有一些
问题。
我本地运行,有三个问题需要解决(没问题的有一个绿色的对号,有问题的是 叉号X 或 感叹 号!)

在这里插入图片描述

接下来,我们依次解决上述三个问题

  1. Some Android licenses not accepted 这个在命令行中,直接给出了解决方案:运行 flutter doctor --android-licenses 运行过程中,所有问题的答案都输入 y

在这里插入图片描述
执行完后,再次运行 flutter doctor,此时,第一个问题已经解决

在这里插入图片描述
2. 缺少插件
Flutter plugin not installed; this adds Flutter specific functionality. Dart plugin not installed; this adds Dart specific functionality.
先在 Android Studio 中安装 Flutter 插件(参考下一节:安装 Flutter 插件) 安装完成后,再次运行 flutter doctor。如果运行通过,则无需看下一步 如果已经安装了 Flutter 插件,但是还报错。则用以下方式解决:
将 flutter 切换到 beta 分支(目前稳定版是 1.22.5,beta 最新版是 1.25.0-8.1.pre)

# 切换分支
flutter channel beta
# 升级版本 
flutter upgrade
# 重新检测flutter doctor

在这里插入图片描述
此时第二个问题,也已经解决
3. No devices available(没有可用设备)
我们启动模拟器后,这个问题就解决了。启动模拟器有多种方式。具体操作如下:
通过命令行启动模拟器

# 查看已安装的模拟器 
flutter emulators

在这里插入图片描述

# 启动模拟器 flutter emulators --launch <emulator id>flutter emulators --launch Pixel_3a_API_30

如果没有报错信息,模拟器会正常启动
通过 Android Studio 启动模拟器

打开 Android Studio 下的 flutter 项目(如果项目没有创建,建议通过命令行的方式启动模拟 器),在设备下拉框中选择 已安装的模拟器。然后模拟器就会启动
在这里插入图片描述
通过 VS Code 启动模拟器
打开 VS Code 下的 flutter 项目(如果项目没有创建,建议通过命令行的方式启动模拟器)。 点选 Run => Start Debugging

在这里插入图片描述
在弹出的下拉框中,选择模拟器
在这里插入图片描述
模拟器启动之后,再次运行 flutter doctor 即可。 检测成功后的效果如下图:

在这里插入图片描述
检测成功后,说明我们的 Flutter 环境搭建成功

创建 Flutter 项目

有多种方式创建 Flutter 项目。实际项目中,人选一个即可
1、通过命令行创建
2、通过 Android Studio 创建
3、通过 VS Code 创建(推荐)
接下来我们依次介绍。

通过命令行创建 新建

创建语法是:flutter create 项目名称
在命令行中,运行如下命令

flutter create flutter_app

项目创建后,通过 VS Code 打开项目 修改国内镜像源
修改镜像源只需要改一次,再次启动时,无需再改
国内特有的问题,防止启动应用时,访问不到 google 等国外资源
在运行 flutter 项目之前,需要先修改运行项目必须的资源路径。需要改两个文件
flutter项目/android/build.gradle
Flutter SDK 包下的 flutter.gradle 文件

接下来,我们依次介绍。
修改文件 flutter项目/android/build.gradle ,把 google() 和 jcenter() 这两行去掉。改为阿里的链 接。
阿里云镜像详情:https://maven.aliyun.com/mvn/guide

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/public' }

在这里插入图片描述
修改后,保存

修改 Flutter SDK 包下的 flutter.gradle 文件。我本地把 Flutter SDK 解压到了 D:\flutter。所以,我本 地 flutter.gradle 的路径是:

D:\flutter\packages\flutter_tools\gradle\flutter.gradle

注意:一定要改成你本地的路径
打开上述文件,然后编辑
注释掉 26,27 行。在添加后面三行代码

在这里插入图片描述

启动

回到命令行,先进入项目

cd flutter_app

然后运行项目
运行项目之前,先启动模拟器(如何启动:参考 安装模拟器),否则会报错:No supported devices connected.

flutter run

启动后的效果
在这里插入图片描述

命令行中提示一些快捷键:
r 键:热加载
R 键:热重启
h 键:显示帮助信息
d 键:脱离命令行,但是应用会继续运行 c 键:清除屏幕
q 键:终止应用的运行
这里我们就在命令行中,点击 h 键,然后你会看到更多有用的快捷键:

在这里插入图片描述
其中比较有用的命令有:
p 键:显示网格

在这里插入图片描述

通过 Android Studio 创建 新建

重启后,点击 File => New 后面会出现 New Flutter Project(必须先安装 Flutter 插件,然后才能看到 此菜单)

在这里插入图片描述
在这里插入图片描述
点击 Next
设置项目名称(项目名称中的字母只能用小写),选择 Flutter SDK

在这里插入图片描述
点击 Next,Android Studio 会根据我们填写的 Project name 帮我们生成 Package name。 这里无需改动,点击 Finish

在这里插入图片描述
此时会看到 Creating Flutter Project,等待几分钟

在这里插入图片描述
创建完成后的效果
在这里插入图片描述

修改国内镜像

修改镜像源只需要改一次,再次启动时,无需再改

国内特有的问题,防止启动应用时,访问不到 google 等国外资源

在运行 flutter 项目之前,需要先修改运行项目必须的资源路径。需要改两个文件

  • flutter项目/android/build.gradle
  • Flutter SDK 包下的 flutter.gradle 文件

接下来,我们依次介绍。

修改文件 flutter项目/android/build.gradle ,把 google() 和 jcenter() 这两行去掉。改为阿里的链 接。
阿里云镜像详情:https://maven.aliyun.com/mvn/guide

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/public' }

在这里插入图片描述
修改后,保存
修改 Flutter SDK 包下的 flutter.gradle 文件。我本地把 Flutter SDK 解压到了 D:\flutter。所以,我本 地 flutter.gradle 的路径是:

D:\flutter\packages\flutter_tools\gradle\flutter.gradle

注意:一定要改成你本地的路径
打开上述文件,然后编辑
注释掉 26,27 行。在添加后面三行代码

在这里插入图片描述
修改后,保存

启动

我们现在项目中启动模拟器,模拟器启动后我们可以点选启动按钮,启动 Flutter 项目
在这里插入图片描述
启动中

在这里插入图片描述
启动完成

在这里插入图片描述
通过 VS Code 创建
新建
打开 VS Code 后,通过快捷键 Ctrl + Shift + P 打开命令行

在这里插入图片描述
在命令行中输入 flutter,然后点选 New Application Project

在这里插入图片描述
然后,在弹出窗口中,创建一个新目录来保存新创建的 flutter 项目。 目录名称不要写汉字和特殊字符。最好用小写字母和下划线

在这里插入图片描述
指定项目名称
在这里插入图片描述
回车后,VS Code 就会在我们指定的目录下,创建 flutter 项目

在这里插入图片描述
修改国内镜像源
修改镜像源只需要改一次,再次启动时,无需再改
国内特有的问题,防止启动应用时,访问不到 google 等国外资源
在运行 flutter 项目之前,需要先修改运行项目必须的资源路径。需要改两个文件

  • flutter项目/android/build.gradle
  • Flutter SDK 包下的 flutter.gradle 文件
    接下来,我们依次介绍。

修改文件 flutter项目/android/build.gradle ,把 google() 和 jcenter() 这两行去掉。改为阿里的链 接。
阿里云镜像详情:https://maven.aliyun.com/mvn/guide

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/public' }

在这里插入图片描述
修改 Flutter SDK 包下的 flutter.gradle 文件。我本地把 Flutter SDK 解压到了 D:\flutter。所以,我本 地 flutter.gradle 的路径是:

D:\flutter\packages\flutter_tools\gradle\flutter.gradle

注意:一定要改成你本地的路径
打开上述文件,然后编辑
注释掉 26,27 行。在添加后面三行代码

在这里插入图片描述

启动

打开 VS Code 下的 flutter 项目。 点选 Run => Start Debugging

在这里插入图片描述
在弹出的下拉框中,选择模拟器
在这里插入图片描述
启动中…
在这里插入图片描述
启动完成

在这里插入图片描述

Flutter 之 Mac 环境搭建

基础环境

要安装并运行 Flutter,您的开发环境必须满足以下最低要求:
操作系统: macOS (64-bit)
磁盘空间: 700 MB (不包括 Xcode 或 Android Studio 的磁盘空间) 工具: Flutter 依赖下面这些命令行工具
bash, mkdir, rm, git, curl, unzip, which

使用镜像

由于在国内访问 Flutter 有时可能会受到限制,Flutter 官方为中国开发者搭建了临时镜像,大家可以将 如下环境变量加入到用户环境变量中(在命令行中运行如下命令):

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

或者,直接编辑 /Users/你的用户名/.bash_profile
在这里插入图片描述

安装 Xcode

开发 iOS 平台上的 Flutter 应用,你需要一个安装了 Xcode 的 Mac 设备。

  1. 通过 直接下载 或者通过 Mac App Store 来安装最新稳定版 Xcode;
  2. 通过在命令行中运行以下命令来配置 Xcode command-line tools:
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

当你安装了最新版本的 Xcode,大部分情况下,上面的路径都是一样的。但如果你安装了不同版本 的 Xcode,你可能要更改一下上述命令中的路径。

  1. 运行一次 Xcode 或者通过输入命令 来确保已经同意 Xcode 的许可 协议。

安装了 Xcode 之后,你就可以在 iOS 真机或者模拟器上运行 Flutter 应用了。

iOS 模拟器

如果想要在 iOS 模拟器中运行和测试 Flutter 应用,通过 Spotlight 或者以下命令来启动模拟器:

$ open -a Simulator

iOS 环境依赖

要将您的 Flutter 应用安装到 iOS 真机设备,您需要一些额外的工具。

  1. 安装 homebrew (如果已经安装了 brew,跳过此步骤).
  2. 打开终端,并运行这些命令,来安装用于将 Flutter 应用安装到 iOS 设备的工具
    以下安装,需要很长时间(可能大于10分钟),需要耐心等待
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

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

安装 Flutter SDK

  1. 去 flutter 官网下载

下载地址:
https://flutter.dev/docs/development/tools/sdk/releases
https://flutter.cn/docs/development/tools/sdk/releases (国内镜像地址)

在这里插入图片描述
或者通过 git 下载

git clone -b beta https://github.com/flutter/flutter.git

  1. 解压安装包到你想安装的目录,如:
cd ~/myapp
unzip ~/Downloads/flutter_macos_1.22.5-stable.zip
# 将解压后的目录命名为 flutter,然后复制到 /Users/liuchangtao/myapp/ 
# 最后的路径是 /Users/liuchangtao/myapp/flutter
  1. 添加 flutter 路径到 path 中:
# 打开 bash_profile vim ~/.bash_profiles
# 添加 flutter 环境里变量(在尾部,添加如下代码)
export PATH="$PATH:/Users/liuchangtao/myapp/flutter/bin"
# 保存退出 :wq
# 更新环境里变量
source ~/.bash_profile

请将上述 flutter 路径,换成你自己的 flutter 路径

  1. 验证 flutter 命令
# 在命令行中输入 
flutter -h
  1. 检测 flutter
# 在命令行中输入 
flutter doctor

初次运行时,它会下载它自己的依赖项并自行编译,可能需要等一会儿(以后再运行就会快得多)

在这里插入图片描述
若 Android 或 iOS 有依赖缺失。请下载 Android Studio 或者 VS Code,然后在对应 IDE 中下载 Flutter 插件。安装过程与 Windows 下的安装过程一致(参考:Flutter 之 Windows 环境搭 建.md)
以下为配置成功的截图:

在这里插入图片描述

创建 Flutter 应用

通过以下步骤来创建你的第一个 Flutter 应用并进行测试:

  1. 通过运行以下命令来创建一个新的 Flutter 应用:
$ flutter create flutterdemo
  1. 上述命令创建了一个 flutterdemo 的目录,包含了 Flutter 初始的应用模版,切换路径到这个目 录内:
$ cd flutterdemo
  1. 确保模拟器已经处于运行状态:
# 查看当前模拟器
$ flutter emulators

在这里插入图片描述

# 启动模拟器
$ flutter emulator --launch apple_ios_simulator # ios 模拟器 # 或者
$ flutter emulator --launch Nexus_S_API_29 # Andorid 模拟器
  1. 运行 flutter
# 执行项目工程,若有多个设备连接,需要 -d <设备的id>执行某个模拟器$ flutter run

在这里插入图片描述

使用 Xcode 打开 Flutter 项目

双击 Flutter 项目目录下的 ios/Runner.xcodeproj在这里插入图片描述

iOS 配置文件

iOS 下的配置文件是ios/Runner/Info.plist(相当于 android/src/main/AndroidManifest.xml)。我们
可以在 iOS 配置文件中,配置权限、语言、主题等信息。一般有两个编辑方式:

  1. 在 VS Code 中编辑
    VS Code 中的 Info.plist 就是一个 XML 文件。例如:常用的权限设置有:
<key>NSLocationWhenInUseUsageDescription</key> 
<string>App需要您的同意,才能在使用期间访问位置</string>
<key>NSLocationAlwaysUsageDescription</key> 
<string>App需要您的同意,才能始终访问位置</string> 
<key>NSPhotoLibraryUsageDescription</key><string>App需要您的同意,才能访问相册</string>
<key>NSCameraUsageDescription</key><string>App需要您的同意,才能访问相机</string><key>NSMicrophoneUsageDescription</key><string>App需要您的同意,才能访问麦克风</string><key>NSLocationUsageDescription</key> 
<string>App需要您的同意,才能访问位置</string>
<key>NSCalendarsUsageDescription</key><string>App需要您的同意,才能访问日历</string>
<key>NSRemindersUsageDescription</key><string>App需要您的同意,才能访问提醒事项</string>
<key>NSMotionUsageDescription</key><string>App需要您的同意,才能访问运动与健身</string>
<key>NSHealthUpdateUsageDescription</key><string>App需要您的同意,才能访问健康更新 </string>
<key>NSHealthShareUsageDescription</key> 
<string>App需要您的同意,才能访问健康分享</string>
<key>NSBluetoothPeripheralUsageDescription</key><string>App需要您的同意,才能访问蓝牙</string>
<key>NSAppleMusicUsageDescription</key><string>App需要您的同意,才能访问媒体资料库</string>
  1. 在 Xcode 中编辑
    Xcode 提供了一个可编辑的列表,允许我们添加、删除和编辑具体的配置项。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_239717.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务注册配置中心Nacos

文章目录一. 前言二. 下载安装1. 下载安装包2. Windows环境安装3. Linux环境安装1. 单击模式启动2. 集群模式启动3. 远程web控制4. 注册为系统服务三. 基本使用1. 添加依赖2. 服务注册3. 配置实例集群属性4. 实例权重负载均衡5. 环境隔离6. 临时实例与非临时实例四. Nacos配置管…

python常用模块

time模块 常用操作 1.直接获取时间 time.time() #获取结果是秒数&#xff0c;即从1970年1月1日8:00起计#1671856010.9592516 2.获取结构化时间 time.localtime() #获取本地时间&#xff0c;中国为东八区&#xff0c;为上海时间 time.gmtime() …

3.2 Static Terrestrial Laser Scanners 静态地基激光扫描仪

本章节介绍的静态地基激光扫描系统指的是那些在一个固定位置的位置上对周边场景地物特征进行扫描的设备。该类型设备的扫描测量机制是&#xff0c;通过激光测距仪进行斜距测量&#xff0c;与此同时通过水平和竖直两个方向上同步运动的角度编码器来记录角度变化值&#xff08;如…

C#大型医院HIS系统源码 医院信息管理系统源码 C/S架构 VS2013+sql2012

了解更多源码内容&#xff0c;可私信我。 开发环境&#xff1a;VS2013sql2012 C/S架构 一、门诊系统&#xff1a; 1、挂号与预约系统:实现了医院门诊部挂号处所需的各种功能&#xff0c;包括门诊安排的管理&#xff0c;号表的生成及维护&#xff0c;门诊预约管理和挂号处理&…

一文带你深入理解【Java基础】· 网络编程(下)

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…

AQS学习

1.1 AQS 简单介绍 AQS 的全称为&#xff08;AbstractQueuedSynchronizer&#xff09;&#xff0c;这个类在 java.util.concurrent.locks 包下面。 AQS 是一个用来构建锁和同步器的框架&#xff0c;使用 AQS 能简单且高效地构造出应用广泛的大量的同步器&#xff0c; 比如我们提…

五、Arduino IDE开发esp8266环境搭建

1、安装驱动程序 (1)安装USB转串口驱动程序。 (2)根据板载的USB转串口驱动芯片选择合适驱动安装。USB转串口芯片负责和电脑之间进行数据通信。 (3)常见USB转串口驱动 CP210x驱动:CP210x USB 至 UART 桥 VCP 驱动器 - 芯科科技 CH340驱动 2、Arduino IDE环境搭建 要想使用Ar…

K8S-存储-Volume

问题 容器磁盘上的文件的生命周期是短暂的&#xff0c;这就使得在容器中运行重要应用时会出现一些问题。首先&#xff0c;当容器崩溃 时&#xff0c;kubelet 会重启它&#xff0c;但是容器中的文件将丢失——容器以干净的状态&#xff08;镜像最初的状态&#xff09;重新启动。…

【kafka】学习笔记(三)

学习笔记七、Kafka-Eagle 监控7.1 环境准备7.2 Eagle 安装7.3、修改配置文件7.4、添加环境变量7.5、启动Eagle八、Kafka-Kraft 模式8.1、Kafka-Kraft 集群部署8.2、初始化集群数据目录8.3、启动 kafka 集群8.4、测试8.5、集群启动脚本九、SpringBoot集成Kafka七、Kafka-Eagle 监…

支持设备的待机唤醒功能

系统待机唤醒功能 1 说明背景 1.1 需求 支持 GPU 进入低功耗模式&#xff0c;让用户选择降低设备的功耗 1.2 概念 上位词&#xff1a;APM, ACPI 同类词&#xff1a;睡眠模式, S0~S5 下位词&#xff1a;系统挂起, 系统唤醒, 运行时设备电源管理 1&#xff09;ACPI 在计算机…

第10章_索引优化与查询优化

第10章_索引优化与查询优化 都有哪些维度可以进行数据库调优?简言之: 索引失效、没有充分利用到索引——索引建立关联查询太多JOIN (设计缺陷或不得已的需求)——SQL优化服务器调优及各个参数设置(缓冲、线程数等)———调整my.cnf。数据过多――分库分表 关于数据库调优的…

net/http 库的客户端实现(下)

前言 上一篇文章我们讲了 net/http 库客户端 request 的构建&#xff0c;接下来继续讲构建HTTP请求之后的处理操作 net/http 库的客户端实现(上) net/http 库的客户端实现(下) net/http 库的服务端实现 启动事务 构建 HTTP 请求后&#xff0c;接着需要开启HTTP事务进行请…

Python——几个常用的数学函数

1. min()函数&#xff1a;取出给定参数的最小值 说明&#xff1a;获取指定数值或者指定序列中最小值。 print(min(1, 5)) print(min(1, 2, 3, 4, 5, 6)) print(min([2, 3, 4, 5])) 2.max()函数&#xff1a;取出给定参数的最大值 说明&#xff1a;获取指定数值或者指定序列中…

XDocReport使用入门

XDocReport 简介 XDocReport是GitHub上根据麻省理工学院许可证开源的Wrod导出框架。XDocReport可以根据ODT、Doc、Docx文档模板通过模板引擎语法&#xff08;Freemarker、Velocity&#xff09;转换为另外一种格式文档&#xff08;Doc、Docx、XHTML、PDF&#xff09;。 XDocR…

前端小知识:控制台打印(console)- 模拟Java日志打印、表格形式打印美化输出对象、代码运行时间统计

文章目录6. 控制台打印&#xff08;Console&#xff09;模拟Java日志打印格式美化对象打印&#xff08;表格形式打印输出&#xff09;日志等级输出&#xff08;让其在控制台显示时有颜色提示&#xff09;代码运行时间统计打印输出6. 控制台打印&#xff08;Console&#xff09;…

用树莓派4B安装gitlab,亲测可用~

最近成功在CentOS7上安装了gitlab&#xff0c;忽然想到是不是可以把吃灰的树莓派4B也装上gitlab&#xff0c;于是研究了一下&#xff0c;做个分享。 树莓派是4B 8G版本。本身装的是官方的64位系统。之前可能还装过一些乱七八糟的东西&#xff0c;这里就不提了。 上gitlab官网…

移动 IP(计算机网络-网络层)

目录 移动性对网络应用的影响 移动IP中数据报的转发过程 移动IP中数据报的转发过程 三角路由的低效性 解决三角路由的低效性 移动IP的标准 移动性对网络应用的影响 现在先考虑这样一种情况&#xff0c;一个用户拿着无线移动设备在一个Wi-Fi服务区内走动&#xff0c;并且边…

【python圣诞树的实现】

&#x1f935;‍♂️ 个人主页老虎也淘气 个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f44d;&#x1f3fb; 收藏…

http 库的服务端实现

前言 net/http 库的客户端实现(上) net/http 库的客户端实现(下) net/http 库的服务端实现 上两篇文章介绍了 http 客户端的实现&#xff0c;这篇文章看一下服务端的实现 服务端 使用 net/http 库可以快速搭建HTTP服务&#xff0c;HTTP服务端主要包含两部分&#xff1a; …

【圣诞特辑】码一个漂漂亮亮的圣诞树(Single Dog版)

目录 前言 一、C语言版圣诞树 1.代码实现 2.效果图 二、python版圣诞树 1.代码实现 2.效果图​ 三、html5版圣诞树 1.代码实现 2.效果图 总结 前言 圣诞节即将来临&#xff0c;圣诞树也是必不可少的装饰之一。圣诞树是一棵绿叶繁茂的树&#xff0c;上面挂满了彩色的灯…