最近實際學了一下Flutter ~ 抖動？之後，個人發現它的想法不太像一般手機APP的想法，反而比較像網頁？，都是以Widget去組合，把元件切的很細，一直去做組合，而且反而懂元件的種類，遠比寫程式硬寫來得重要… 今天，續上集的熱烈回應之後，我們就來做一個角落生物的列表，那以下的圖片Link呢，都僅做為教學之用，Let’s Go…

寫程式真的是一條活到老學到老的不歸路啊…這次就來學學flutter 3.0吧，終於安裝的是完整的ARM64環境。要先學什麼好呢？就學萬用的ListView吧…聽說Apple Silicon M2的Macbook Air在台開買了，想買，但是…沒錢錢…農曆七月到了，彈首通靈少女的插曲，算是滿應景的吧？XD，同時也祝大家父親節 / 付清節快樂…

離上一篇Flutter的文章，算算了有三年了吧，這篇只是單純比較、回憶一下而已。其實個人一直認為手機多平台開發是斜門歪道，但自從Flutter 3.0出現之後，似乎有了希望。

主要這一篇文章是要做一個比較完整的案例，個人一直覺得『挫折感才是成功的捷徑』，一直做『對的』事情很難成長的，唯有『挫折感』才能讓人記憶深刻，像我的好人卡已經打破櫻木花道50+的記錄了，真是めでたしめでたし啊，等我要推出好人撲克牌的時候，再麻煩大家再來抖內，集資一下吧。話不多說，大家一起來從做中學吧，以下只會將部分的Code貼上解說。

程式界似乎流傳著一句話：『Code永遠都是別人寫的好』，iOS界的Cocoapods、Android界的Gradle、Nodejs界的NPM…等管理工具，當然Dart界也有Pub，下載現成能用的Code是件幸福的事，除了能讓工作早日完工之外，也幫公司省了一大筆的電費(加班費？)，減少二氧化碳的排放量，為地球盡份心力，何樂而不為呢？現在我們就來試試如何下載別人寫好的package來試用一下吧。

接下來，我們要進入按鈕動作的世界了，先介紹FloatingActionButton，其實Android的也叫FloatingActionButton，想想這也沒錯，降低Android開發者的學習曲線。我們現在就來看看吧。

恐怖喔，恐怖到了極點喔，沒有想到短短數日，除了Flutter已經變成1.5版之外，而且Dart也變成了3.0版，更恐怖是它開始可以寫WebApp了耶，雖然Dart一開始就是想要取代JavaScript的，但是因為TypeScript可以原生支援JavaScript，所以就敗下陣來，而後在Flutter的加持下又重新受到大家的關注，如今Flutter藉由Dart可轉譯為JavaScript的特性，開始計畫性的侵蝕WebApp。好吧，就讓我們來做個簡單的WebApp吧。

這次是要說明Flutter的畫面佈局，在Flutter的世界中，萬物皆Widget，應該在iOS中算是UIView吧？UI的根源，一切都是由此而生，話不多說，讓我們踏出成功的第一步。

一開始還沒有接觸Flutter的時候，覺得寫Code是沒有問題的，但是UI要怎麼Debug呢？Android方面應該沒有什麼問題，因為是Google自家的東西嘛，但是iOS要怎麼做呢？後來就用VSCode它build出來的專案，分別用Android Studio跟Xcode開，個別去看UI，不過真的沒有用到原生的UI，Flutter的畫面都是『畫』出來的。後來想想真的很笨，明明在Android Studio上面就有Flutter inspector啊，加上Flutter的UI(Material風格 / Cupertino風格)都是Google工程師自己做出來的，並沒有用到兩個平臺的原生UI，想想這樣也對，如此一來UI就可以長得一模一 …

相信大家有開發過手機應用程式，它們上面都有附送視覺化的開發工具，不管是Android系統的XML，或是iOS系統的Storyboard，讓開發者能以更簡單、更視覺化方式去開發UI，而不是以純Code去撰寫畫面，除了開發方便之外，在工作上跟PM或是非程式人員的溝通上，以圖像化的方式說明，更能達到事半工倍的效果。像坊間有滿多原型工具的，像是桌面版的Axure RP、墨刀、摹客、手機版的POP等…，都是人與人溝通的好幫手。可惜的是，Flutter目前並沒有視覺化的UI設計工具，所有的畫面都必須寫Code的方式去處理，現在『呷好道相報』，有一個好工具要介紹給大家，它就是FlutterStudio.app，使用方式很直覺、方便，大家可以試試， …