第1节:Flutter开发环境搭建

本节学习内容:Flutter的环境搭建及创建运行您的第一个Flutter项目。

本节学习用时:30分钟

本节学习方式:动手实践

本节目录:

一、检测您是否具备了Flutter的开发环境

二、创建并运行第一个Flutter项目

一、检测您是否具备了Flutter的开发环境

因为您可能之前已经有配置过Flutter的开发环境了,所以为了避免重复安装,我们通过在终端运行flutter doctor命令,来进行检测,查看是否缺少。

1、环境已完善时

如果您的环境之前已经配置过且已完全配置好的话,您的命令执行结果可能会如图所示:

flutter doctor 检测出无问题

2、环境未完善时

  • 如果有提示错误的(如果你是第一次,那肯定有很多问题),请参照本节最后的【附1】、flutter doctor问题解决中的内容进行解决。

二、创建并运行第一个Flutter项目

1、最简单的创建Flutter项目的方法

在终端执行flutter create originflutterproject即可在指定目录建立Flutter项目。

flutter create originflutterproject

2、运行Flutter项目

在指定设备上运行Flutter项目

flutter run -d deviceid

如要了解更多请查看:官网Flutter起步: 体验

【附1】、flutter doctor问题解决

flutter doctor该命令的作用:查看是否需要安装其它依赖项来完成安装。

下面涵盖的错误介绍及解决有:

  • 1.1、-bash: flutter: command not found

  • 1.2、缺少依赖项

  • 其他问题,请查看【附2】、flutter 安装过程中的其他问题解决

1.1、-bash: flutter: command not found

原因:Flutter相关命令无效(此时flutter -h肯定也是一样的问题)

附:完好的flutter -h结果应为如图所示:

 flutter -h 检测flutter

解决:下载Flutter SDK,并配置Flutter环境变量到PATH中即可。

步骤:

  • ①下载Flutter SDK。

    Flutter SDK官网地址。(如果您觉得速度慢,这里提供一个已经下载好的地址:Flutter SDK 1.0.0 网盘下载地址 密码:nm09)

  • ②配置Flutter环境变量方法:即在~/.bash_profile文件里添加需要配置的内容即可。

    下面是我的~/.bash_profile文件内容:

我的~/.bash_profile

但在这里目前我们只需要上图中我圈出来的那行export PATH=/Applications/flutter/bin:$PATH #配置Flutter环境变量即可。这里我们先满足目前认知Flutter所需的即可,没必要把如下其他行是暂时不需要的所有的都加上去,当然你加上去可以以后更省事。

# Flutter
export PATH=/Applications/flutter/bin:$PATH  #配置Flutter环境变量

# 设置pub源,才能让你在国内愉快的使用别人写的库
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# ANDROID
export ANDROID_HOME=/Users/lichaoqian/Library/Android/sdk #android sdk目录,替换为你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

1.2、缺少依赖项

如果您不缺依赖项,那您命令的执行结果会为

如果flutter doctor 检测出问题,此时的命令执行结果一般如下:

flutter doctor 检测出问题

原因:缺少依赖项

解决:遇到什么错误,根据提示操作即可。

①、根据提示终端执行命令,解决iOS toolchain - develop for iOS devices (Xcode 10.1)

iOS toolchain问题解决后

②、根据提示下载Android SDK,并放置ANDROD_HOME指定的目录下后,

Android SDK安装后

③、为Android Studio安装Flutter Plugins后

Android Studio安装Flutter Plugins后

安装过程中,如遇Plugins搜索不到时候,如

Android Plugins搜索不到的示例截图

请确保如下图中的路径Perferences -> Appearance & Behavior -> System Settings -> Updates -> Use secure connection中的勾是取消的,如果不是请取消掉,并重启Android Studio后,重新搜索即可。

Android Plugins搜索不到的处理1

或者可以直接从http://plugins.jetbrains.com/上下载插件后,通过选择插件安装方式为Install plugin from disk来进行安装,如下图:

插件安装方式选择为Install plugin from disk

附:这是已经下载好后存在网盘上的Flutter插件

④为Intelij IDEA安装Flutter Plugins后的结果,即为不缺依赖的情况了。

其他资料:官网中的入门: 在macOS上搭建Flutter开发环境

如果还没解决安装问题,请查看【附2】、flutter 安装过程中的其他问题解决

【附2】、flutter 安装过程中的其他问题解决

flutter doctor其他问题1

原因:您的Flutter SDK 要求你Android Studio中的Flutter plugin版本至少到16.0.0。但你当前的Android Studio版本却只允许你最高只能装到Flutter plugin version 12.1。

解决:升级你的Android Studio后,重新安装其Flutter plugin。

Last updated

Was this helpful?