如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

栏目: IOS · Android · 发布时间: 5年前

内容简介:要想在Windows上成功安装并运行Flutter,您的系统开发环境必须满足如下最低要求:首先点击红框中的圆圈,然后根据读者的系统是64位还是32位来选择版本,笔者的系统是64位的,所以选择最下面的Windows x64版本。

特别说明:如果读者还不会科学上网!请先停止学习,因为读者不可能将Flutter开发环境搭建成功,所以先去学学科学上网,而且能打开谷歌了,再返回来学习效率会更高。

Flutter开发环境搭建(Windows版)

系统要求

要想在Windows上成功安装并运行Flutter,您的系统开发环境必须满足如下最低要求:

  • 操作系统:Windows7或更高版本的64位(64-bit)操作系统;
  • 磁盘空间:大于3GB,虽然官方说的是400MB,但是还需要安装Android Studio和虚拟机,所以至少要3GB左右,如果能达到5GB就更好了,这样就可以满足安装多个虚拟机的要求;
  • 工具:Flutter依赖以下这些命令行工具
    • PowerShell 5.0或更新的版本
    • Git for Windows(Git命令行工具)

Java环境的下载与安装

下载 Java 开发 工具

Java开发工具包下载地址 ,这个地址会随着Java升级有所变化,如果已经改变了,请百度一下搜索 java下载 或者直接到Java官网下载。

如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

首先点击红框中的圆圈,然后根据读者的系统是64位还是32位来选择版本,笔者的系统是64位的,所以选择最下面的Windows x64版本。

安装Java开发工具包

首先,下载完成后双击运行进行安装,直接点击下一步下一步就可以了,安装路径读者随意;

最后,安装完成后到终端(cmd命令行)中输入 java ,能出现下图中的结果,说明安装成功。

如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

