一统江湖？——Flutter for All Screens初体验

时间 2019-11-06 标签一统江湖 flutter screens 体验

前言

2018年2月27日，Google发布了Flutter的第一个Beta版本，因为本身是一个Google粉，因此很快就下载尝鲜了，以后还在简书上发过一篇博客《你好，Flutter》，是个人第一篇阅读量过10w的文章。在学习flutter期间也作过一些零散的笔记，但因为当时觉悟不高，并没整理成册，并且当时正准备保研，手头事情不少加上可学习的资料不多，中途便放弃了。html

机缘巧合，最近阅读到了一篇谷歌开发者的文章《Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop》，说是如今的Flutter已经能够运行在Android、ios、MacOS、Linux、Windows和嵌入式设备上了。在好奇心的做祟下，我尝试着利用Flutter在一些平台上运行了一些demo，本文即是记录我利用Flutter实现了移动端、桌面端和Web端的过程，因为移动端应用的demo网上教程不少，因此本文尽快略过，重点将放在桌面端和web端。node

Flutter for Mobile

初次了解到Flutter的时候即是一个横跨iOS和Android两个平台的框架，不管是在Mac/Linux仍是Windows上搭建Flutter的开发环境都很简单，Windows上的环境搭建能够参考这篇文章👉《安装搭建Flutter环境》，Mac/Linux能够参考中文官网给出的教程👉《安装和环境配置》linux

若是你在中国的网络环境下使用 Flutter，注意必定要按照要求设置好两个环境变量ios
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码

配置好Flutter开发环境后，咱们经过Android Studio新建一个Flutter项目，而后启动iOS/Android模拟器，选中要运行的模拟器，直接运行Flutter项目便可。运行结果以下：git

这里针对移动端的介绍不多，主要是由于官方文档已经讲解的很是详细，直接阅读便可👉《安装和环境配置》github

Flutter for Desktop

先决条件

要使Flutter在桌面上运行，咱们必须使用Flutter的master分支。执行如下代码便可：web

flutter channel master
flutter upgrade
复制代码

如今咱们再来执行：shell

flutter doctor
复制代码

应该是能够看到相似于下图的结果（截至2019年7月1日）：macos

默认状况下，Flutter没有启用桌面支持。咱们能够经过设置环境变量ENABLE_FLUTTER_DESKTOP = true来实现。npm

为此，咱们须要在不一样的终端中执行不一样的命令（临时生效）：

在macOS 或者 Linux上:

export ENABLE_FLUTTER_DESKTOP=true
复制代码

在 Windows 上:

PowerShell:

$env:ENABLE_FLUTTER_DESKTOP="true"
复制代码

CMD:

set ENABLE_FLUTTER_DESKTOP=true
复制代码

**Tips:**以上设置环境变量的方式是临时的，只会在当前终端中生效，想要永久生效请自行配置系统的环境变量

如今咱们来执行如下命令，来确保桌面设备已经链接了。

flutter devices
复制代码

若是设置成功是会出现下面的结果的：

$ flutter devices
1 connected devices:

macOS  • macOS  • darwin-x64     • Mac OS X 10.14.5 18F203
复制代码

针对不一样系统手动配置

时至今日，Flutter for Desktop仍然是一个实验性功能，这意味着Flutter没有工具支持，没法经过flutter create命令直接新建出一个桌面应用程序。所以，惟一的选择是手动配置系统特定的文件。值得庆幸的是，Google的Flutter团队已经为咱们作好了这件事。

不过在运行Flutter for Desktop以前，咱们须要先针对Windows/MacOS进行手动配置（Linux的配置与MacOS相似）。

MacOS

执行flutter doctor -v，根据输出信息选择咱们须要安装配置的包，Xcode的下载直接在Mac App Store下载便可，Xcode相关开发包的安装直接执行下面的命令便可。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
复制代码

而后经过输入命令 sudo xcodebuild -license 来确保已经赞成 Xcode 的许可协议。

这里重点提一下CocoaPods的安装配置。

CocoaPods是iOS开发、macOS开发中的包依赖管理工具，效果如Java中的Maven，nodejs的npm。

安装只需执行如下命令：

sudo gem install cocoapods
复制代码

若是下载太慢能够更换一下国内源

gem sources --remove https://rubygems.org/
gem sources -a http://gems.ruby-china.com/
复制代码

而后咱们须要对CocoaPods初始化，因为 CocoaPods 包有500兆左右的大小，直接执行pod setup会从 github 上 clone 得极其漫长，这里给出解决方案。

依次执行下面的命令便可：

cd ~/.cocoapods/repos
pod repo remove master
git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
pod setup
复制代码

Windows

感谢微软爸爸提供的VS套件，不少开发环境经过Visual Studio直接安装就能够了，如何下载安装VS自行百度，安装的时候记得选如下桌面开发的套件：

运行官方demo

根据不一样系统配置好环境后，咱们即可以开始运行Google团队提供的Flutter for Desktop案例了。

在终端中执行下述命令：

git clone https://github.com/google/flutter-desktop-embedding.git
cd example
复制代码

example文件夹是这个demo的示例应用程序，它具备全部必需的构建脚本，这些脚本在MacOS，Windows和Linux上运行Flutter是必需的。若是咱们在VS Code中打开示例文件夹，咱们将可以看到以下内容：

lib/main.dart是整个flutter项目的启动文件，这里咱们无需过多关注linux/macos/windows里面的内容。

