第1集 Flutter 在windows 下的开发环境搭建

0x01 什么是Flutter?

学习一样新技术之前,我们一般都需要先大致了解下它是什么东东?

百度百科说:

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

博主语:

Flutter 是谷歌支持推出的新一代跨平台移动开发框架,因为Android,IOS 通吃哈。

0x02 Windows下搭建Flutter开发环境

翻开 Flutter 英文官网文档,我们可以看到针对Windows ,Mac OS, Linux 都提供了Flutter开发环境说明。
在这里插入图片描述
由于博主还买不起Mac OS,所以接下来让我们一起学习下如何在windows 上搭建Flutter 开发环境。

安装之前,我们需要确认下,当前自己的操作系统是否满足安装条件。

2.1 Windows 下安装Flutter 条件

Windows 下安装Flutter 开发环境的条件如下:

  • 操作系统:Windows 7 SP1 或者更新版本 (64-bit) ,即Win8,Win10 也支持。
  • 磁盘空间: 至少要有400MB 空间,只是基础的Flutter 安装包。

这是因为当前最新稳定版本压缩包需要320MB
在这里插入图片描述
工具:Flutter 依赖的一些工具

  • Windows PowerShell 5.0 或更新(Win10 操作系统自带)
  • Git for Windows 2.x
  • (安装时注意勾选Use Git from the Windows Command Prompt)
  • 也就是说,必须在cmd 和 PowerShell 中输入git --version 可以正确使用。

2.2 下载Flutter SDK

下载地址一:flutter_windows_v1.9.1+hotfix.6-stable.zip

下载地址二:历史归档版本下载

2.3 解压Flutter SDK

如果可以,最好不要解压到C:\Program FilesC:\Program Files (x86) 目录下。

因为这两个目录一般需要特殊权限,比如管理员权限才可以操作。

推荐解压解压到类似这样的目录下,比如 C:\app\flutter\

2.4 配置Flutter SDK环境变量

为了在命令行中不用每次都切换到Flutter 安装目录下,建议配置下环境变量。

新建环境变量,比如
在这里插入图片描述

变量名: FLUTTER_HOME
变量值: C:\app\fluter\flutter_windows_v1.9.1+hotfix.6-stable\flutter 

编辑PATH环境变量
在这里插入图片描述

%FLUTTER_HOME%\bin

2.5 配置Android SDK 环境变量

这一步,官方文档没说,但是亲测试了下,最好配置下,否则可能出问题。

找到我们的Android SDK 安装路径,比如是这样

C:\app\Android\sdk

新建环境变量:
在这里插入图片描述

变量名:ANDROID_HOME
变量值:C:\app\Android\sdk

编辑PATH环境变量
在这里插入图片描述

%ANDROID_HOME%\platform-tools\
%ANDROID_HOME%\tools\

2.6 Flutter 关联Android SDK

为了能让 Flutter 识别Android SDK 的安装路径,我们需要配置下,否则会报错。

比如我们的Android SDK 安装目录是C:\app\Android\sdk,那么就执行如下命令:

flutter config --android-sdk C:\app\Android\sdk\

如果不配置这个,可能会出现 no device 的错误。
在这里插入图片描述

2.7 安装Dart 和 Flutter 插件

虽然Flutter可以使用任何文本编辑器结合命令行工具来构建应用,但是最好还是用IDE来开发比较会更加高效。

要想让IDE 支持Flutter 开发,需要安装Flutter 插件。

值得注意的是,Flutter 是由Dart 语言进行开发的,因此还需要Dart 支持。

Dart 是一种针对 web 和移动设备开发进行了优化的编程语言

如果使用的是Android Studio或Intellij Idea ,可以搜索Dart

  • 安装Dart 插件
    在这里插入图片描述

  • 安装Flutter 插件
    在这里插入图片描述
    如果使用的是Visual Code

  • 安装Dart 插件,输入Dart 搜索
    在这里插入图片描述

  • 安装Flutter 插件,输入Flutter
    在这里插入图片描述

2.7 检查验证Flutter 开发环境

Flutter 提供了一个检查环境状态的工具,可以帮助我们检查当前的开发环境搭建哪里还有问题没了。

doctor 中文名医生,执行这个命令帮我检查下Flutter 相关的开发环境是否良好。

flutter doctor

如果一切顺利会看到如下内容
在这里插入图片描述


本节完~

下一集: 第2集 创建你的第一个Flutter 应用程序

发布了162 篇原创文章 · 获赞 219 · 访问量 40万+

猜你喜欢

转载自blog.csdn.net/hadues/article/details/103445494