Flutter在Windows平台下的安装配置,flutter环境基本

2019-11-28 15:43栏目:网络操作
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)

率先次接触手机支付, 纯小白大器晚成枚, 慢慢搜求, 记录安装.

    ✗ CocoaPods not installed.

1.Flutter安装和条件安排

2.VS Code编辑器配置

3.第一个Flutter应用

5. 启动 Android Studio, 安装 Android SDK

图片 1

图片 2

图片 3

图片 4

图片 5

图片 6

图片 7

图片 8

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’ 标签中查阅打字与印刷出的日志音信,看看有未有报错

图片 9VS code dart.png

1. 安装 Flutter SDK

假如不能够直接下载 Flutter SDK, 可以通过github安装, 请仿照效法 Using Flutter in China.

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

图片 10

图片 11

        For more info, see

Flutter安装和条件布署

2. 设置情形变量

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

图片 12

若果设置不到,小编尝试N次安装战败,那么直接去插件网站下载安装就能够.

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

1.收获flutter,先采取git去克隆远程仓库到地面,依据官方建议,大家选拔beta分支

假如未有下载git的话先下载一下,下载並且安装实现后在您想安装的目录下,右击采纳git bash。然后输入

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

正是这么,经过长期的守候后...(假诺第三遍失利了,多试若干次大概就ok了卡塔尔

图片 13stall success.png

4. 安装 Android Studio

一向上航海用教室.

图片 14

全程 Next, 直到 Finish.

图片 15

[✓] Android Studio (version 3.0)

三、尝试一下热重载

Flutter 提供了生龙活虎种十一分火速的开拓方式,叫做热重载 ,这些效应能够在应用程序运营的景观下替换部分代码,何况运转中的程序不会抛弃任何景况

举个栗子,笔者想把荧屏上展现的字符串改一下

  1. VSCode开荒编辑器中开荒 lib/main.dart 文件
  2. 把页面显示的字符串'Learning flutter' 改良为 'I like flutter'
  3. 无需点击 ‘Stop’ 开关;让应用程序继续运维。只需求将代码 全体保存 (cmd-s / ctrl-s),只怕点击 热重载 开关(那一个茶褐的带箭头的转换体制Logo按键卡塔 尔(英语:State of Qatar)你就足以见到您的修正已经被实行了。

图片 16result2.png

本条热重载超帅了,那眼看就会看到纠正效果的涉世真正很棒[QAQ]和在Android Studio退换叁个小地点后看到作用所要等待的时辰未曾可比性.....在这里个地方,Flutter确实后来的超过先前的。

这里我们的前奏曲就甘休了,进度那样顺下来或然非常粗略的,但是在实操的经过依旧会遇见重重小标题标,耐者住寂寞都得以解决的。毕竟能用意志解决的难题都小意思哈。

只要想用Android Studio开荒,初体验能够看那几个

Flutter 安装和初体验

设置进度填坑能够看这一个

Flutter开荒情形安插以致踩坑

7. 设置 Android emulator

打开AVD Manager, 新建.

图片 17

随便筛选四个后下一步

图片 18

提议选取 x86_64的 image.

图片 19

图片 20

图片 21

Graphics 选择 Hardware GLES 2.0

图片 22

#CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar

第一个Flutter应用

前两步都形成后,就足以拓宽那么些动人心魄的随时了,能够运行我们的第一个利用,what?尚未写代码呢,运转个毛线???

6. 双重运维 Flutter doctor 查看信任项

图片 23

还会有五个依靠要求缓和

[!] 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

图片 24

[!] Connected devices
! No devices available

展开手提式有线话机开采者选项, 展开USB调节和测试后, 再度检查评定, 成功。

图片 25

flutter doctor //实施那个命令查看开拓景况非常不够什么

二、运转那个顺序
  1. 承保在 VS Code 的右下角能看见目的设备的称呼
  2. 动用键盘上的 F5 开关,或然依次施行 Debug>Start Debugging
  3. 等候应用程序运转
  4. 举个例子一切正常,构建完应用程序之后,你就足以在您的无绳电话机依旧模拟器上看见应用程序的起头分界面了

图片 26result1.png

3. Flutter doctor

在flutter调整台运维 flutter doctor 命令, 检测是或不是有依附项未安装.

图片 27

里面带X的表示要求安装的事物, 如笔者这里需求再安装Android toolchain 与 Android Studio.

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

      To install:

蓬蓬勃勃、安装那么些应用程序
  1. 启动 VS Code
  2. 次第试行 View>Command Palette…
  3. 输入 ‘flutter’,选择 ‘Flutter: New Project’ 命令
  4. 输入项目名称,回车
  5. 找到二个用于保存项目标目录,然后点击铁锈棕的料定按键
  6. 项目会活动举行创办,创立完结之后,main.dart 文件会被电动张开

以上的下令创设了一个誉为 myapp 的 Flutter 项目,而且位居 ‘myapp’ 文件夹中。那是叁个超粗略的,基于 Material 组件 的体系。

在此个类别的公文夹中,和种类职业相关的代码都在 lib/main.dart 中。

图片 28mainDart.png

8.2 Visual Studio Code (VS Code)

安装 Dart Code 扩展

图片 29

新建 Flutter 项目

图片 30

图片 31

接收一个途径来存款和储蓄项目, 注意, 路线中自然不能够冒出汉语, 不然前面步骤会退步

图片 32

等候项目开创实现

图片 33

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

图片 34

F5 开端调节和测量检验

图片 35

运营结果如下.

图片 36

下载时候注意相应as的版本号选拔准确版本,最新的不鲜明能用.

读书Flutter以前要做一些备选工作。Flutter前奏曲包涵以下内容:

8.1 Android Studio

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

图片 37

Browse repositiories..

图片 38

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

图片 39

新建 Flutter project

图片 40

选择 Flutter Application

图片 41

Next 直到 Finish, 等待新建项目标变成.

图片 42

选料模拟器, 调节和测量试验

图片 43

运转结果如下:

图片 44

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

二、安装和境况陈设

下载成功后,为了能够在任意的终极会话使用 flutter 命令,你须求丰裕它到您的 PATH 碰到变量:

开采 “调控面板 > 系统和平安 > 系统 > 高档系统设置 > 境遇变量”。

1.在顾客变量下,检验是或不是留存 “帕特h” 的蒙受变量:假设那么些 Path 变量已经存在了,就增加;到原来的 Path 值的末梢,况兼拉长 flutterbin 的全路线。

2.只要那么些 Path 变量不设有,将在在用户变量下创办新的 Path 的变量名,何况它的变量值设置为 flutterbin 的全路线。

图片 45envir_setting.png

下一场运维下边

只顾:Users/didi/google/flutter须求替换为你本地Flutter项目标渠道

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

重启 Windows以完全选拔此修正。

瞩目:为了让Flutter在安装进度中动用国内的镜像。须求注脚PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_UENVISIONL七个境况变量,实施如下两行命令

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

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

图片 46envir storage.png图片 47envir pub.png

就如那样:

图片 48enviroment.png

以上步骤完毕后,我们就能够通过flutter doctor命令来实践Flutter的安装程序了,经过黄金时代段时间的下载和设置,Flutter会输出安装结果:

瞩目:要在命令提醒符恐怕 PowerShell 窗口运维此flutter doctor命令。这两天, Flutter 还不帮衬像 Git Bash 那标准的第三方shell。

图片 49fdoctor success.png

先是次运营 flutter 命令 (譬喻 flutter doctor 卡塔尔国,它会下载本人的信任库何况自动编写翻译。后续运营 flutter 命令就能快捷了。

8. 安顿编辑器

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

        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.

[✓] Connected devices (1 available)

Q:提示同意协商,又找不到sdkmanager 命令

以下是本机推行结果:

A:下载gradle-4.6解压 

修改android下gradlew文件

4.安装android studio插件Flutter和dart,搜索安装Flutter私下认可会提示安装dart

2.为了让flutter能够四处使用,配置情形变量 .bash_profile

开发IDE选择android studio.Mac环境

第二处:

! Doctor found issues in 2 categories.

        brew install cocoapods

export PUB_HOSTED_URL=

CLASSPATH=/Applications/Android Studio.app/Contents/gradle/gradle-4.6/lib/gradle-launcher-4.6.jar

laomaodeMacBook-Pro:~ laomao$ flutter doctor

    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:

        pod setup

A:flutter config --android-sdk C:UsersuserAppDataLocalAndroidsdk

        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.

5,新建二个flutter项目

        brew install --HEAD libimobiledevice

运作IOS模拟器很通畅,运营Android你也许遇到各个奇葩的难题.

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

[!] VS Code (version 1.19.3)

比方:

        brew install ideviceinstaller

第一处:

export FLUTTER_STORAGE_BASE_URL=

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

Q:Finished with error: Exit code 1 from: /Users/laomao/files/as/flutter_app/android/gradlew -v:

#exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"

3.flutter 检查测量检验开拓遭遇布署

   固然打不开,请科学上网.

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

1.下载flutter到本地

git clone -b beta

exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.launcher.GradleMain "$@"

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

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

版权声明:本文由澳门新葡亰平台游戏发布于网络操作,转载请注明出处:Flutter在Windows平台下的安装配置,flutter环境基本