Mac端Flutter的环境配置看这一篇就够了

前言

最近Flutter已经疯狂的刷屏了各个技术博客、技术网站,完全有一统天下的气势。所以最近也决定开始尝尝鲜,从零开始一步步的来探索Flutter的世界。就从环境搭建开始,记录一下自己探索Flutter的过程。

安装Flutter

首先我们可以在Flutter官网上面看到一些配置环境的步骤。这里就直接开干了,走起。

作为一个开发者,有一个学习的氛围跟一个交流圈子特别重要,这是一个我的iOS交流群:763164022,不管你是小白还是大牛欢迎入驻 ,分享BAT,阿里面试题、面试经验,讨论技术, 大家一起交流学习成长!

1、配置HomeBrew

我们在去配置Flutter的环境之前,需要先检查一下HomeBrew是不是最新的。

$ brew update

如果没有brew的话,可以去HomeBrew官网自行下载。这里就不赘述了,这里如果重新下载的话,看到下面的打印信息就说明下载完毕了。

2、下载SDK

接下来就是去官网下载SDK了。注意,这里下载SDK有两种方法,一是直接git clone -b beta https://github.com/flutter/flutter.git下载,二是自己在官网下载下来,如下图

这里我两种方法都试过了一遍,第一种方法实在是太慢了,在经历了耗费一个半小时下载到94%,最后提示失败了的过程之后,我决定还是用第二种方法,整个过程只用了3分钟的样子,相当满意。下载完之后,是一个名字叫flutter_macos_v1.5.4-hotfix.2-stable.zip的压缩包。 然后我们解压这个zip包,把解压出来的flutter文件放到根目录下即可。

3、配置环境变量

因为Flutter的SDK中包含了很多的命令行工具。我们就需要配置环境变量,所以我直接就安装到了根目录下了。

配置镜像

因为Flutter在运行的时候,就需要去官网下载一些需要的资源,但是因为天国特色的wall的原因,我们就需要镜像服务器,这个在官网上面有写的很明白,而且这是一个临时的镜像,后面还要以官网的镜像地址为准。

我们跳转到根目录

cd ~

就能找到这个.bash_profile隐藏文件,我们用vim打开这个文件

vim ~/.bash_profile

然后需要输入就把A键按一下进入编辑模式,把下面三个环境变量配置进去

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/xueliheng/flutter/bin:$PATH

注意下,第三个环境变量这里/Users/xueliheng/是我的根目录,然后/flutter/是我们刚刚解压的的zip包里面的flutter文件夹。上面两个环境变量是两个镜像地址,上文中也有说过。 接着shift+:然后输入wq保存并退出vim。输入如下命令:

source ~/.bash_profile

最后我们就可以验证一下flutter环境有没有配置成功了。输入:

flutter -h

看到如下如的打印信息就是配置成功了

4、配置Android Studio

如果没有下载Android Studio的话,就去官网去下载一下。 我们用flutter doctor命令去检查一下flutter的环境配置,我们可以看到如下打印

这里的每个?都是我们要去解决的问题。不过他有告诉你应该怎么做。比如第一个提示:

[?] Android toolchain - develop for Android devices
    ? Unable to locate Android SDK.

这就是让你去下载Android Studio。我们在下载完成之后,打开AS让他去下载一些应该下载的东西。 如果这里有提示你

[?] Android toolchain - develop for Android devices (Android SDK version 24.0.2)
    ? Flutter requires Android SDK 28 and the Android BuildTools 28.0.3

这就是在提示让你去升级一下SDK,然后命令如下

"/Users/xueliheng/Library/Android/sdk/tools/bin/sdkmanager" "platforms;android-28" "build-tools;28.0.3"

注意一下,这个地方的升级是需要”××ד的,如果有的小伙伴没有这个条件的话,我这边百度云上面给大家准备了一个链接,提取码: e48c,大家可以下载下来。下载下来之后解压到/Users/Library/Android/这个文件夹。把原先的SDK直接覆盖就行了,就已经是最新的SDK了。

接下来我们配置一下安卓的环境变量,还是在根目录下找到.bash_profile文件,并在其中添加四个环境变量

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/emulator
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

分别是:

  • 安卓sdk的路径
  • 安卓的模拟器路径
  • 安卓tools路径
  • 安卓平台工具

接下来我们再用flutter doctor检查的时候,显示的信息如下图

