背景介绍

Flutter 可以说是2019年年度最火爆的UI框架之一,它是由谷歌使用dart语言开发的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面,它可以与原项目的Java || ObjectC || Swift 等原有的代码一起工作。

在 Flutter v1.5.4 中, 官方宣布并推出了 Flutter For Web的功能, 也就是说同一份代码可以在 android, ios, web端进行一次开发多端运行, 这个功能在当下百花争艳各种多端统一的框架中, 可谓一枝独秀.

以上都是正面, 说点负面的, 由于dart的生不逢时与flutter 无法在ios端进行热更新的, 并且官方在发布会上宣布暂停flutter热更新的研发, 这让flutter未来的道路扑朔迷离, 不过我们相信任何时候都是方法比困难多, 希望早日能有一个完整的方案解决ios端的热更新问题.

如果实在解决不了问题, 就解决提出问题的的人,这里顺路为国产鸿蒙系统做一个展望. 展望鸿蒙早日可以用它干掉苹果系统, 这样flutter热更新的问题也就解决了.

前言

长期以为. Flutter Go 前端技术团队一直在追随 Flutter 的内容更新, 不断的将新版本的内容快速的push给国内的开发者, 在整体开发过程中, 遭受过很多外界的质疑嘲讽, 类似列表卡顿, 闪退,垃圾等, 好在大家心态较好, 一直保持着自身对新技术新框架的求知的热情, 并将这份热情溶入我们的项目中.

在7月底 Flutter Go 项目正式在master推出2.0版本的代码.本次更新主要有以下主要内容

Flutter Go 官方网站 (官方消息，发布，学习)
Flutter Go web 版本 (web 版本学习帮助)
开放 Widget专栏内容页第三方共建(动态数据, 收录开源爱好者的投稿)
增加用户中心的概念 (专属个人的widget案例)
go-cli 共建工具 (Widget 内容投稿开发工具)
Flutter 日常文档内容的更新

在本次更新中. 可以看出有一半的内容是了关于 flutter go 内容共建方面.那我们为什么要在开发紧张的情况下, 做以下的功能呢?

说简单点是我们人手有限无法更快的转化内容, 往深入去考虑话可以发现, 国内的开发者在学习了解flutter的方式, 除了官网上的文档外, 只有去百度, 去论坛上不断的搜索, 他们的每一个人可能都是内容的生产者, 但同时也是内容的寻求者, 迄今为止未有一个成块或者成体系的容器去承载这些内容.

而我们关于共建的开发, 就是希望能解决这一问题, 能在当下用简单的方式, 将flutter 相关内容进行收录,分类整理, 动态的有效的推送给我们的国人的开发者们.将我们每一个人使用flutter的经验进行传播共享.

关于共建

我们开放了 Widget 栏目, 进行内容收录, 广大爱好者可以通过我们的工具通过编写markdown的形式, 将自己在日常中的文章经验整理到我们的项目中,并且可以动态的推送到所有安装App的手机上. 这样我们就可以在widget中看到自己的文章了.

一. 准备开发环境

言归正传, 善其事必先利其器, 为了能标准化的进行三方共建, 我们首先需要准备我们的开发工具go-Cli

我们默认大家都已经可以在本地可以正常运行flutter代码, 关于如何搭建开发环境, 请自行查看官方文档

1. 安装 dart 环境

因为flutter自身会带有dart环境. 为了避免使用环境的问题, 需要在电脑上手动安装dart环境

2. 拉取最新的fluttergo 主分支代码

goCli的源码暂时存放在fluttergo的仓库中, 所以建议拉取最新的代码.获取最新flutterGo代码分之后. 在项目下会有 go-cli 的文件夹.

3. 安装goCli所需依赖, 将将命令映射到全局

首先进入该文件夹并安装go-cli所需要的依赖 ,

cd go-cli
pub get

然后使用pub global命令将文件包注册到全局.

