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;
        });
      },
    );
  }
}

複製代碼

總體流程以下: