目录

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火速上手

1. 下载源码

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

澳门金沙国际 1

图1.png

1. 安装 Flutter SDK

若是不可能一向下载 Flutter SDK, 可以因此github安装, 请参考 Using Flutter
in
China.

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

澳门金沙国际 2

澳门金沙国际 3

1.下载flutter到本地

支付环境安顿

2. 布局环境变量

右键我的电脑->属性->高级系统设置->环境变量->找到Path,在最后添加D:\java\androidstudio\flutter\bin;(此处路径为和谐本地存储地方+flutter\bin),添加以前一定要留心添加的数额从前是或不是有;(分号).

澳门金沙国际 4

图2.png

2. 装置环境变量

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

澳门金沙国际 5

git clone -b beta

Windows:

https://flutter.io/setup-windows

3. 运行flutter doctor

开辟命令提示符,运行命令:

flutter doctor

用以下载Dart SDK和更新Flutter Tool.

澳门金沙国际 6

图3.png

3. Flutter doctor

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

澳门金沙国际 7

里面带X的象征要求安装的东西, 如我那边须要再安装Android toolchain 与
Android Studio.

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

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

Linux

https://flutter.io/setup-linux/

4. 下载IntelliJ IDEA

安装插件:

澳门金沙国际 8

图4.png

Plugins->Browse Repositories,
1). 输入Dart,点击Install(安装)

澳门金沙国际 9

图5.png

2). 输入Flutter,点击Install(安装)

澳门金沙国际 10

图6.png

3). 重启Android Studio.

4. 安装 Android Studio

一贯上图.

澳门金沙国际 11

全程 Next, 直到 Finish.

澳门金沙国际 12

2.为了让flutter能够随地使用,配置环境变量 .bash_profile

MAC

5. 配置

点击Create New Project,选取左边Dart,配置左侧的Dart SDK
path,再选拔左边Flutter,配置Flutter SDK path.

澳门金沙国际 13

图7.png

澳门金沙国际 14

图8.png

5. 启动 Android Studio, 安装 Android SDK

澳门金沙国际 15

澳门金沙国际 16

澳门金沙国际 17

澳门金沙国际 18

澳门金沙国际 19

澳门金沙国际 20

澳门金沙国际 21

澳门金沙国际 22

open -e .bash_profile
//打开环境变量配置文件,上边第一行安顿环境变量,二三行是应用国内镜像

Flutter在Windows平台下的装置配备,flutter环境基本搭建。系统需要

安装和运转Flutter,开发环境必须满意如下最低必要:

  • 操作系统:macOS(64bit)
  • 磁盘空间:700MB(不包蕴Xcode或Android Studio的磁盘空间)
  • Flutter重视的种类环境里的命令行工具:
    bash, mkdir, rm, git, curl, unzip, which

6. 开立项目

1). 右边选中Flutter->Next

澳门金沙国际 23

图9.png

澳门金沙国际 24

图10.png

2). 运行项目

澳门金沙国际 25

图11.png

6. 双重运行 Flutter doctor 查看看重项

澳门金沙国际 26

还有多个依靠必要解决

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

澳门金沙国际 27

[!] Connected devices
! No devices available

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

澳门金沙国际 28

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

获取Flutter SDK

  1. Clone代码仓库

git clone -b beta https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH

如上设置为临时环境变量。

永远设置:
打开.bash_profile.
添加:export PATH=[你的flutter安装路径]/flutter/bin:$PATH

运行source $HOME/.bash_profile使之生效

  1. 运行flutter doctor
    flutter doctor
    一声令下会自行举办环境检查。自动下载flutter的依靠。Dart
    SDK随flutter一起捆绑安装,不需求单独安装Dart。运行结果会告知你系统中IDE或者信赖是或不是符合需求或者贫乏,或版本过低。
    率先次运行flutter命令时,例如flutter
    doctor,会下载我的借助且自动编译,后续再运行flutter命令就会快很多。

7. 设置 Android emulator

打开AVD Manager, 新建.

澳门金沙国际 29

轻易选取一个后下一步

澳门金沙国际 30

提出选用 x86_64的 image.

澳门金沙国际 31

澳门金沙国际 32

澳门金沙国际 33

Graphics 选择 Hardware GLES 2.0

澳门金沙国际 34

export PUB_HOSTED_URL=

编辑器配置

使用flutter命令行工具,可以兼容其余公文编辑器来开发Flutter应用程序。
唯独强烈指出使用IDE+插件形式展开开发、运行和调试。
切实参见:
https://flutter.io/using-ide/
https://flutter.io/get-started/editor/

