flutter环境基本搭建

目录

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

Flutter快速上手

永利酒店赌场 1

1. 安装 Flutter SDK

如果不能直接下载 Flutter SDK, 可以通过github安装, 请参考 Using Flutter
in
China.

下载 Flutter SDK
(flutter_windows_v0.2.8-beta.zipflutter环境基本搭建。),
解压到指定目录, 双击运行flutter_console.bat, 完成sdk安装, 如图.

永利酒店赌场 2

永利酒店赌场 3

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的目录, 如图:

永利酒店赌场 4

git clone -b beta

Flutter安装和环境配置

Windows:

https://flutter.io/setup-windows

2 配置环境变量

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

永利酒店赌场 5

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

永利酒店赌场 6

3. Flutter doctor

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

永利酒店赌场 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了)

永利酒店赌场 8stall
success.png

Linux

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

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

flutter doctor
会自动检测当前开发环境配置,并且自动下载欠缺的文件。下载过程相对耗时。尤其对于国内用户有时还是出现下载失败情况。笔者也是尝试多次才执行命令才成功。

安装成功后效果:

永利酒店赌场 9

4. 安装 Android Studio

直接上图.

永利酒店赌场 10

全程 Next, 直到 Finish.

永利酒店赌场 11

2.为了让flutter可以处处使用,配置环境变量 .bash_profile

二、安装和环境配置

下载成功后,为了可以在任意的终端会话使用 flutter
命令,你需要添加它到你的 PATH 环境变量:

打开 “控制面板 > 系统和安全 > 系统 > 高级系统设置 >
环境变量”。

1.在用户变量下,检测是否存在 “Path” 的环境变量:如果这个 Path
变量已经存在了,就添加;到原来的 Path 值的末尾,并且加上 flutterbin
的全路径。

2.如果这个 Path 变量不存在,就要在用户变量下创建新的 Path
的变量名,并且它的变量值设置为 flutterbin 的全路径。

永利酒店赌场 12envir_setting.png

然后运行下面

注意:Users/didi/google/flutter需要替换为你本地Flutter项目的路径

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

重启 Windows以完全应用此更改。

注意:为了让Flutter在安装过程中使用国内的镜像。需要声明PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL两个环境变量,执行如下两行命令

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

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

永利酒店赌场 13envir
storage.png永利酒店赌场 14envir
pub.png

就像这样:

永利酒店赌场 15enviroment.png

以上步骤完成后,我们就可以通过flutter
doctor命令来执行Flutter的安装程序了,经过一段时间的下载和安装,Flutter会输出安装结果:

注意:要在命令提示符或者 PowerShell 窗口运行此flutter
doctor命令。目前, Flutter 还不支持像 Git Bash 这样子的第三方shell。

永利酒店赌场 16fdoctor
success.png

第一次运行 flutter 命令 (比如 flutter doctor
),它会下载自己的依赖库并且自行编译。后续运行 flutter 命令就会很快了。

MAC

4 Android Studio安装Dart插件

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

永利酒店赌场 17

同样的步骤搜索Flutter插件安装即可,安装完成效果:

永利酒店赌场 18

5. 启动 Android Studio, 安装 Android SDK

永利酒店赌场 19

永利酒店赌场 20

永利酒店赌场 21

永利酒店赌场 22

永利酒店赌场 23

永利酒店赌场 24

永利酒店赌场 25

永利酒店赌场 26

open -e .bash_profile
//打开环境变量配置文件,下面第一行配置环境变量,二三行是使用国内镜像

VS Code编辑器配置

你可以使用任意一款文本编辑器结合我们提供的命令行工具来构建 Flutter
应用程序。当然,更推荐的是使用我们开发的文本编辑器插件之一,来优化开发的使用体验。支持
Android Studio, IntelliJ 以及 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’ 标签中查看打印出的日志信息,看看有没有报错

永利酒店赌场 27VS
code dart.png

系统要求

安装和运行Flutter,开发环境必须满足如下最低要求:

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

5 创建Flutter项目

插件安装完成后,重启Android
Studio新建项目会发现增加了创建Flutter项目的选项。

永利酒店赌场 28

然后就一路Next,最后finish即可。

注意:对于国内开发者创建项目可能会卡在Create flutter .. 底部显示
building Symbols…状态。查看Console会提示Got socket error trying to
find package at

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

win7添加后效果:

永利酒店赌场 29

win10添加后效果:

永利酒店赌场 30永利酒店赌场 31

6. 再次运行 Flutter doctor 查看依赖项

永利酒店赌场 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

永利酒店赌场 33

[!] Connected devices
! No devices available

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

永利酒店赌场 34

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

第一个Flutter应用

前两步都完成后,就可以进行这个激动人心的时刻了,可以运行我们的第一个应用,what?还没写代码呢,运行个毛线???

获取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命令就会快很多。

6 运行项目

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

永利酒店赌场 35

到此开发环境搭建完毕。

7. 设置 Android emulator

打开AVD Manager, 新建.

永利酒店赌场 36

随意选择一个后下一步

永利酒店赌场 37

建议选择 x86_64的 image.

永利酒店赌场 38

永利酒店赌场 39

永利酒店赌场 40

Graphics 选择 Hardware GLES 2.0

永利酒店赌场 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 中。

永利酒店赌场 42mainDart.png

编辑器配置

使用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=

二、运行这个程序
  1. 确保在 VS Code 的右下角能看到目标设备的名称
  2. 使用键盘上的 F5 按钮,或者依次执行 Debug>Start Debugging
  3. 等待应用程序启动
  4. 如果一切正常,构建完应用程序之后,你就可以在你的手机或者模拟器上看到应用程序的起始界面了

永利酒店赌场 43result1.png

开发平台安装配置

macOS支持用iOS和Android来开发Flutter程序。选择任意一个平台来进行Flutter程序的开发。

8.1 Android Studio

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

永利酒店赌场 44

Browse repositiories..

永利酒店赌场 45

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

永利酒店赌场 46

新建 Flutter project

永利酒店赌场 47

选择 Flutter Application

永利酒店赌场 48

Next 直到 Finish, 等待新建项目的完成.

永利酒店赌场 49

选择模拟器, 调试

永利酒店赌场 50

运行结果如下:

永利酒店赌场 51

3.flutter 检测开发环境配置

三、尝试一下热重载

Flutter 提供了一种非常高效的开发方式,叫做热重载
,这个功能可以在应用程序运行的状态下替换部分代码,并且运行中的程序不会丢失任何状态

举个栗子,我想把屏幕上展现的字符串改一下

  1. VSCode开发编辑器中打开 lib/main.dart 文件
  2. 把页面显示的字符串’Learning flutter’ 修改为 ‘I like flutter’
  3. 不需要点击 ‘Stop’ 按钮;让应用程序继续运行。只需要将代码 全部保存
    (cmd-s / ctrl-s),或者点击 热重载
    按钮(那个绿色的带箭头的转圈图标按钮)你就可以看到你的修改已经被执行了。

永利酒店赌场 52result2.png

这个热重载太酷了,这立马就能看到修改效果的体验确实很棒[QAQ]和在Android
Studio改动一个小地方后看到效果所要等待的时间没有可比性…..在这个方面,Flutter确实略胜一筹。

这里我们的前奏曲就结束了,过程这样顺下来还是很简单的,但是在实际操作的过程还是会遇到很多小问题的,耐者住寂寞都可以搞定的。毕竟能用耐心解决的问题都不是问题哈。

如果想用Android Studio开发,初体验可以看这个

Flutter 安装和初体验

安装过程填坑可以看这个

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 扩展

永利酒店赌场 53

新建 Flutter 项目

永利酒店赌场 54

永利酒店赌场 55

选择一个路径来存储项目, 注意, 路径中一定不能出现中文,
否则后面步骤会失败

永利酒店赌场 56

等待项目创建完成

永利酒店赌场 57

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

永利酒店赌场 58

F5 开始调试

永利酒店赌场 59

运行结果如下.

永利酒店赌场 60

flutter doctor //执行这个命令查看开发环境缺少哪些

设置iOS模拟器
  1. 通过SpotLight找到模拟器或者运行命令行:open -a Simulator
  2. 确保模拟器是64bit的(iPhone5s及以后),可以通过模拟器的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:UsersuserAppDataLocalAndroidsdk

网站地图xml地图