接下来在example目录下执行下面命令来获取项目所须要的依赖文件

flutter packages get
复制代码

在咱们开始运行咱们的应用程序以前，还有最后一步。虽然咱们以前已经配置好了Flutter的开发环境，可是因为桌面开发仍有一些配置项是不同的，因此咱们须要执行下面一个命令来确保全部须要的依赖都被安装成功了。

flutter precache --macos
复制代码

根据你本身的系统切换所需的该命令以后的参数。

如今咱们能够将咱们的Flutter应用程序做为桌面应用程序运行了。

在终端执行：

flutter run
复制代码

终端输出的结果应该是相似下面这样的：

运行起来的结果应该以下图所示：

是否是和以前的App如出一辙呢？运行在windows上也是同样的（由于我没有在Linux下配置Flutter的环境，因此这里就不放出来了）。

Tips：若是没法运行demo，记得执行flutter doctor -v命令查看究竟还缺乏什么依赖

简单分析下lib/main.dart

其实咱们新建一个Flutter的移动端项目时的main.dart代码和该demo中的main.dart代码几乎相似，但在开头几行仍是有些不同的地方。

Flutter for Mobile：

Flutter for Desktop：

此代码提供了一种覆盖默认目标平台的方法。这能够根据应用程序的要求使用。要了解更多相关信息，能够查看《Target Platform Override》

运行已经存在的Flutter项目

如今咱们有了必要的配置文件和脚本。也走过了基本的配置流程，接下来咱们就能够在桌面上运行几乎任何已有的Flutter项目了。

有两种方法能够实现上述需求：

咱们能够将系统特定文件夹（linux，mac或windows）从example目录复制到已有项目目录（和andorid或ios目录同级）而且在main.dart中按照上一节的区别修改部分代码。
咱们可使用已有项目中的lib文件夹替换example目录中的lib文件夹，并将pubspec.yaml文件替换为现有文件。

Flutter Community的Ayush Shekhar建议采用第二种方式，由于他在使用第一种方式迁移的时候常常出问题，不过我在运行的时候并无发现问题，因此因人而异吧。

以前作过一款名为“果核”的校园App，这是他运行在mac上的亚子。

**Tips：**我在使用Flutter for Desktop的时候发现了一个小Bug，就是拖动窗口调整大小时，窗口总体会出现红色的闪烁。我猜多是窗口绘制刷新致使的。

Flutter for Web

说完了Flutter for Mobile/Desktop，咱们来请出今天的最后一位嘉宾，Flutter for Web。

与其说是Flutter for Web倒不如说是Dart for Web，从 Dart 这个语言诞生之初，它就一直在尝试编译成 JavaScript。谷歌怎么想的，咱也不知道，咱也不敢问。在Flutter刚诞生的时候其实并无针对web的计划，不事后来谷歌的工程师大笔一挥，干脆重写了新的dart:ui，这也就致使不可能将全部的Flutter代码都运行到Web端（有些特性是平台独有的），所以这里咱们仅仅是跑通官方Demo。

安装Dart SDK

篇幅缘由，这里就只给出在Mac上安装Dart SDK的过程了。由于要开发web工程，咱们还须要安装 Dartium 和 Content Shell，好在Mac下的homebrew很是强大，这里直接执行下面命令就能够了。

brew tap dart-lang/dart
brew install dart --with-content-shell --with-dartium
复制代码

若是以为brew下载太慢的话，能够考虑更换中科大的镜像源，只需执行下面的命令：

替换brew.git:
cd "$(brew --repo)"
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git

替换homebrew-core.git:
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
复制代码

以后再执行brew install就会快不少了。

安装完成后。在终端中执行下述命令来检查Dart SDK的版本：

brew info dart
复制代码

安装 flutter_web 开发工具包

因为Flutter for Web采用的库和Flutter有所差别，因此咱们还须要安装webdev包，终端执行下面语句便可：

flutter pub global activate webdev
复制代码

确保$HOME/.pub-cache/bin路径在你的环境变量中，这样你就能够直接在终端中执行webdev命令了。

新建一个Flutter for Web项目

在VS Code中打开命令面板后输入flutter web则会自动提示你让你新建一个web程序，而后输入项目名便可建立一个web项目。

而后执行flutter packages get便可安装依赖。

启动你的第一个web项目

如今来执行最后一个命令来运行项目：

webdev serve
复制代码

终端的输出结果以下：

咱们打开浏览器并输入：http://127.0.0.1:8000，而后咱们就能够在浏览器上看到神奇的结果了：

目前发现Firefox和Chrome都可运行，Safari没法显示界面，缘由还有待查找。

回顾代码咱们能够发现Flutter for Web项目的main.dart和普通的Flutter项目的代码几乎一致：

惟一的区别就是第一行中引入的fltter_web库了。

由于对Flutter for Web我也没过多了解，这一部分推荐你去查看官方文档了解更多关于咱们上面执行的命令或者网页的信息。

总结

Flutter的发展势头和谷歌想要让Flutter一统全部平台的野心你们是有目共睹的，就在前不久，Fuchsia OS的官网也悄然上线，做为新系统的指定开发工具，Flutter天然备受关注。目前Flutter for Mobile已经发展的挺好了，虽然配置Desktop应用和Web应用时仍有些繁琐，开发时仍会有许多bug，但冰冻三尺非一日之寒，咱们应该给予足够的耐心。

参考文章