意思就是让我们去下载iOS的相关环境,我们先暂时放放,下面还有一个关于Android Studio的没有解决完

    ? Flutter plugin not installed; this adds Flutter specific functionality.
    ? Dart plugin not installed; this adds Dart specific functionality.

这个就是缺少Flutter插件的意思,那么我们就去AS里面去配置一下好了。打开AS的Preferences,点击Plugins,在搜索栏中输入flutter,找到相应的插件,然后Install。当跳出安装Dart插件的提示界面时,记得点击Yes进行安装。安装完毕之后restart IDE重启AS。 重启之后就能看到多了一个这个东西

我们再用flutter doctor检测一下

现在终于ok了。我们看到[?]Android Studio说明,安卓的环境基本上配置成功,接下来我们就配置一下安卓的模拟器就好了。

5、安卓模拟器配置

在AS中找到模拟器配置如下图并选择

接着就创建设备,选择设备

选择系统

最后点击下载就完成了。

6、配置iOS环境

我们配置完了安卓的环境,再来flutter doctor检测一下。

情况是这样的。目前1.5.4版本的Flutter需要匹配新版本的Xcode10.2.1。按照他提示的来试试,提示我Xcode版本太低了,需要升级Xcode

更新到最新的之后,继续走下面的步骤依旧会报错。那么我们可以试试下面的这个办法:

$ brew link pkg-config
$ brew install --HEAD usbmuxd
$ brew unlink usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller

这些执行完之后执行一下flutter doctor

最后还真是没错,全部配置完成了!那么我们就把iOS的也配置完毕了。

7、VSCode的使用

VSCode上面使用的话,就简单多了,这里我就简答的赘述一下。 只需要将DartFlutter插件都下载下来

然后command+shift+p输入flutter,选择Flutter:New Project

输入要创建的项目的名称和存放项目的地址。如果提示需要指明flutter的SDK的路径,那就选择根目录那个经过解压得来的flutter的文件夹就好了。 接下来是这样一个界面

接下来我们选择View->Start Debugging来运行项目。

当然这个过程需要你把Xcode的模拟器打开。运行完之后就能看到这个界面,也就是你的第一个Flutter工程啦!

8、Hot reload的使用

我们打开lib/main.dart文件,然后在其中找到

You have pushed the button this many times:

并把这个改为

You have clicked the button this many times:

那么我们就能看到界面上多了一个小闪电

我们现在如果command+s保存一下更改的话,就能很快的在模拟器上面看到相应的更改,不需要再重新去编译一边。这一点简直是太棒了!解决了iOS开发者一个大痛点啊!!!

结语

至此,flutter的环境搭建工作基本上就进行完毕了,整个过程大概耗时接近2个小时,这期间包括采坑、查资料、下载、×××...等等很蛋疼的事情。当然网速基本上是最大的障碍,浪费了很多的时间。所以也是需要一定的耐心来完成的。 后面的文章也会持续的更新,最近有点懈怠,OpenGL系列的文章有点拖更的节奏,这个后面会补起来。Flutter我也才刚刚接手,也是慢慢的来采坑,也会以此来记录自己的学习经历,也希望能多多跟大家交流。 再次我附上自己的邮箱[email protected]欢迎讨论交流。

作为一个开发者,有一个学习的氛围跟一个交流圈子特别重要,这是一个我的iOS交流群:763164022,不管你是小白还是大牛欢迎入驻 ,分享BAT,阿里面试题、面试经验,讨论技术, 大家一起交流学习成长!

原文地址:https://blog.51cto.com/14121524/2410178

时间: 2024-11-02 02:27:35

Mac端Flutter的环境配置看这一篇就够了的相关文章

Flutter之环境配置与项目搭建

Flutter之环境配置与项目搭建 一,介绍 1.1,Dart Dart 是一种 易于学习. 易于扩展.并且可以部署到 任何地方 的 应用 编程 语言.并且同时借鉴了Java和JavaScript.Dart在静态语法方面和Java非常相似,如类型定义.函数声明.泛型等,而在动态特性方面又和JavaScript很像,如函数式特性.异步支持等. 1.2,Flutter Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,

Java中的多线程你只要看这一篇就够了

Java中的多线程你只要看这一篇就够了 引 如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现.说这个话其实只有一半对,因为反应"多角色"的程序代码,最起码每个角色要给他一个线程吧,否则连实际场景都无法模拟,当然也没法说能用单线程来实现:比如最常见的"生产者,消费者模型". 很多人都对其中的一些概念不够明确,如同步.并发等等,让我

