Flutter在Windows平台下的安装配置

2019-12-09 09:08栏目:bob体育app
TAG:

目录

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” 的情状变量:假设那几个 帕特h 变量已经存在了,就增加;到原本的 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_UCRUISERL三个意况变量,试行如下两行命令

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, 英特尔liJ 以至 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卡塔尔,也许点击 热重载 开关(那些暗绛红的带箭头的转圈Logo按键)你就能够看看您的改造已经被实践了。

图片 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)

版权声明:本文由bob体育app发布于bob体育app,转载请注明出处:Flutter在Windows平台下的安装配置