Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
下一步公司的开发项目可能会用到Flutter,所以先安装配置下。
系统要求
要安装并运行Flutter,您的开发环境必须满足以下最低要求:
- 操作系统: Windows 7 或更高版本 (64-bit)
- 磁盘空间: 400 MB (不包括Android Studio的磁盘空间).
- 工具: Flutter 依赖下面这些命令行工具.
-
Git for Windows (Git命令行工具)
如果已安装Git for Windows,请确保命令提示符或PowerShell中运行
git
命令,不然在后面运行flutter doctor
时将出现Unable to find git in your PATH
错误, 此时需要手动添加C:Program FilesGitin
至Path
系统环境变量中。如果是32位的Windows系统,请将Program Files
换成Program File (X86)
-
获取Flutter SDK
-
去flutter官网下载其最新可用的安装包,点击下载 ;
注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去Flutter github项目下去下载安装包 。
-
将安装包zip解压到你想安装Flutter SDK的路径(如:
C:srcflutter
;注意,不要将flutter安装到需要一些高权限的路径如C:Program Files
)。 -
在Flutter安装目录的
flutter
文件下找到flutter_console.bat
,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。
更新环境变量
要在终端运行 flutter
命令, 你需要添加以下环境变量到系统PATH:
- 转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
- 在“用户变量”下检查是否有名为“Path”的条目:
- 如果该条目存在, 追加
flutterin
的全路径,使用;
作为分隔符. - 如果条目不存在, 创建一个新用户变量
Path
,然后将flutterin
的全路径作为它的值.
- 如果该条目存在, 追加
- 在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目,如果没有,也添加它们。
PUB_HOSTED_URL https://pub.flutter-io.cn FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn
重启Windows以应用此更改
运行 flutter doctor
打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装:
flutter doctor
此时遇到问题,报错
Error: The Flutter directory is not a clone of the GitHub project. The flutter tool requires Git in order to operate properly; to set up Flutter, run the following command: git clone -b beta https://github.com/flutter/flutter.git
又重新看了一遍搭建环境文档,都是按照流程操作的,不知道哪里出的问题。。
百度查了一些踩坑文档,发现解决办法:
把刚刚下载的Flutter
安装包删掉,重新在想要安装的目录下运行 git clone -b beta https://github.com/flutter/flutter.git
完成后会生成一个Flutter文件夹,如果和开始Path的路径不一样,记得去重新更新变量Path的路径。
重新运行flutter doctor,正常。
一旦你安装了任何缺失的依赖,再次运行flutter doctor
命令来验证你是否已经正确地设置了。
输入flutter help
在提示符下查看可用的工具。
创建新的应用
我用的是VS Code,下面就以VS Code为例。用Android Studio也类似。
- 启动 VS Code
- 调用 View>Command Palette…
- 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
- 输入 Project 名称 (如
myapp
), 然后按回车键 - 指定放置项目的位置,然后按蓝色的确定按钮
- 等待项目创建继续,并显示main.dart文件
上述命令创建一个Flutter项目,项目名为myapp,其中包含一个使用Material 组件的简单的演示应用程序。
在项目目录中,您的应用程序的代码位于 lib/main.dart
运行应用程序
- 确保连接好手机设备,或者开启模拟器。(手机记得在设置里打开USB调试和USB安装)
- 按 F5 键或调用Debug>Start Debugging
- 等待应用程序启动
- 如果一切正常,在应用程序建成功后,您应该在您的设备或模拟器上看到应用程序: