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

10,801 阅读7分钟

近几年,移动端跨平台开发方案层出不穷,从Facebook开源ReactNative,到阿里跟进WEEX,前端技术在移动端跨平台开发中大展身手,笔者作为一名Android开发者,经历了从Reactjs到Vuejs的不断学习。而在2018年,我们的主角变成了Flutter,这是Goolge开源的一个移动端跨平台解决方案,可以快速开发精美的移动App。笔者在2018年3月份有幸结识了Flutter,通过短暂的学习,进而开发了一款基于Flutter的开源中国客户端App(源码:码云, GitHub)。2018年5月,Google IO大会召开后,Flutter在开发者中名气越来越大,参与到Flutter开发中的开发者也越来越多,笔者遂萌生想法,希望用博客记下开发基于Flutter的开源中国客户端的过程,希望跟大家一起学习,一起进步!

索引 文章
👉1 从0开始写一个基于Flutter的开源中国客户端(1)
Flutter简介及开发环境搭建 | 掘金技术征文
2 从0开始写一个基于Flutter的开源中国客户端(2)
Dart语法基础
3 从0开始写一个基于Flutter的开源中国客户端(3)
初识Flutter & 常用的Widgets
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 + ,快捷键,或者点击左上角的Android Studio -> Preferences...菜单,打开AndroidStudio的设置界面,找到左侧的Plugins选项,并分别输入dartflutter查找并安装插件,如下图所示:

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

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

Windows及Linux上配置开发环境

Windows及Linux上配置开发环境跟Mac上类似,都是clone代码,配置环境变量,运行flutter doctor,配置IDE这几步,具体配置过程就不赘述了,大家可以参考Flutter中文网中的教程:

参考

我的开源项目

  1. 基于Google Flutter的开源中国客户端,希望大家给个Star支持一下,源码:
  1. 基于Flutter的俄罗斯方块小游戏,希望大家给个Star支持一下,源码:
上一篇 下一篇
基于Google Flutter的开源中国客户端
支持Android与iOS | 掘金技术征文
从0开始写一个基于Flutter的开源中国客户端(2)
——Dart语法基础

从 0 到 1:我的 Flutter 技术实践 | 掘金技术征文,征文活动正在进行中