获取Flutter SDK

  1. 读者前往Flutter官网下载其最新可用的安装包,官网下载地址(地址如失效,请速速联系笔者)
    如何在Windows、MacOS上搭建Flutter开发环境(详细篇)
    注意:Flutter的版本渠道版本会不停变动,请以Flutter官网为准;另外,读者也可以去Github Flutter项目中去下载安装包, 下载地址
  2. 下载完成后将安装包zip解压到读者想安装Flutter SDK的路径(注意:不要将Flutter安装到需要一些高权限的路径下,如 C:\Program Files\
  3. 在Flutter安装目录的flutter文件下找到 flutter_console.bat ,双击运行并启动flutter命令行,接下来读者就可以在Flutter命令行中运行flutter命令了。

配置环境变量

如果读者想在Windows系统自带CMD命令行运行flutter命令,而不是通过 flutter_console.bat 来运行flutter命令,需要添加以下环境变量到系统Path中:

  • 控制面板>系统和安全>系统>高级系统设置>环境变量
  • 在“系统变量”下检查是否有名为“Path”的条目:
    • 如果该条目存在,追加 flutter\bin 的全路径(如 D:\Development_Tools\Flutter_SDK\flutter\bin ),使用 ; 作为分隔符
    • 如果该条目不存在,创建一个新系统变量Path ,然后将 flutter\bin 的全路径作为它的值

配置镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,读者需要在用户环境变量中配置镜像服务器地址:

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码
如何在Windows、MacOS上搭建Flutter开发环境(详细篇)
说明 :此镜像为临时镜像,并不能保证一直可用,读者可以参考 flutter.io/community/c…

以获得有关镜像服务器的最新动态。

运行flutter doctor命令

在CMD命令行或Flutter命令行运行如下命令来查看是否还需要安装其他依赖,如果需要,安装(盘)它:

flutter doctor
复制代码

该命令检查读者的环境并在命令行窗口中显示报告。Dart SDK已经打包在Flutter SDK里了,没有必要单独安装Dart,仔细检查命令行输出信息,以获取可能需要安装的其他软件或进一步需要执行的任务。

C:\Users\Administrator>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v1.1.10-pre.214, on Microsoft Windows [Version 10.0.17134.706], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.0)
[!] IntelliJ IDEA Ultimate Edition (version 2017.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.
复制代码

以上为笔者的命令输出信息,读者在自己的电脑上运行 flutter doctor 看到的命令输出信息当中的[X]肯定会比笔者的多一些,因为读者还没有安装Android Studio(简称AS),那么接下来讲解一下如何下载安装AS。

Android Studio下载与安装

下载

Android Studio(简称AS)安装包直接到官网上进行下载即可,下载地址,进入官网后点击Android Studio菜单栏,然后看到如下界面,点击DOWNLOAD ANDROID STUDIO按钮进行下载。

如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

点击“我已阅读并同意上述条款及条件”,进行打勾:

如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

安装

AS安装包下载完成后,双击进行安装,安装过程差不多就是下一步下一步,读者如果真的不会安装,请参考AS下载安装与配置教程。

AS安装完成后打开CMD命令行再运行 flutter doctor 命令来验证是否安装成功。

AS上安装Flutter插件

打开AS客户端,点击File > Settings > Plugins > Browse Repositories > 输入Flutter > Install

如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

安装完成后,读者需要重新启动一下AS客户端。

安装Android证书

安装好AS后,再次打开CMD命令行,输入 flutter doctor ,这时候的[X]会明显减少,但是读者有可能会遇到1~2个[X],其中有一个就是提示没有安装Android证书,安装证书只要在CMD命令行中执行以下的命令。

flutter doctor --android-licenses
复制代码

然后会提示读者选 Y/N ,不要犹豫,一律选择 Y ,就可以把证书安装好。

Flutter开发环境搭建(MacOS版)

系统要求

要想在MacOS上成功安装并运行Flutter,您的系统开发环境必须满足如下最低要求:

bash、mkdir、rm、git、curl、unzip、which

获取Flutter SDK

  1. 读者前往Flutter官网下载其最新可用的安装包,官网下载地址(地址如失效,请速速联系笔者)
    如何在Windows、MacOS上搭建Flutter开发环境(详细篇)
    注意:Flutter的版本渠道版本会不停变动,请以Flutter官网为准;另外,读者也可以去Github Flutter项目中去下载安装包, 下载地址
  2. 下载完成后解压安装包到读者想要安装的目录下,如:
cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
复制代码

配置环境变量

将Flutter添加到PATH中,读者可以在任何终端会话工具中运行 flutter 命令。

  1. 打开终端会话工具,使用vim进行配置环境变量,命令如下:
vim ~/.bash_profile
复制代码
  1. bash_profile 文件里,添加以下路径:
export PATH=/development/flutter/bin:$PATH
复制代码

注意:以上路径要根据读者将压缩包解压到的实际目录来进行编写,当然读者也可以和笔者一样,将压缩包解压至根目录下的development文件夹下。

  1. 配置完成后,需要用 source 命令重新加载一下,具体命令如下:
source ~/.bash_profile
复制代码

注意: 如果你使用终端是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加: source ~/.bash_profile

  1. 检测环境变量配置是否成功
flutter -h
复制代码

如下图所示,说明环境变量配置成功。

如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

配置镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,读者需要在环境变量中配置镜像服务器地址:

  1. 打开终端会话工具,使用vim进行配置环境变量,命令如下:
vim ~/.bash_profile
复制代码
  1. 在bash_profile文件里,添加以下路径:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码
  1. 配置完成后,需要用source命令重新加载一下,具体命令如下:
source ~/.bash_profile
复制代码

注意: 如果你使用终端是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加: source ~/.bash_profile

说明:此镜像为临时镜像,并不能保证一直可用,读者可以参考 flutter.io/community/c… 以获得有关镜像服务器的最新动态。

Xcode下载与安装

读者如果需要在MacOS上开发iOS版本的Flutter应用程序,那么就需要安装Xcode9.0或更高版本。

  1. 安装Xcode9.0或更新版本(通过链接下载或 苹果应用商店 );
  2. 配置Xcode命令行工具以使用新安装的Xcode版本;
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
复制代码

对于大多数情况,当读者想要使用最新版本的Xcode时,这是正确的路径,但如果读者需要使用不同的版本,请指定相应路径。

  1. 确保打开Xcode时同意了Xcode许可协议,或者通过命令 sudo xcodebuild -license 同意了Xcode许可协议。

Android Studio下载与安装

读者如果需要在MacOS上开发Android版本的Flutter应用程序,那么就需要安装Android Studio(简称AS)。

下载

AS安装包直接到官网上进行下载即可,下载地址,进入官网后点击Android Studio菜单栏,然后看到如下界面,点击DOWNLOAD ANDROID STUDIO按钮进行下载。

如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

点击“我已阅读并同意上述条款及条件”,进行打勾:

如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

安装

AS安装包下载完成后,双击进行安装,安装过程差不多就是下一步下一步,读者如果真的不会安装,请参考Windows版的AS下载安装与配置教程。

AS安装完成后打开终端工具运行 flutter doctor 命令来验证是否安装成功。

安装Android证书

安装好AS后,再次打开终端工具,输入 flutter doctor ,这时候的[X]会明显减少,但是读者有可能会遇到1~2个[X],其中有一个就是提示没有安装Android证书,安装证书只要在终端工具中执行以下的命令。

flutter doctor --android-licenses
复制代码

然后会提示读者选 Y/N ,不要犹豫,一律选择 Y ,就可以把证书安装好。

AS上安装Flutter插件

打开AS客户端,点击Preferences > Plugins > Browse Repositories > 输入Flutter > Install

如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

安装完成后,读者需要重新启动一下AS客户端。

安装其他软件

读者再次使用终端运行 flutter doctor 进行检测,如出现以下内容:

To install, run:
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller
✗ ios-deploy not installed. To install:
    brew install ios-deploy
✗ 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 https://flutter.io/platform-plugins
  To install:
    brew install cocoapods
    pod setup
复制代码

大概意思就是需要安装这些软件,而且Flutter推荐使用brew命令进行安装,因此读者可以直接在终端工具里输入下列命令:

brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
复制代码

每输完一个命令都要等待一会儿,等待软件包安装成功!

最后,希望大家都能安装成功,以上只是笔者的安装过程,不敢保证全部正确;不过笔者还是尽量详细的描述了如何在Windows、Mac上搭建Flutter开发环境的过程,希望可以帮助到Flutter的开发者。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

高效算法

高效算法

[法] Christoph Dürr、[法] Jill-Jênn Vie / 史世强 / 人民邮电出版社 / 2018-5 / 55.00元

本书旨在探讨如何优化算法效率,详细阐述了经典算法和特殊算法的实现、应用技巧和复杂度验证过程,内容由浅入深,能帮助读者快速掌握复杂度适当、正确率高的高效编程方法以及自检、自测技巧,是参加ACM/ICPC、Google Code Jam 等国际编程竞赛、备战编程考试、提高编程效率、优化编程方法的参考书目。一起来看看 《高效算法》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具