Flutter安装及试用(Windows平台)

时间:2021-12-12 04:48:05

Flutter安装及试用

Flutter是Google推出的一个框架用来统一Android和IOS平台之间应用开发的差异,使能够使用更少的资源开发和维护一个移动端的应用,语言基于DART是google推出的新的语言。其开源的系统项目Fuchsia也使用了DART。

官方文档地址:https://flutter.io/setup-windows/

Windows平台 安装

1.系统配置要求:

操作系统:Window7及以上
硬盘空间:大于400MB(不包含开发工具Android Studio所需要的空间)
工具:Flutter需要以下命令行工具在环境下可用

  • git(Window 版本)(主要在windows命令行下使用)
    如果已经安装过git,需要确保git命令可可以在命令行中正常使用

2.下载Flutter SDK

可以使用git直接克隆Flutter的仓库文件到本地,然后添加flutter 工具到path路径中去,然后在命令行中运行flutter doctor确认所需的依赖及所需依赖是否已经安装。

2.1 clone flutter 仓库

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

如果已经安装了Flutter,需要升级版本请参考:Flutter版本升级

2.2 配置路径 path

如果想在命令行中使用 flutter 命令,你需要添加flutter的路径到path中去

环境变量:把flutter的安装目录中的bin目录全路径添加到path中去

2.3 运行flutter doctor

开启一个新的命令行并运行以下命令,来确认是否有还没有安装的依赖

$ flutter doctor

该命令会检查当前的环境并在终端生成一份报告。Dart SDK是在Flutter中包含的无需再单独下载。仔细检查输出的报告以确认需要安装的其他软件或者是需要运行的任务(这些是以粗体显示的)。如下:

