【home88一必发】flutter环境基本搭建,一份完整的Android

by admin on 2019年4月1日

目录

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前奏曲蕴涵以下内容:

home88一必发 1

1. 安装 Flutter SDK

一经无法直接下载 Flutter SDK, 能够经过github安装, 请参考 Using Flutter
in
China.

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

home88一必发 2

home88一必发 3

home88一必发,1.下载flutter到本地

1.Flutter安装和条件安顿

2.VS Code编辑器配置

3.第一个Flutter应用

1 下载flutter开发包

flutter开发SDK使用git克隆仓库下载。至于git的利用不是本篇文章介绍的始末,素不相识git的请移步git使用详细教程在git命令行下输入如下命令:

git clone -b alpha

在意:
flutter的下载路径要全英文并且路径不可能有空格!
执行完命令后守候下载即可。

2. 安装环境变量

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

home88一必发 4

git clone -b beta

Flutter安装和条件陈设

2 配置环境变量

在系统环境变量path中添加刚刚下载的flutter的门道。将bin文件路径添加至path中win7添加效果:

home88一必发 5

由于作者没有应用Win7系统,win7效果图是网上找的,其flutter下载路径在d盘,作者的下载路径是置身c盘的,请读者根据个体目录设置。win10效用:

home88一必发 6

3. Flutter doctor

在flutter控制台运转 flutter doctor 命令, 检查和测试是或不是有依靠项未安装.

home88一必发 7

其间带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了)

home88一必发 8【home88一必发】flutter环境基本搭建,一份完整的Android。stall
success.png

3 windows命令行cmd中执行flutter doctor命令

flutter doctor
会自动物检疫查和测试当前开销环境安顿,并且自动下载欠缺的公文。下载进度相对耗费时间。尤其对于国内用户有时照旧出现下载战败意况。作者也是尝试数次才执行命令才成功。

安装成功后效果:

home88一必发 9

4. 安装 Android Studio

一向上海体育场合.

home88一必发 10

全程 Next, 直到 Finish.

home88一必发 11

2.为了让flutter能够四处使用,配置环境变量 .bash_【home88一必发】flutter环境基本搭建,一份完整的Android。profile

二 、安装和条件布置

下载成功后,为了能够在任意的极限会话使用 flutter
命令,你须求加上它到你的 PATH 环境变量:

打开 “控制面板 > 系统和金昌 > 系统 > 高级系统安装 >
环境变量”。

1.在用户变量下,检查和测试是还是不是留存 “帕特h” 的环境变量:如若这么些 帕特h
变量已经存在了,就增进;到原来的 Path 值的末段,并且增进 flutter\bin
的全路径。

2.比方这么些 Path 变量不存在,就要在用户变量下创办新的 Path
的变量名,并且它的变量值设置为 flutter\bin 的全路径。

home88一必发 12envir_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

home88一必发 13envir
storage.pnghome88一必发 14envir
pub.png

就如这么:

home88一必发 15enviroment.png

如上步骤达成后,大家就足以由此flutter
doctor命令来推行Flutter的安装程序了,经过一段时间的下载和安装,Flutter会输出安装结果:

只顾:要在命令提示符或许 PowerShell 窗口运转此flutter
doctor命令。近日, Flutter 还不支持像 Git Bash 那规范的第贰方shell。

home88一必发 16fdoctor
success.png

率先次运转 flutter 命令 (比如 flutter doctor
),它会下载本人的信赖库并且自动编写翻译。后续运维 flutter 命令就会快捷了。

4 Android Studio安装Dart插件

打开Android Studio -> File -> Settings -> Plugins搜索Dart插件
在右侧点击Install即可。安装后效果:

home88一必发 17

相同的步子搜索Flutter插件安装即可,安装完功用果:

home88一必发 18

5. 启动 Android Studio, 安装 Android SDK

home88一必发 19

home88一必发 20

home88一必发 21

home88一必发 22

home88一必发 23

home88一必发 24

home88一必发 25

home88一必发 26

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’ 标签中查看打字与印刷出的日记新闻,看看有没有报错

home88一必发 27VS
code dart.png

5 创建Flutter项目

插件安装完结后,重启Android
Studio新建项目会意识扩充了成立Flutter项目标选项。

home88一必发 28

