Flutter Go 的另外一种玩法

时间 2019-11-07

标签 flutter 另外一种玩法繁體版

原文原文链接

背景介绍

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

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

以上都是正面, 说点负面的, 因为dart的生不逢时与flutter 没法在ios端进行热更新的, 而且官方在发布会上宣布暂停flutter热更新的研发, 这让flutter将来的道路扑朔迷离, 不过咱们相信任什么时候候都是方法比困难多, 但愿早日能有一个完整的方案解决ios端的热更新问题.android

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

前言

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

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

Flutter Go 官方网站 (官方消息，发布，学习)web
Flutter Go web 版本 (web 版本学习帮助)windows
开放 Widget专栏内容页第三方共建(动态数据, 收录开源爱好者的投稿)bash
增长用户中心的概念 (专属我的的widget案例)markdown
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 或直接钉钉扫码入群