[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ //粗体显示
• Try re-installing or updating your Android SDK,
  visit https://flutter.io/setup/#android-setup for detailed instructions.

在第一次运行”flutter”命令时(比如flutter doctor),将会自动下载所需依赖,并进行编译。在之后的运行中速度会比第一次运行的要快。

接下来主要介绍了如何执行这些任务进一步完成安装。如果你选择了一个IDE那么在flutter docotor中将会显示,在IntelliJIDEA,Android Studio以及VS Code中插件都是支持的。在下面的编译器安装中有介绍如何安装Flutter和Dart的相关插件。

每当你安装了一个缺失的依赖,则可以再次运行 flutter doctor 命令以确认已经准备好了所有东西

The flutter tool uses Google Analytics to anonymously report feature usage statistics and basic crash reports. This data is used to help improve Flutter tools over time. Analytics is not sent on the very first run or for any runs involving flutter config, so you can opt out of analytics before any data is sent. To disable reporting, type flutter config --no-analytics and to display the current setting, type  flutter config. See Google’s privacy policy:www.google.com/intl/en/policies/privacy.
flutter工具使用 Goolge Analytics 匿名报告各功能的使用统计以及crash 统计。这些数据用来帮助提升Flutter 工具的性能。在最初第一次或者是执行flutter配置时的分析数据信息不回被上传,因此你可以在有任何数据上传之前来配置分析输出。禁止分析报告生成可以使用命令:flutter config --no-analytics;显示当前配置信息可以使用:flutter config。具体关于Google的隐私权政策可以参考:[www.google.com/intl/en/policies/privacy](www.google.com/intl/en/policies/privacy)。

3编辑工具安装

配合flutter命令行工具,你可以使用一个文本编辑器完成Flutter应用的开发。你可以在命令行中输入flutter help查看允许使用的工具

官方建议在一个功能完善的IDE中添加插件以支持Flutter应用的编辑,运行以及调试,从而获得更好的体验。通过插件你可以获得代码补全,语法高亮,组件编辑帮助,运行以及调试功能,下面以Android Studio为例展示如何添加一个插件。如果你已经安装过了或者使用的其他的工具,请跳过此步骤。(VS Code的插件安装参考:https://flutter.io/get-started/editor/#vscode)

3.1 安装Android Studio 版本要求为3.0或更改的版本

Android Studio 地址如下:https://developer.android.com/studio/index.html

当然,你也可以使用IntelliJ的企业版本或社区版本笨笨要求为2017.1或者更高

3.2 安装Flutter和Dart插件

Flutter需要如下两个插件的支持:

  • Flutter 插件用来支撑Flutter开发者的流程(运行,调试,热加载,等等)
  • Dart插件则提供代码分析(代码合法性校验,代码补全等等)

安装步骤如下:
* 1.启动Android Studio
* 2. 打开插件面板((Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)
* 3.选择【Browse repositories…】,勾选Flutter plug-in 然后点击 install
* 4.当提示是否安装Dart插件时点击Yes
* 5.安装完成后重启AS

Flutter安装及试用(Windows平台)

Flutter安装及试用(Windows平台)

4.测试环境安装是否OK

4.1新建APP
  • 1.选择File>New Flutter Project
  • 2.选择Flutter application 作为项目类型, 然后点击 Next
  • 3.输入一个工程名字(例如:myapp),然后点击Next
  • 4.点击Finish
  • 5.等待Android Studio安装相关SDK,并创建工程。

Flutter安装及试用(Windows平台)

Flutter安装及试用(Windows平台)

经过上面步骤创建出来的名为myapp的Flutter工程,包喊了一个使用 Material 组件生成的Demo app

4.2运行APP
  • 1.定位到Android studio的主工具栏,如下:

  • 2.在target selector,中选择当前已经连接的设备,用来安装APP(可以是真机或者模拟器),如果都没有可以通过Tools>Android>AVD Manager 创建一个新的模拟器。更详细的模拟器创建参考:https://developer.android.com/studio/run/managing-avds.html

  • 3.点击Run图标,或者通过菜单栏中的Run>Run运行

  • 4 如果以上全部OK你应该在设备或者虚拟机中看到如下界面
    Flutter安装及试用(Windows平台)

5.尝试热加载

Flutter通过hot reload提供了一个快速迭代功能,可以在应用运行中即时加载修改过的代码,同时不用重启并且不会丢失当前App状态。
简单的更改一下源文件,然后让IDE或者命令行工具知道你想执行hot reload。然后在设备或者虚拟机上查看效果

1.修改字符串 You have pushed the button this many times:>>You have pushed the button this many times+hot reload:
2.不要点击Stop按钮,并且保持app运行
3.执行完 Save All(cmd-s/ctrl-s)或者点击 Hot Reload button(有一个闪电形状的按钮)

此时你应该可以看到更改过后的字符串了.

6.可能遇到的问题:

6.1:如果仓库clone失败,检查代理是否可用,或者使用镜像网站。

参考:https://github.com/flutter/flutter/wiki/Using-Flutter-in-China

方法是:当前可用的镜像站可用配置如下:

如果是MacOS或者Linux:

则直接在命令行中增加如下环境变量:

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

然后继续执行:

git clone -b dev https://github.com/flutter/flutter.git //和正常流程一样clone远程仓库代码

然后把clone下来的文件夹下的bin目录,添加到环境变量Path下:

export PATH="$PWD/flutter/bin:$PATH"
如果是Windows系统

则可以直接在我的电脑-》右键-》属性-》高级系统设置-》环境变量中:添加上述两对key-value值,即

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

然后同样在命令行中执行clone命令:

git clone -b dev https://github.com/flutter/flutter.git //和正常流程一样clone远程仓库代码

然后直接在环境变量Path的Value中添加Flutter的Bin目录位置即可。

6.2 在执行 flutter doctor 命令时,输出到:”Unzipping Dart SDK…”之后一直等待,不往下执行:

Flutter安装及试用(Windows平台)

  • 1.请确认当前系统已安装7-Zip,并在命令行中执行 7z 命令,看是否可用,如果已安装,添加7-zip所在路径到path中去,确保在名行中7z命令可用。

6.3.如果提示:Error: Unable to ‘pub upgrate’ flutter tool. Retrying in five seconds…

参考:https://github.com/flutter/flutter/issues/15076

  • 1.在flutter目录下的bin目录下查看是否存在cache->dart-sdk,以及该目录下是否有文件存在
  • 2.如果flutter->bin->cache->dart-sdk目录下不存在任何文件,检查flutter->bin目录下是否存在$cachePath->dart-sdk,以及该目录下是否有文件。
  • 3.如果在flutter->bin目录下不存在 c a c h e P a t h > d a r t s d k C C : U s e r s X X X X X , cachePath->dart-sdk是否存在,如果存在则copy该目录下的dart-sdk到flutter->bin->cache目录下一份,重新运行:flutter doctor,看是否OK。
以上,如果遇到其他问题可以到Flutter github的官方地址查找看是否有解决方法