从0开始写一个基于Flutter的开源中国客户端（1）——Flutter简介及开发环境搭建 _ 掘金技术征文

初识Flutter & 常用的Widgets](https://gitee.com/vip204888/java-p7) |
| 4 | 从0开始写一个基于Flutter的开源中国客户端（4）
Flutter布局基础 |
| 5 | 从0开始写一个基于Flutter的开源中国客户端（5）
App整体布局框架搭建 |
| 6 | 从0开始写一个基于Flutter的开源中国客户端（6）
各个静态页面的实现 |
| 7 | 从0开始写一个基于Flutter的开源中国客户端（7）
App网络请求和数据存储 |
| 8 | 从0开始写一个基于Flutter的开源中国客户端（8）
插件的使用 |

Flutter简介

Flutter是什么

这是Flutter中文网上对于Flutter的介绍：

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

Flutter的特性

快速开发

毫秒级的热重载，修改后，您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。

Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载，并且不会丢失状态。

如果您是一名Android开发者，会发现在最初开发Android应用的时候，调试Android应用是一个非常繁琐的过程，经常是修改了某个地方的一点样式，就得重新打包运行App，非常耗时，后面AndroidStudio才推出Instant Run功能，让修改后的代码能快速预览在真机或者模拟器上，今天我们做Flutter开发，完全可以不必担心这种问题了，HotReload功能大大简化了调试应用的过程，修改了代码后，保存（需要在AS中设置）或者点击Flutter Hot Reload按钮，即可快速预览出新的界面。

富有表现力和灵活的UI

快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义，从而实现难以置信的快速渲染和富有表现力、灵活的设计。

使用Flutter内置美丽的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验。

如果您是一名ReactNative或者WEEX开发者，会很清楚在构建App UI的时候，往往要写很多的样式，才能实现一个比较漂亮的用户界面，而Flutter与之不同的是，Flutter内置了很多精美的组件，让你通过简短的一些代码，即可创建漂亮的UI。

原生性能

Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些都可以在iOS和Android上达到原生应用一样的性能。

通过平台相关的API、第三方SDK和原生代码让您的应用变得强大易用。 Flutter允许您复用现有的Java、Swift或ObjC代码，访问iOS和Android上的原生系统功能和系统SDK。

Flutter不同于Web App或者Hybrid App，使用Flutter开发的移动应用，完全是一个原生的App，拥有媲美原生应用的流畅体验。

Flutter开发环境搭建

在Flutter中文网上，关于搭建开发环境的教程已经写得比较详细了，这里笔者希望通过穿插一些图片，让各位初学Flutter的小伙伴能更轻松的搭建好开发环境，工欲善其事，必先利其器，下面就开始开发环境的搭建吧！

MacOS上搭建Flutter开发环境

1. 克隆Flutter代码

使用下面的命令克隆Flutter的代码：

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

如果你的网络环境不太好，请使用工具科学上网，或者使用码云提供的镜像，将上面的https://github.com/flutter/flutter.git改为码云的地址：https://gitee.com/mirrors/Flutter

2. 将Flutter代码的bin目录加入到系统环境变量中

在终端中进入用户目录：

cd ~

使用下面的命令打开.bash_profile文件：

open .bash_profile

如果文件不存在，就使用touch命令创建文件并打开：

touch .bash_profile
open .bash_profile

打开.bash_profile文件后，添加如下几行：

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

上面的第一行：

export PATH=$PATH:/Users/xxx/flutter/bin:$PATH

需要注意的是将/Users/xxx/flutter更换为你自己本机的flutter目录

第二行及第三行是在国内为了正常使用flutter相关的命令而添加的，具体说明可以参考这里

修改完.bash_profile后，保存并关闭该文件，然后使用如下命令让配置生效：

source .bash_profile

为了测试flutter环境变量是否配置成功，在终端中输入flutter命令并回车，如果出现flutter命令相关用法提示，则表示flutter环境变量配置成功，如下图所示：

3. 使用flutter doctor命令安装其他依赖

flutter doctor是用于检查flutter相关依赖有没有正确安装的命令，比如Android SDK是否安装，Xcode是否安装等，笔者的机器在运行flutter doctor后输出如下：

打叉的表示没有安装，打勾的表示已安装，对于Flutter开发而言，安装了FlutterSDK和AndroidStudio、Xcode、AndroidSDK等即可（你也可以使用VSCode作为Flutter的IDE，但是笔者推荐使用AndroidStudio，开发起来更便捷）

4. 配置你的AndroidStudio，安装相关插件

上面3步搞定之后，你还需要配置一下你的AndroidStudio，由于Flutter开发的主要使用语言是Dart（关于Dart的基础语法，可以参考我的第二篇博客），所以你还需要为AndroidStudio添加支持Dart的插件。

打开你的AndroidStudio，使用Command + ，快捷键，或者点击左上角的A​ ndroid Studio -> Preferences...菜单，打开AndroidStudio的设置界面，找到左侧的Plugins选项，并分别输入dart和flutter查找并安装插件，如下图所示：

笔者的机器上已安装这两个插件，所以右侧显示的是Uninstall按钮而不是Install按钮，如果你没有安装，需要点击右侧的Install按钮。

安装完插件后，还需要配置DartSDK的路径，在上面的设置对话框中，找到左侧的Languages & Frameworks -> Dart，然后在右边的Dart SDK path填入Dart SDK的路径，该路径就是最初我们clone flutter代码的目录中的/bin/cache/dart-sdk目录，如下图所示：

最后

小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料⬅专栏获取
图片转存中…(img-GodrZ4Y7-1719097157927)]一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料⬅专栏获取