8. 安插编辑器

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

export FLUTTER_STORAGE_BASE_URL=

付出平台安装配备

macOS帮衬用iOS和Android来支付Flutter程序。选拔随机一个平台来展开Flutter程序的费用。

8.1 Android Studio

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

澳门金沙国际 35

Browse repositiories..

澳门金沙国际 36

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

澳门金沙国际 37

新建 Flutter project

澳门金沙国际 38

选择 Flutter Application

澳门金沙国际 39

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

澳门金沙国际 40

澳门金沙国际,挑选模拟器, 调试

澳门金沙国际 41

运作结果如下:

澳门金沙国际 42

3.flutter 检测开发环境安插

iOS配置
  1. Xcode 7.2或更新版本
  2. 布置Xcode命令行工具去采取最新安装的Xcode版本,运行sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  3. 确保签约Xcode证书协议:打开Xcode一遍并且认同,或运行sudo xcodebuild -license

8.2 Visual Studio Code (VS Code)

安装 Dart Code 扩展

澳门金沙国际 43

新建 Flutter 项目

澳门金沙国际 44

澳门金沙国际 45

分选一个门道来囤积项目, 注意, 路径中必然无法冒出普通话,
否则后边步骤会失利

澳门金沙国际 46

等待项目创立达成

澳门金沙国际 47

右下角的为上一步成立的Android emulator

澳门金沙国际 48

F5 初阶调试

澳门金沙国际 49

运转结果如下.

澳门金沙国际 50

flutter doctor //执行这几个命令查看开发环境缺乏什么

设置iOS模拟器
  1. 通过SpotLight找到模拟器或者运行命令行:open -a Simulator
  2. 确保模拟器是64bit的(BlackBerry5s及随后),可以通过模拟器的Hardware>Device菜单来检查。
  3. 高分辨率的模拟器显示屏可能会超越你开发机的显示器尺寸,通过Window>Scale来安装模拟器的尺寸。
  4. 运行fluter run打开你的接纳

以下是本机执行结果:

在iOS真机陈设

布署和运转Flutter应用在iOS物理设备上,你必要有些额外的工具,和一个Apple账户。你也亟需在Xcode上对物理机举办设置。

  1. 安装homebrew
  2. 打开命令行工具,运行如下的指令来安装配置Flutter应用到真机上的工具。

brew update

brew install --HEAD libimobiledevice

brew install ideviceinstaller ios-deploy cocoapods

pod setup

指令执行倘若蒙受错误,运行brew doctor 来依照体质率领化解难点。

  1. 鲁人持竿Xcode签署流程来准备你的工程。
    a.在Flutter工程的根目录,运行open ios/Runner.xcworkspace开拓默许的Xcode
    workspace。
    b.在Xcode里,在左边导航面板拔取Runner工程。
    c.在Runner指标设置页,确保您的付出公司是被入选的,在General >
    Signing >
    Team中。当年拔取一个team,Xcode创制并且下载一个开发者证书,用你的账户注册你的设施,并且成立下载一个条文文件。
    想要运行你首先个开发工程,你需要动用你的Apple ID签署Xcode
    [图形上传败北…(image-2b65ef-1522150141381)]
    付出和测试可以动用任意AppleID,可是分发到App Store须求投入Apple
    Developer Program。
  2. 经过运行flutter run拉开你的利用

laomaodeMacBook-Pro:~ laomao$ flutter doctor

Android配置

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

安装Android Studio
  1. 下载安装Android
    Studio,必要至少3.0本子
  2. 开启Android Studio,安分守己安装新型的Android SDK,Android SDK
    Platform-Tools,和Android SDK
    Build-Tools,那一个都是为Android侧Flutter开发须要的东西。
  3. 安装Flutter/Dart插件

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

设置你的Android设备

Android设备须求:最低Android 4.1(API level 16)。

  1. 开启开发者选选,开启USB调试形式。
  2. 插入USB线缆连接电脑,并且在小叔子大上开展相关的安全肯定。
  3. 在命令行执行flutter devices来确保Flutter识别出了手机配备
  4. 通过flutter run运行app

默许情状下,Flutter使用adb指令基于的Android
SDK版本,如若您想要Flutter使用一个两样的Android
SDK安装路径,你必须变更ANDROID_HOME环境变量。

[✓] 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:\Users\user\AppData\Local\Android\sdk\

相关文章