flutter的安装与配置（windows+mac）

flutter的安装与配置（windows+mac）

什么是flutter？

Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。Flutter 可以与现有的代码一起工作。

在全世界，Flutter 正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

Flutter的特点如下所示：
1)跨平台
现在 Flutter 至少可以跨 5 种平台，甚至支持嵌入式开发。我们常用的如 MacOS、Windows、Linux、Android、iOS，甚至可以在谷歌最新的操作系统 Fuchsia 上运行。

到目前为止，Flutter 算是支持平台最多的框架了，良好的跨平台性直接带来的好处就是减少开发成本。
2) 丝滑般的体验
使用 Flutter 内置的 Material Design 和 Cupertino 风格组件、丰富的 motion API、平滑而自然的滑动效果和平台感知，为用户带来全新体验。
3) 响应式框架
使用 Flutter 的响应式框架和一系列基础组件，可以轻松构建用户界面。使用功能强大且灵活的 API（针对 2D、动画、手势、效果等）能解决艰难的 UI 挑战。
4) 支持插件
通过 Flutter 的插件可以访问平台本地 API，如相机、蓝牙、WiFi 等。可借助现有的 Java、Swift、Objective-C、C++ 代码实现对原生系统的调用。
5) 60fps超高性能
Flutter 采用 GPU 渲染技术，所以性能极高。用 Flutter 编写的应用可以达到 60fps（每秒传输帧数），这意味着它完全可以胜任游戏的制作。

官方宣称用 Flutter 开发的应用的性能甚至会超过原生应用。

下载安装flutterSDK（windows）

安装flutter的sdk有两种方法，第一种是通过git命令行下载，第二种是官网（国内镜像）下载flutter压缩包。

1.通过git命令行下载flutter

git 客户端下载链接地址：https://git-scm.com/downloads。
git下载好之后，按照提示进行安装。
但是在下载flutter之前，我们需要配置flutter的镜像环境（国内墙的原因，flutter官方给我们提供了镜像环境）。右键点击我的电脑，属性，打开高级系统设置，配置环境变量：
如图：
然后在桌面右键打开git bash，这是git的命令行窗口，在该窗口中输入git clone https://github.com/flutter/flutter.git，点击回车，等待flutter的下载完成（需要很长时间）。但有时候即使配置了flutter的镜像io也不能下载成功，这时候我选择直接在官网下载fluttersdk。

2.通过官网下载flutter

搜索flutter中文网，点击快速开始，出现了选择系统的命令，这里选择windows（最好使用下载器进行安装，比如某雷）。等待下载完成，解压到你想要解压的位置，
然后将flutter配置到环境变量中，如下图

配置完成后点击确定保存环境变量。

3.flutter依赖检查

点击win+R输入cmd打开命令行工具（cmd窗口），在cmd窗口运行：flutter doctor 检查任何依赖是否全部安装。

在这个过程中可能cmd窗口可能会出现假死的状态（一直卡在界面不动），这时候我们可以缩小/放大窗口来检查这个cmd是否在运行。

到上面图中，我们就看到flutter已经检查完成了，因为用的是Android Studio，所以上面还有两个Plugin 插件没有安装好：Flutter跟Dart插件

这时候我们打开Android Studio进行两个插件的安装。

4.在Androidstudio安装flutter和dart插件

打开Androidstudio的setting界面，进入plugin界面，在搜索栏搜索flutter和dart，点击install进行安装，安装完成后重新启动Androidstudio。

安装完成重启之后，Androidstudio的主界面就会出现“创建flutter工程”的选项，点击创建flutter工程，flutter工程的项目名必须为小写。

下载安装flutterSDK（MacOS）

创建flutter项目我推荐使用macOS，因为flutter是跨平台的应用框架，这也意味着使用flutter开发的程序需要编译ios应用，而ios的编译需要用到苹果独有的xcode。

1.安装jdk并配置环境