Java中的多线程=你只要看这一篇就够了

如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现.说这个话其实只有一半对,因为反应“多角色”的程序代码,最起码每个角色要给他一个线程吧,否则连实际场景都无法模拟,当然也没法说能用单线程来实现:比如最常见的“生产者,消费者模型”. 很多人都对其中的一些概念不够明确,如同步.并发等等,让我们先建立一个数据字典,以免产生误会. 多线程:指的是这个程序(一个进程)运

中后台产品的表格设计,看这一篇就够了(原型规范下载)

中后台产品的表格设计,看这一篇就够了(原型规范下载) 2018年4月16日luodonggan 中后台产品的表格设计,看这一篇就够了(原型规范下载) 经过了将近一年的后台产品经历,踩了很多坑,试了很多错,也学习到了很多东西,目前也形成了自己的一套规范.本文将其中的部分收获汇总成文,希望能够对大家有所帮助. 后台产品有一个很重要.常见的元素,就是表格.表格承担着详情入口.数据展示的功能,看似简单,其实里面的细节特别多.在以效率为最重要的需求的后台产品中,如何设计一个能够高效率地进行查看和编辑的表格

关于 Docker 镜像的操作,看完这篇就够啦 !(下)

原文:关于 Docker 镜像的操作,看完这篇就够啦 !(下) 紧接着上篇<关于 Docker 镜像的操作,看完这篇就够啦 !(上)>,奉上下篇 !!! 镜像作为 Docker 三大核心概念中最重要的一个关键词,它有很多操作,是您想学习容器技术不得不掌握的.本文将带您一步一步,图文并重,上手操作来学习它. 目录: 一.Docker 删除镜像 1.1 通过标签删除镜像 1.2 通过 ID 删除镜像 1.3 删除镜像的限制 1.4 清理镜像 二.Docker 创建镜像 2.1 基于已有的镜像创建

iOS动画详解(学习动画看这一篇就够了)

iOS动画详解(学习动画看这一篇就够了) 一.基础知识 CAAnimation.png 二.CABasicAnimation 1. 动画的属性和解释 2.属性值的解释 repeatCount : 如果在swift中需要一直不断重复:Float.infinity,OC:HUGE_VALF timingFunction: timingFunction.png kCAMediaTimingFunctionLinear--在整个动画时间内动画都是以一个相同的速度来改变.也就是匀速运动.一个线性的计时函数

[转]关于深度学习,看这一篇就够了

关于深度学习,看这一篇就够了 原文地址:http://www.dlworld.cn/XueXiSuanFa/13.html [日期:2016-04-26] 来源:36氪  作者: [字体:大 中 小] 编者按:本文作者王川,投资人,中科大少年班校友,现居加州硅谷,个人微信号9935070,36 氪经授权转载自其个人微信公众号 investguru. 一 2016 年一月底,人工智能的研究领域,发生了两件大事. 先是一月二十四号,MIT 的教授,人工智能研究的先驱者,Marvin Minsky 去

源码时代前端干货分享| AE如何实现文字消散效果?看这一篇就够了!

源码时代前端干货分享| AE如何实现文字消散效果?看这一篇就够了!首先:1.新建合成IMAge012.新建一个纯色层做背景(如果自带背景可以忽略)02 3.新建文本图层034.打上文字,调整文字大小,让文字在画布中居中04 然后:5.给文字添加一个蒙版05 6.在0秒的位置的蒙版路径打上关键帧067.0秒的时候蒙版路径最大,3秒的时候蒙版路径最小078.继续添加蒙版羽化089.再新建一个合成为置换0910.新建一个纯色的白图层1011.给它添加一个蒙版1112.在蒙版路径上打上关键帧13.0秒的

用markdown写博客,看这一篇就够了,附markdown文件分享

0. 前言 为什么用markdown写博客? 在写博客的过程中,最大的"痛点"在于写作中总是被"格式"之类的困扰,无法专注于内容写作: 在线写博客,会被网络或者编辑器本身所拖累: 本文介绍的markdown写作,可以使你专注于博客内容本身,写好即成稿: 更重要的是,博客内容及相关素材保存在本地,可以几乎不用修改就可以发布在不同的平台,类似java程序的"一次编写,到处运行". 记得上次用markdown写博客,尽管我有markdown使用经验,但