9159金沙游艺场

图片 7
【iScroll源码学习04】分离IScroll核心
图片 4
整理总结的一些前端面试题

Flutter在Windows平台下的安装配置

目录

1.
安装 Flutter
SDK2.
设置环境变量3.
Flutter
doctor4.
安装 Android
Studio5.
启动 Android Studio, 安装 Android
SDK6.
再次运行 Flutter doctor
查看依赖项7.
设置 Android
emulator8.
配置编辑器8.1
Android
Studio8.2
Visual Studio Code (VS
Code)

第一次接触移动开发, 纯小白一枚, 慢慢摸索, 记录安装.

开发IDE选择android studio.Mac环境

学习Flutter之前要做一些准备工作。Flutter前奏曲包括以下内容:

1. 安装 Flutter SDK

如果不能直接下载 Flutter SDK, 可以通过github安装, 请参考 Using Flutter
in
China.

下载 Flutter SDK
(flutter_windows_v0.2.8-beta.zip),
解压到指定目录, 双击运行flutter_console.bat, 完成sdk安装, 如图.

图片 1

图片 2

1.下载flutter到本地

1.Flutter安装和环境配置

2.VS Code编辑器配置

3.第一个Flutter应用

2. 设置环境变量

在Path下增加到flutter/bin的目录, 如图:

图片 3

git clone -b beta

Flutter安装和环境配置

3. Flutter doctor

在flutter控制台运行 flutter doctor 命令, 检测是否有依赖项未安装.

图片 4

其中带X的表示需要安装的东西, 如我这里需要再安装Android toolchain 与
Android Studio.

安装Android Studio时,会默认下载安装Android
SDK,所以下一步直接安装Android Studio.

 export PATH=`pwd`/flutter/bin:$PATH

一、Flutter的下载(以Windows为例)

1.获取flutter,先使用git去克隆远程仓库到本地,按照官方建议,我们选择beta分支

如果没有下载git的话先下载一下,下载并且安装完成后在你想安装的目录下,右击选择
git bash。然后输入

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

就是这样,经过漫长的等待后…(如果第一次失败了,多试两次可能就ok了)

图片 5stall
success.png

4. 安装 Android Studio

直接上图.

图片 6

全程 Next, 直到 Finish.

图片 7

2.为了让flutter可以处处使用,配置环境变量 .bash_profile

二、安装和环境配置

下载成功后,为了可以在任意的终端会话使用 flutter
命令,你需要添加它到你的 PATH 环境变量:

打开 “控制面板 > 系统和安全 > 系统 > 高级系统设置 >
环境变量”。

1.在用户变量下,检测是否存在 “Path” 的环境变量:如果这个 Path
变量已经存在了,就添加;到原来的 Path 值的末尾,并且加上 flutterbin
的全路径。

2.如果这个 Path 变量不存在,就要在用户变量下创建新的 Path
的变量名,并且它的变量值设置为 flutterbin 的全路径。

图片 8envir_setting.png

然后运行下面

注意:Users/didi/google/flutter需要替换为你本地Flutter项目的路径

export PATH=$PATH:/Users/didi/google/flutter/bin

重启 Windows以完全应用此更改。

注意:为了让Flutter在安装过程中使用国内的镜像。需要声明PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL两个环境变量,执行如下两行命令

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

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

图片 9envir
storage.png图片 10envir
pub.png

就像这样:

图片 11enviroment.png

以上步骤完成后,我们就可以通过flutter
doctor命令来执行Flutter的安装程序了,经过一段时间的下载和安装,Flutter会输出安装结果:

注意:要在命令提示符或者 PowerShell 窗口运行此flutter
doctor命令。目前, Flutter 还不支持像 Git Bash 这样子的第三方shell。

图片 12fdoctor
success.png

第一次运行 flutter 命令 (比如 flutter doctor
),它会下载自己的依赖库并且自行编译。后续运行 flutter 命令就会很快了。

5. 启动 Android Studio, 安装 Android SDK

图片 13

图片 14

图片 15

图片 16

图片 17

图片 18

图片 19

图片 20

open -e .bash_profile
//打开环境变量配置文件,下面第一行配置环境变量,二三行是使用国内镜像

VS Code编辑器配置

你可以使用任意一款文本编辑器结合我们提供的命令行工具来构建 Flutter
应用程序。当然,更推荐的是使用我们开发的文本编辑器插件之一,来优化开发的使用体验。支持
Android Studio, IntelliJ 以及 VS Code。

这里使用VS Code编辑器,它包含了运行和调试 Flutter
应用程序的轻量级编辑器。

如果想用Android Studio 点这里 传送门

1.安装VS Code

2.安装Dart Code 插件

执行 View>Command Palette…

在扩展插件安装面板的输入框输入 dart code 关键词,在显示的列表中选择
‘Dart Code’ 插件,然后点击 Install

点击 ‘OK’ 重新加载 VS Code3.Flutter Doctor 来验证你的配置

依次执行 View>Command Palette…

