【Day 9】canvas_clock - 一場 Flutter Clock 競賽中誕生的華麗Curves時鐘

12th鐵人賽 flutter

Jason Hung

2020-09-23 09:11:43

1804 瀏覽

分享至

今日要點
》前言
》介紹 Creative Creator Or Maybe Not Clock 專案
》下載並編譯 Creative Creator Or Maybe Not Clock 專案

前言

前面有介紹Flutter Clock競賽的時鐘，之所以會介紹這個 Github 專案，除了它很美麗外，而且它是 Code Quality 代碼質量最高的得獎者，聽起來就很想去看看程式碼長什麼樣，他的程式碼裡也寫了大量的說明。而且在編譯的過程中它讓我練習到了一個指令，所以今天來介紹它。

介紹 Creative Creator Or Maybe Not Clock 專案

這是一場由Google舉辦的一項基於Flutter技能的Flutter Clock競賽，包括Flutter，Google Assistant和Lenovo團隊的參與。

比賽內容:創建漂亮的鐘面UI，使用Flutter為Lenovo Smart Clock構建漂亮的鐘面UI，從而有機會贏得iMac Pro，Lenovo Smart Display或Lenovo Smart Clock。提交期限已於2020年1月20日結束。

比賽已經結束了，每個的評分標準如下，一共有4個獎項：
Visual Beauty 視覺美感
Code Quality 代碼質量
Novelty 創意新穎
Overall Execution 總體執行（包括可訪問性）

今天介紹的是 Code Quality 代碼質量最高分的時鐘，creativecreatorormaybenot/clock 157 的星星，觀注度也是不太高的但非常美麗專案。

在 README.md 的內容說明

有創意的創作者或者也可能不是的時鐘

creativecreatorormaybenot 好玩有趣的參加Flutter時鐘挑戰賽（這樣說很奇怪嗎？）。時鐘顯示僅使用Flutter Canvas 來繪製您在螢幕上看到的所有內容。這意味著沒有assets，沒有plugins，甚至沒有使用預建的widgets，即樹中的每個RenderObject都是我定制的。

聽起來，也就是說，程式中可能不會有太多 Flutter 的指令。跟比賽的用意好像有點不符合 XD

嗯，介紹中竟然還有 Flutter web 版的，哈，好強。

下載並編譯 Creative Creator Or Maybe Not Clock 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 humanbeans-clock 專案囉。

% git clone https://github.com/creativecreatorormaybenot/clock.git

Cloning into 'clock'...
remote: Enumerating objects: 33, done.
remote: Counting objects: 100% (33/33), done.
remote: Compressing objects: 100% (32/32), done.
remote: Total 4140 (delta 10), reused 7 (delta 1), pack-reused 4107
Receiving objects: 100% (4140/4140), 104.67 MiB | 5.77 MiB/s, done.
Resolving deltas: 100% (3184/3184), done.

% cd clock 
% flutter pub get

Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
Do not run this command from the root of your git clone of Flutter.

哈，這就是我前言說的，這個專案我練習到一個指令。
If you would like your app to run on android or ios, consider running flutter create . to generate projects for these platforms.

哈，仔細去看一下目錄，原來他只有lib的程式碼。並沒有專案的檔案。