然后就一块儿Next,最终finish即可。

瞩目:对于国内开发者成立项目恐怕会卡在Create flutter .. 底部展现building Symbols…状态。查看Console会提醒Got socket error trying to
find package at

解决办法:在系统环境变量中新建名为PUB_HOSTED_URL
值为
的环境变量和新建名为FLUTTER_STORAGE_BASE_URL值为

win7添加后效果:

home88一必发 29

win10添加后效果:

home88一必发 30home88一必发 31

6. 重复运维 Flutter doctor 查看注重项

home88一必发 32

还有多个依靠需求缓解

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

home88一必发 33

[!] Connected devices
! No devices available

开辟手提式有线电话机开发者选项, 打开USB调节和测试后, 再度检查和测试, 成功。

home88一必发 34

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

第一个Flutter应用

前两步都形成后,就能够展开那几个激动人心的时刻了,能够运作大家的首先个应用,what?还没写代码呢,运维个毛线???

6 运转品种

点击运维按钮即可安装flutter程序。

home88一必发 35

到此付出环境搭建完毕。

7. 设置 Android emulator

打开AVD Manager, 新建.

home88一必发 36

专断行选购择八个后下一步

home88一必发 37

提议选拔 x86_64的 image.

home88一必发 38

home88一必发 39

home88一必发 40

Graphics 选择 Hardware GLES 2.0

home88一必发 41

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 中。

home88一必发 42mainDart.png

8. 配置编辑器

此地介绍 Android Studio 与 Visual Studio Code (VS Code) 的配置.

export FLUTTER_STORAGE_BASE_URL=

② 、运营那几个程序
  1. 保证在 VS Code 的右下角能看到目的设备的称呼
  2. 使用键盘上的 F5 按钮,或然依次执行 Debug>Start Debugging
  3. 等待应用程序运维
  4. 设若一切正常,创设完应用程序之后,你就足以在您的无绳电话机照旧模拟器上看看应用程序的起头界面了

home88一必发 43result1.png

8.1 Android Studio

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

home88一必发 44

Browse repositiories..

home88一必发 45

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

home88一必发 46

新建 Flutter project

home88一必发 47

选择 Flutter Application

home88一必发 48

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

home88一必发 49

分选模拟器, 调节和测试

home88一必发 50

运作结果如下:

home88一必发 51

3.flutter 检查和测试开发条件布置

③ 、尝试一下热重载

Flutter 提供了一种非凡飞速的开发方式,叫做热重载
,这几个效果能够在应用程序运转的事态下替换部分代码,并且运转中的程序不会丢掉任何意况

举个栗子,小编想把显示屏上海展览中心现的字符串改一下

  1. VSCode开发编辑器中开辟 lib/main.dart 文件
  2. 把页面突显的字符串’Learning flutter’ 修改为 ‘I like flutter’
  3. 不须要点击 ‘Stop’ 按钮;让应用程序继续运转。只必要将代码 全体保存
    (cmd-s / ctrl-s),或许点击 热重载
    按钮(那3个暗紫的带箭头的回旋图标按钮)你就足以观察你的修改已经被实践了。

home88一必发 52result2.png

本条热重载太酷了,这立即就能观察修改效果的体会真正很棒[QAQ]和在Android
Studio改动贰个小地点后来看效果所要等待的时日尚无可比性…..在那个地点,Flutter确实冰寒于水。

那边大家的序曲就截至了,进度那样顺下来依然极粗略的,可是在实操的历程可能会赶上许多小标题标,耐者住寂寞都得以消除的。究竟能用耐心消除的难点都不是题材哈。

若是想用Android Studio开发,初体验能够看这一个

Flutter 安装和初体验

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

Flutter开发条件布置以及踩坑

8.2 Visual Studio Code (VS Code)

安装 Dart Code 扩展

home88一必发 53

新建 Flutter 项目

home88一必发 54

home88一必发 55

采纳三个门路来储存项目, 注意, 路径中必将无法出现粤语,
否则前边步骤会失利

home88一必发 56

伺机项目创立实现

home88一必发 57

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

home88一必发 58

F5 开始调节和测试

home88一必发 59

运行结果如下.

home88一必发 60

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,新建1个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:\Users\user\AppData\Local\Android\sdk\

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图