输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ 命令

在日志打印窗口的 ‘OUTPUT’ 标签中查看打印出的日志信息,看看有没有报错

图片 21VS
code dart.png

6. 再次运行 Flutter doctor 查看依赖项

图片 22

还有两个依赖需要解决

[!] Android toolchain – develop for Android devices (Android SDK
27.0.3)
X Android licenses not accepted. To resolve this, run: flutter doctor
–android-licenses

运行 flutter doctor –android-licenses

图片 23

[!] Connected devices
! No devices available

打开手机开发者选项, 打开USB调试后, 再次检测, 成功。

图片 24

export PATH=$PATH:/Users/laomao/files/flutter/bin

第一个Flutter应用

前两步都完成后,就可以进行这个激动人心的时刻了,可以运行我们的第一个应用,what?还没写代码呢,运行个毛线???

7. 设置 Android emulator

打开AVD Manager, 新建.

图片 25

随意选择一个后下一步

图片 26

建议选择 x86_64的 image.

图片 27

图片 28

图片 29

Graphics 选择 Hardware GLES 2.0

图片 30

export PUB_HOSTED_URL=

一、安装这个应用程序
  1. 启动 VS Code
  2. 依次执行 View>Command Palette…
  3. 输入 ‘flutter’,选择 ‘Flutter: New Project’ 命令
  4. 输入项目名称,回车
  5. 找到一个用于保存项目的目录,然后点击蓝色的确认按钮
  6. 项目会自动进行创建,创建完毕之后,main.dart 文件会被自动打开

以上的命令创建了一个名叫 myapp 的 Flutter 项目,并且放在 ‘myapp’
文件夹中。这是一个很简单的,基于 Material 组件 的项目。

在这个项目的文件夹中,和项目业务相关的代码都在 lib/main.dart 中。

图片 31mainDart.png

8. 配置编辑器

这里介绍 Android Studio 与 Visual Studio Code (VS Code) 的配置.

export FLUTTER_STORAGE_BASE_URL=

二、运行这个程序
  1. 确保在 VS Code 的右下角能看到目标设备的名称
  2. 使用键盘上的 F5 按钮,或者依次执行 Debug>Start Debugging
  3. 等待应用程序启动
  4. 如果一切正常,构建完应用程序之后,你就可以在你的手机或者模拟器上看到应用程序的起始界面了

图片 32result1.png

8.1 Android Studio

安装 Flutter 和 Dart 插件. Configure->Plugins 如图

图片 33

Browse repositiories..

图片 34

选择 Flutter, 安装, 弹出 Dart 插件安装时, 选择是.

图片 35

新建 Flutter project

图片 36

选择 Flutter Application

图片 37

Next 直到 Finish, 等待新建项目的完成.

图片 38

选择模拟器, 调试

图片 39

运行结果如下:

图片 40

3.flutter 检测开发环境配置

三、尝试一下热重载

Flutter 提供了一种非常高效的开发方式,叫做热重载
,这个功能可以在应用程序运行的状态下替换部分代码,并且运行中的程序不会丢失任何状态

举个栗子,我想把屏幕上展现的字符串改一下

  1. VSCode开发编辑器中打开 lib/main.dart 文件
  2. 把页面显示的字符串’Learning flutter’ 修改为 ‘I like flutter’
  3. 不需要点击 ‘Stop’ 按钮;让应用程序继续运行。只需要将代码 全部保存
    (cmd-s / ctrl-s),或者点击 热重载
    按钮(那个绿色的带箭头的转圈图标按钮)你就可以看到你的修改已经被执行了。

图片 41result2.png

这个热重载太酷了,这立马就能看到修改效果的体验确实很棒[QAQ]和在Android
Studio改动一个小地方后看到效果所要等待的时间没有可比性…..在这个方面,Flutter确实略胜一筹。

这里我们的前奏曲就结束了,过程这样顺下来还是很简单的,但是在实际操作的过程还是会遇到很多小问题的,耐者住寂寞都可以搞定的。毕竟能用耐心解决的问题都不是问题哈。

如果想用Android Studio开发,初体验可以看这个

Flutter 安装和初体验

安装过程填坑可以看这个

Flutter开发环境配置以及踩坑

8.2 Visual Studio Code (VS Code)

安装 Dart Code 扩展

图片 42

新建 Flutter 项目

图片 43

图片 44

选择一个路径来存储项目, 注意, 路径中一定不能出现中文,
否则后面步骤会失败

图片 45

等待项目创建完成

图片 46

右下角的为上一步创建的Android emulator

图片 47

F5 开始调试

图片 48

运行结果如下.

图片 49

flutter doctor //执行这个命令查看开发环境缺少哪些

以下是本机执行结果:

laomaodeMacBook-Pro:~ laomao$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.1 17B1003, locale
zh-Hans-CN)

[✓] Android toolchain – develop for Android devices (Android SDK
27.0.0)

[!] iOS toolchain – develop for iOS devices (Xcode 9.2)

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图