前往下载页面下载安装包：http://www.oracle.com/technetwork/java/javase/downloads/index.html，
下载完成后找到jdk安装路径，一般情况为：/Library/Java/JavaVirtualMachines/jdk-8.jdk/Contents/Home

也可以打开访达，选择菜单【前往】-【电脑】，随后进入路径【Macintosh HD】-【资源库】中看是否存在Java文件夹，然后找寻安装路径;

检查用户文件夹下是否存在.bash_profile文件，不存在则创建;
(创建.bash_profile：打开终端，输入touch .bash_profile，
打开.bash_profile：在终端中输入：open -e .bash_profile)

将如下代码添加到.bash_profile文件中

JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-10.0.1.jdk/Contents/Home
PATH=$JAVA_HOME/bin:$PATH:.
CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export JAVA_HOME
export PATH
export CLASSPATH

然后在终端输入source .bash_profile点击回车使配置生效。
到此，jdk的环境变量配置完成。

2.安装Android studio

前往下载页面下载安装包：https://developer.android.com/studio/
双击安装包，将应用拖拽到【应用程序】中，完成安装。
安装完成后打开Android Studio应用;
第一次打开会询问是否导入设置，按照需求选择，我是第一使用，我选择第二项;

第一次使用会弹出无法访问Android SDK，暂时点Cancel；

随后界面一路蓝色按钮点击即可。

最后一步是下载相关资源，下载结束后即可进入Android Studio了

再次打开.bash_profile文件，在该文件中添加如下配置，将Android studio的环境变量配置好：
export ANDROID_HOME=/Users/mingyu/Library/Android/sdk
export PATH=$PATH:${ANDROID_HOME}/tools
export PATH=$PATH:${ANDROID_HOME}/platform-tools
然后打开Android studio安装插件，在【首页】-【Configure】-【Plugins】中搜索插件Flutter和Dart进行安装；

3.xcode安装

直接在AppStore中搜索xcode进行安装。

4.brew安装

包管理工具，flutter必须的一些包需要用它来安装；
在百度搜索brew进入官方网站安装brew，安装好后，可以选择使用国内镜像，打开终端，执行下列命令：

cd /usr/local/Homebrew

git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git

cd /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core

git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git

brew update

5.flutter安装

flutter的安装可以选择使用git安装也可以直接进入官网进行安装。
若使用git安装，则mac上首先已经安装好了github，打开终端输入

git clone -b beta https://github.com/flutter/flutter.git

点击回车，等待安装完成。
若选择直接进入官网安装，则在百度搜索flutter中文网，点击立即开始，选择mac版进行下载，记住下载路径，在配置flutter环境变量时会用到。

flutter安装完成后，打开.bash_profile文件：

在终端输入open -e .bash_profile

在该文件中输入以下配置：

export PUB_HOSTED_URL=https://pub.flutter-io.cn # 国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn # 国内用户需要设置
export PATH={Fluter代码存放目录}/bin:$PATH

保存后关闭，
在终端输入source .bash_profile使配置生效。
并输入flutter doctor检查flutter的依赖项配置，按照依赖项的提示进行操作即可。

6.zsh环境配置bash环境

mac的终端有的会默认为zsh环境，因为我们的一些命令是配置在bash环境中的，所以在zsh环境中配置bash的镜像：
打开zsh环境配置，在终端输入：

open -e .zshrc

在zsh文件中找到#User configuration，没有就创建一个，然后添加以下代码：

source ~/.bash_profile

保存关闭，在终端执行source .zshrc使配置生效。
这样无论是zsh环境还是bash环境，其所用的配置都是.bash_profile的配置。
至此，我们可以创建flutter的第一行代码了！

flutter项目的运行图

是不是很酷炫呢？而且flutter项目最爽的是热重载，你不需要编写完代码再去重新打开模拟器，你可以crtl+s保存后直接在模拟器上看到变化