Flutter学习指南：开发环境搭建

本文由 爱学园平台 进行联合编辑整理输出

原作者&＃xff1a;爱学园——莫比乌斯环

虽说Flutter出现有一段时间了&＃xff0c;但大家对它的了解却不是很深&＃xff0c;但直到2018谷歌开发者大会在上海的召开&＃xff0c;它才真正进入开发者的世界。Flutter的出现为跨平台开发开辟了新的方向&＃xff0c;但是与之相应的中文学习文档却不是很多&＃xff0c;因此针对这一考虑我们会持续输出一系列Flutter方面的实践性学习文档以及配套demo供大家学习。万里之行始于足下&＃xff0c;下面我们就开始Flutter入坑的第一篇——Flutter开发环境搭建。

Flutter 安装

关于Flutter的安装&＃xff0c;本文以 macOS 系统为例&＃xff0c;就 macOS 系统下Flutter的安装细节进行说明。其它平台&＃xff08;Windowns、Linux&＃xff09;可参考官方文档安装步骤。

自备梯子或使用国内镜像

做过开发的都晓得&＃xff0c;国内访问Google是不行的&＃xff0c;因此此处我们需要做一些前期配置&＃xff0c;拥有梯子的可自行跳过。没有梯子的同志也不用担心&＃xff0c;Flutter官方并不会放弃我们这么重要的用户&＃xff0c;他们专门为中国开发者搭建了临时镜像&＃xff0c;大家可以将环境变量加入到当前用户环境中&＃xff0c;具体操作如下&＃xff1a;

export PUB_HOSTED_URL&＃61;https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL&＃61;https://storage.flutter-io.cn


这里的配置仅限当前窗口使用&＃xff0c;如果需要永久使用请参考后面小节更新环境变量配置 注意&＃xff1a;此镜像为临时镜像&＃xff0c;并不能保证一直可用&＃xff0c;读者可以关注Using Flutter in China以获得有关镜像服务器的最新动态。

获取Flutter SDK

获取 Flutter 有多种方式&＃xff1a;

1. 去Flutter官网下载稳定可用的安装包&＃xff0c;转到下载页
2. 第一种方式可能需要翻墙&＃xff0c;也可直接从Github上Flutter项目下去下载安装包&＃xff0c;转到下载页。对应指令git clone -b dev https://github.com/flutter/flutter.git(可针对当前版本做命令的调整)

上述两种第一种需要解压&＃xff0c;第二种不需要&＃xff0c;总之将它们放置到您想放到的地方

更新环境变量

大家都知道此时flutter还不是全局变量&＃xff0c;为了方便我们以后的调用&＃xff0c;这里我们需要做一些全局性的配置&＃xff0c;具体命令如下&＃xff1a;

export PATH&＃61; ~/developer/flutter/bin:$PATH //flutter 存放位置&＃xff0c;替换为您自己的即可
export ANDROID_HOME&＃61;"~/Library/Android/sdk" //android sdk目录&＃xff0c;替换为您自己的即可
export PATH&＃61;${PATH}:${ANDROID_HOME}/tools
export PATH&＃61;${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL&＃61;https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL&＃61;https://storage.flutter-io.cn


打开&＃xff08;或创建&＃xff09;~/.bash_profile文件,将下面的命令粘贴进去,注意&＃xff1a;此处Flutter与Android SDK的路径需要替换为自己的&＃xff0c;保存之后运行source $~/.bash_profile刷新当前终端窗口。

运行 flutter doctor

经过上面的步骤&＃xff0c;此时我们就可以运行以下命令查看是否需要安装其它依赖项来完成安装&＃xff0c;这个过程第一次可能需要耗费一段时间&＃xff0c;下次就会快很多&＃xff1a;

flutter doctor


该命令依赖检查您的环境并在终端窗口显示报告。如下是我运行输出的结果&＃xff1a;

运行异常情况&＃xff1a;

[-] Android toolchain - develop for Android devices• Android SDK at /Users/obiwan/Library/Android/sdk✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ• Try re-installing or updating your Android SDK,visit https://flutter.io/setup/#android-setup for detailed instructions.


一般的错误会是xcode或Android Studio版本太低、或者没有ANDROID_HOME环境变量等&＃xff0c;请按照提示解决。

运行正常情况&＃xff1a;

• 第一部分监测的是Flutter相关依赖项结果&＃xff0c;如果第一次运行会先去下载&＃xff1b;
• 第二部分针对Android SDK和Java方面的检测&＃xff0c;如果缺失&＃xff0c;对应条目前方会显示✗红色标记&＃xff0c;那就需要您根据缺失条目提示进行配置&＃xff0c;这里不做深入&＃xff1b;
• 第三部分针对编译器&＃xff08;Android Studio&＃xff09;内部插件&＃xff08;Flutter、Dart&＃xff09;的安装检测&＃xff0c;插件的安装将会在下一章节详细讲解&＃xff1b;
• 第四部分是对连接设备的检测&＃xff0c;我这里没有启动设备&＃xff0c;则显示无可用设备。

编译器Flutter插件安装

适合Flutter使用的编译器有很多&＃xff08;IDE、VSCode、Xcode&＃xff09;&＃xff0c;这里我以Android Studio为例演示下如何安装Flutter相关插件&＃xff08;注意&＃xff1a;这里Android Studio需要 3.0或更高版本&＃xff09;&＃xff1a;

1. 首先启动Android Studio&＃xff0c;打开插件首选项(Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)&＃xff1b;
2. 选择 Browse repositories…, 选择 Flutter 插件并点击 install&＃xff08;此处Dart插件回一起安装&＃xff09;&＃xff1b;
3. 重启Android Studio后插件生效&＃xff1b;

体验Flutter

经过上面的步骤&＃xff0c;Flutter需要的相关环境基本已经配置完毕&＃xff0c;下面我们就创建一个工程实践下&＃xff0c;我们的配置是否可行&＃xff1a;

创建应用

1. 打开Android Studio 选择File>New Flutter Project
2. 选择Flutter application作为project类型&＃xff0c;然后点击Next
3. 输入项目名称&＃xff08;如myapp&＃xff09;&＃xff0c;然后点击Next
4. 点击Finish
5. 创建完成

下面请看默认Flutter工程的目录结构&＃xff1a;

运行

注释&＃xff1a;下一篇我们将会带领您如何一步步创建我们第一个Flutter应用与相关代码结构分析

       致亲爱的读者朋友们&＃xff0c;从今日起我们《爱学园平台》将会持续推出Flutter实践性学习文档以及疑难问题分析&＃xff0c;如果您有需要&＃xff0c;但我们还没有输出的疑难问题&＃xff0c;您也可以给我们留言&＃xff01;我们将会根据您的需求优先输出&＃xff0c;谢谢&＃xff01;