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

什么是flutter&＃xff1f;

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

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

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

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

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

下载安装flutterSDK&＃xff08;windows&＃xff09;

安装flutter的sdk有两种方法&＃xff0c;第一种是通过git命令行下载&＃xff0c;第二种是官网&＃xff08;国内镜像&＃xff09;下载flutter压缩包。

1.通过git命令行下载flutter

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

2.通过官网下载flutter

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

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

3.flutter依赖检查

点击win&＃43;R输入cmd打开命令行工具&＃xff08;cmd窗口&＃xff09;&＃xff0c;在cmd窗口运行&＃xff1a;flutter doctor 检查任何依赖是否全部安装。

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

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

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

4.在Androidstudio安装flutter和dart插件

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

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

下载安装flutterSDK&＃xff08;MacOS&＃xff09;

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

1.安装jdk并配置环境

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

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

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

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

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


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

2.安装Android studio

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

第一次使用会弹出无法访问Android SDK&＃xff0c;暂时点Cancel&＃xff1b;

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

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

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

3.xcode安装

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

4.brew安装

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

cd /usr/local/Homebrewgit remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.gitcd /usr/local/Homebrew/Library/Taps/homebrew/homebrew-coregit remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.gitbrew update


5.flutter安装

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

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


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

flutter安装完成后&＃xff0c;打开.bash_profile文件&＃xff1a;

在终端输入open -e .bash_profile


在该文件中输入以下配置&＃xff1a;

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


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

6.zsh环境配置bash环境

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

open -e .zshrc


在zsh文件中找到#User configuration&＃xff0c;没有就创建一个&＃xff0c;然后添加以下代码&＃xff1a;

source ~/.bash_profile


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

flutter项目的运行图

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