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

目录

1.
安装 Flutter
SDK2.
设置情状变量3.
Flutter
doctor4.
安装 Android
Studio5.
启动 Android Studio, 安装 Android
SDK6.
再度运维 Flutter doctor
查看信任项7.
设置 Android
emulator8.
布局编辑器8.1
Android
Studio澳门太阳娱乐官方网站,8.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 变量不设有,就要要客商变量下创办新的 帕特h
的变量名,况且它的变量值设置为 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_U瑞虎L四个遭遇变量,施行如下两行命令

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, AMDliJ 以及 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)

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

        brew install –HEAD libimobiledevice

        brew install ideviceinstaller

    ✗ CocoaPods not installed.

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

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

        For more info, see

      To install:

        brew install cocoapods

        pod setup

[✓] Android Studio (version 3.0)

[!] VS Code (version 1.19.3)

[✓] Connected devices (1 available)

! Doctor found issues in 2 categories.

4.安装android studio插件Flutter和dart,寻觅安装Flutter暗许会提示安装dart

如果设置不到,作者尝试N次安装失利,那么直接去插件网址下载安装就可以.

   要是打不开,请科学上网.

下载时候注意相应as的版本号接收准确版本,最新的不确定能用.

5,新建贰个flutter项目

运营IOS模拟器很流畅,运维Android你大概遇见种种奇葩的难题.

比方:

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

A:下载gradle-4.6解压 

修改android下gradlew文件

第一处:

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

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

第二处:

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

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

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

A:flutter config –android-sdk
C:UsersuserAppDataLocalAndroidsdk