pub global activate --source  path  /{your project absolute path}/flutter-go/go-cli

使用pub global list命令查看全局包列表如果看到有 goCli 1.0.0则证明安装成功

goCli 1.0.0 at path "/{youpath}/flutter-go/go-cli"

上图是笔者个人电脑上成功安装goCLi的截图, 当成功到达这一步后. 我们就可以向项目中输出自己的文章内容了.

二. 在Widget栏目新增界面

这里我们以 Flutter 新组件 RangeSlider 为例

使用 goCli 工具增界面

这里为了规范目录结构, 使用 goCli createPage 命令用来自动化新增界面, 按照cli中提示的文案进行输入我们的界面参数

goCli createPage
//以下是笔者的输入参数
//{
//  "name": "RangeSlider",
//  "screenShot": "",
//  "author":"hanxu",
//  "title":"RangeSlider",
//  "email": "hanxu317@qq.com",
//  "desc": "RangeSlider widget",
//  "id": "cbffbf7c_52ae_4241_9c8a_5c9e1f92b096"
//}
//

过程如下:

当我们成功执行完命令后, 在以下位置会看到我们的新界面入口

编写界面内容

打开上图红杠中的文件夹, 更改目录下的 index.md 即可更新我们app中的内容

为了能动态的将markdown文件编译成flutter能够识别的代码. 我们需要在项目文件夹下使用 goCli watch 开启动态编译的功能, 在我们对markdown进行保存的时候, 会直接同步到我们的app中

goCli watch

执行过程如下

引用 flutter 组件

我们在编写widget界面描述组件的时候, 通过会引用 flutter widget, 像以下这样:

在markdown中我们无法直接实例flutter的代码, 在这里我们需要借助 goCli 完成实例代码的引用.如下:

goCLi createDemo

//  笔者这里的数据输入
//  "name": "RangeSlider",
//  "screenShot": "",
//  "author":"RangeSlider",
//  "email": "hanxu317@qq.com",
//  "desc": "RangeSlider widget demo"
//

创建成功后, 我们会在控制台下看到以下的信息:

复制 markdown中调用方式 : [demo:e5f958bc_52ae_4241_9c8a_5c9e1f92b096] 中的数据, 在开启goCli watch的条件下. 编辑我们的 index.md. 即可在app中看到我们的flutter组件

接下来, 我们就可以根据控制台给出的文件地址. 去修改对应的 Widget Demo 代码, 将我们要实现的 RangeSlider Demo 代码保存并点击重新运行,即可看到效果

部份开发者, 表示编写demo的时候, 无法触发热更新. 除重新运行外,此时点击app上的回退按钮. 重新进入即可看到最新的效果.

import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<Demo> {
  RangeValues valuess = RangeValues(20.0, 50.0);
  @override
  Widget build(BuildContext context) {
    return RangeSlider(
      values: valuess,
      //实际进度的位置
      inactiveColor: Colors.black12,
      //进度中不活动部分的颜色
      labels: RangeLabels('12', '23'),
      min: 0.0,
      max: 100.0,
      divisions: 1000,
      activeColor: Colors.blue,
      //进度中活动部分的颜色
      onChanged: (rangeValues) {
        setState(() {
          valuess = rangeValues;
        });
      },
    );
  }
}

整体流程如下:

提交PR

当我们完成了内容编写后. 我们就可以进行申请PR合并了. 本地将我们的相关改动提交到自己的远程仓库. 通常改动为以下几个文件

lib/page_demo_package/
lib/standard_pages/

提交前. 请确认自己的改动中. 不会参杂其他不必要的代码. 否则可能会被拒掉. 关于如何提交PR 请参考 pr提交流程

总结

本次记录, 已经申请提交到github分支. 大家可以进行参考.

FlutterGo 期待你我共建~ 具体 pr 细节和流程可参看 FlutterGo README 或直接钉钉扫码入群

Flutter Go 的另一种玩法