Flutter微框架Nylo v6發布：開發效率再升級，路由與表單管理迎來革新

Nylo v6震撼登場！Flutter微框架迎來史詩級更新

Nylo 這個 Flutter 微型框架，最近釋出了新一代，好像已經等了一陣子才輪到這次更新。其實說是大改版，倒也不盡然，主要是把流程又打磨得細緻點，比如路由、API 服務、通知、表單跟狀態處理那些，據說有不少地方變好用了。不過要感謝參與過 Nylo 旅程的人，也不是誰都一路陪著走下來。

有人會形容 Nylo 是頗有自己風格的框架，不曉得是不是每個人都這麼認為啦，但用它來整理 Flutter 專案的確省了些力氣。有一種講法是新版功能塞進去不少，看起來對建構 app 或許更輕鬆。不過實際怎麼樣還得大家自己試試看。

至於 v6 到底帶來多少新玩意？大致上和以前比起來，有些細節應該算完善了。比方說，有人注意到路由切換好像流暢些；API 的部分，少了點重複手續。當然，每次更新都會有用戶覺得剛上手就遇見新東西，也不是壞事，只是學習曲線偶爾又多繞一點圈。

其實講回頭，如果你之前沒碰過 Nylo，它主打就是想幫 Flutter 開發者減少雜亂，把事情做簡單一點。這次能不能突破原本的界線？嗯，大概只能說目前看起來有那麼一些苗頭吧。

手把手教你安裝Nylo，從克隆到首頁一氣呵成

希望你會覺得這些新東西挺有趣的。
最近 Nylo 有了一些變動，下載方式嘛，大致上還是那幾種：可以在 GitHub 上抓下來，也有人直接去官網點吧。反正 `git clone https://github.com/nylo-core/nylo.git` 這個指令用過的人應該不少，網站地址呢也就那個：https://nylo.dev。
第一次建置和執行時，螢幕上會跳出 Nylo 那個預設首頁畫面，有點像剛開箱手機看到的初始設定。有時候我還會愣住想到底要不要多研究一下。

功能很多，不過這裡挑幾個常被提到的說說——細節就不展開了，如果真的感興趣，可以慢慢翻官網上的教學檔。不然這篇可能寫太長，容易讓人看累。

大概會簡單碰到像路由、導航中心、表單、客製化命令、本地推播通知、狀態處理等等…還有未來可能走向之類話題。

路由這塊好像經過一輪調整，比以前順一些。例如在 `/routes/router.dart` 裡面，那段程式碼大致長下面這樣：

appRouter() => nyRoutes((router) {

      router.add(LandingPage.path).initialRoute();



      router.add(DashboardPage.path).authenticatedRoute();

      

      router.add(BlogPostsPage.path);

      router.add(PostDetailPage.path);

      

      router.add(VideosPage.path);

      router.add(VideoDetailPage.path);



      router.add(LoginPage.path);

      

      router.add(NotFoundPage.path, unknownRoute: true);

});

如果臨時需要加頁面，其實也不用自己手刻，只要敲一行指令：
`dart run nylo_framework:main make:page [MY PAGE]`
舉例好了，比如你想弄個商品頁，就可以打：
`dart run nylo_framework:main make:page products_page`
隨後它就自動塞進你的路由檔案裡，還會生出可自訂的小元件（widget），省得手忙腳亂。

以上講的不全，難免有遺漏，但大概輪廓就是如此。有些地方其實也不必太拘泥細節，多數功能摸熟了自然就順手了。

Comparison Table:

特點	描述
Nylo框架	簡化表單生成與驗證規則設定，提供多種欄位類型選擇。
自動生成	透過一兩行指令可快速產生表單程式碼，提升開發效率。
彈性設定	支持多種樣式、驗證規則及欄位組合，自定義程度高。
指令功能	允許從終端機直接創建新命令，增強專案操作便利性。
推播通知簡化	使用簡單的API調用即可實現本地推播通知功能。

路由系統大進化！初始頁面與權限控制變得更直覺

有時候在設定應用路由時，大家可能會想在頁面之間切換，或者乾脆一開始就讓某個頁面成為進入點。這裡的寫法其實不難，大致上只要利用 `.initialRoute()` 這個方法就能處理，大概像是：

appRouter() => nyRoutes((router) {
...
router.add(ProductsPage.path)

// 通常會把帳號那頁設成入口
router.add(AccountPage.path).initialRoute();

router.add(SettingsPage.path);
});

另外，好像還可以用 `when` 來判斷什麼狀況下才把某個頁面當作起始。例如說，有些人會根據禮拜幾顯示不同首頁——大致長這樣：

router.add(HomeOnePage.path).initialRoute(when: () {
return DateTime.now().weekday == 1; // 大概只有禮拜一才出現
});

router.add(HomeTwoPage.path).initialRoute(when: () {
return DateTime.now().weekday != 1; // 不是禮拜一的時候走這條
});

如果遇到那種需要驗證後才能看到的頁面，情境也不少見啦。舉例來說，有時候軟體剛啟動都先進入一般首頁，但登入過之後再導去儀表板（Dashboard）那類內容。做法有點像下面：

appRouter() => nyRoutes((router) {
...
router.add(HomePage.path).initialRoute();

router.add(LoginPage.path);

router.add(DashboardPage.path).authenticatedRoute();
});

等到使用者真的去登入了，可以呼叫 `Auth.authenticate()`，據說這樣就算是「認證」進去了。有些人還會順便帶點資料過去，比如：拿一串 token 什麼的。

await Auth.authenticate();

// 假如有一些額外資訊，也可以一起傳
String userBearerToken = "myBearer1234";

await Auth.authenticate(data: {"users_token": userBearerToken});

// ---
// 要取回資料，用這個

Auth.data(); // {"users_token": "myBearer1234"}

下一次開 app，如果用戶已經通過驗證，那 Dashboard 頁面好像就自動變成初始畫面，不必自己再多做一次跳轉。

至於想主動跳去哪個頁面的話，其實直接用 routeTo() 就行了。有些細節沒有展開講，不過流程大致如此。有些人覺得這種配置方式方便，有些則偏好其它方案，視需求而定。

導航中樞黑科技：底部選單和引導流程都能秒搞定

有時候想把資料帶到下一頁，有些人會直接用個「data」欄位解決。像在按鈕那邊，隨手丟一個 User 物件進去或塞點小資訊，好像也挺常見的。不過好像沒人真的記得準確格式，反正大致長這樣：

Button.primary(text: "檢視商品", onPressed: () {

    User user = User(name: "Anthony");



    routeTo(ProductsPage.path, data: user);

    // 或者

    ProductsPage.path.navigateTo(data: {"post_id": 12345});

}),

在你的 Widget 裡呢，只要 initState 開頭抓一下資料就行了。有的人會直接用 data() 拿到傳過來的東西，也有人偏好拆開拿裡面的特定欄位，比如 postId，那種寫法大概是：

class _HomePageState extends NyPage<HomePage> {



  @override

  void initState() {

    super.initState();

    

    User user = data(); // 抓資料下來

    // 或者

    int postId = data()['post_id'];

  }

}

說起來 Navigation Hub——大家有時候也叫它導航樞紐吧？這玩意兒對某些專案流程來講算是挺方便的。有種說法是只要幾個步驟就能拼出一套頂部或底部切換頁面，甚至拿來快速搞個 onboarding 流程也是可以。

新建一個 navigation hub 的指令，不一定每次都記得很清楚，大致類似這樣：
`dart run nylo_framework:main make:navigation_hub base`
執行完後會跑出一個 BaseNavigationHub 檔案，通常放在 pages 那堆資源目錄裡。

打開那個自動生成的 Dart 文件，內容可能差不多是下面這樣（細節大概有點落差）：

import 'package:flutter/material.dart';

import '/resources/widgets/home_tab_widget.dart';

import '/resources/widgets/settings_tab_widget.dart';

import 'package:nylo_framework/nylo_framework.dart';



class BaseNavigationHub extends NyStatefulWidget with BottomNavPageControls {

  ...

}



class _BaseNavigationHubState extends NavigationHub<BaseNavigationHub> {



  /// 有三種 layout：

  /// - [NavigationHubLayout.bottomNav] 底部導航列

  /// - [NavigationHubLayout.topNav] 頂部分頁列

  /// - [NavigationHubLayout.journey] 導覽旅程模式

  NavigationHubLayout? layout = NavigationHubLayout.bottomNav(

    // backgroundColor: Colors.white,

  );



  /// 狀態要不要維持，看需求啦

  @override

  bool get maintainState => true;



  /// 分頁配置可交給建構子處理，例如：

  _BaseNavigationHubState() : super(() async {

    // 新增分頁 Tab，用 CLI 指令也行，

    // 像 'dart run nylo_framework:main make:stateful_widget home_tab,settings_tab'

    return {

      0: NavigationTab(

        title: "首頁",

        page: HomeTab(),

        icon: Icon(Icons.home),

        activeIcon: Icon(Icons.home),

      ),

      //...

      1: NavigationTab(

         title: "設定",

         page: SettingsTab(),

         icon: Icon(Icons.settings),

         activeIcon: Icon(Icons.settings),

      ),

    };

  });

}

其實到底選 bottomNav 還 topNav 還 journey 模式，好像每次都看情境。底部跟頂部分頁功能上接近，但細節自訂空間還不少。通常你可以調整顏色、icon、標題什麼的，不少屬性都能自己玩。

真的要講使用體驗嘛，有人覺得這工具省掉了一些原本重複造輪子的麻煩。但遇到複雜路徑或特殊需求時，可能還得自己微調。哪種狀況適合用 navigation hub？說不上絕對，就看案子需求和團隊習慣囉。

表單神器現世！一行指令自動生成帶驗證的完整表單

有時候，如果你想調整底部導覽的樣子，大概可以像這樣去設定——把圖示尺寸稍微縮小一點，背景色換成帶點藍灰的感覺。選中某個分頁時，顏色也許會變成明顯一點的藍色。不知道是不是每個人都會注意到細節啦。

然後，在建立分頁（他們叫NavigationTab）那邊，有些人會直接選擇“首頁”，就丟進HomeTab頁面，圖標嘛大致上就是常見的房子；有的人偏好再加個設定頁，同樣是那種轉盤圖示。不過要說特別，其實還有人搞了訊息徽章——好像是讓那個分頁旁邊多出來一個小圓圈，上頭顯示未讀數量之類。這種數字不會太精確，可能看起來就十來個或更多吧。有興趣的人，可以用updateBadgeCount方法去試著動態改變它。

至於怎麼切換到你的導覽中心，有幾種做法。有些人會乾脆把routeTo(BaseNavigationHub.path)拿來用，也有人索性在路由器裡設置初始頁面——反正進App第一眼就是這裡。路由配置差不多長這樣，把首頁、404頁那些排好，再指向BaseNavigationHub當作主入口。

如果遇到需要引導流程，比如新手教學或註冊步驟，就得另闢蹊徑。旅程布局（Journey Layout）算是一種解法，切過去以後，每一步其實都是獨立的小畫面。你大概可以用命令行工具批量生產出“歡迎”、“填生日”、“補資料”這類widget，然後陸續塞進導航中心。

最後組裝時，每一項旅程分頁都單純丟對應widget進去，不需太複雜設定。編號順序倒是沒有硬性規定，只要自己記得是哪一格放了什麼就行。有時候大家也不一定照著官方建議順序來排版，但只要效果達到目的，大致上都能運作。

自訂終端指令超好玩！連Git提交都能自動化處理

要說表單這玩意兒，感覺在開發裡算滿常見的。有些框架處理得還挺不錯，像現在看到這個 Nylo，聽說只用一個類別就能把整份表單、驗證規則還有樣式都包起來。其實也不是什麼新奇玩意，但省事倒是真的。

比方講啦，你如果想弄個「回報問題」那種簡單的表單，大概只要打一兩行指令，它就自動幫你生一份程式碼丟在某個 app/forms/ 下面。看起來像這樣——
大致上就是會有一堆欄位設定，有的地方欄位放一起，有些自己分開。前面名字那些欄位，好像需要三個字以上才行，也不能空著。還有信箱啊、描述那種長框，其實規則都能調整。每個 Field 可以指定驗證規則跟樣式，通常是「compact」，但其實換成其他風格應該也可以。

然後送出鍵就直接寫在 class 裡，不用另外傳 callback，那種用法看起來有點偷懶。不過有人可能比較喜歡這種方式啦……送出時資料會印出來，大概就是測試看看格式對不對。

如果真的要把表單顯示到介面上，就是拿 NyForm 包起來丟進 Scaffold，SafeAreaWidget 裡放 NyForm(form: form)。沒什麼難度，照著做差不多就好了。

講到彈性嘛，其實它支援的欄位種類還不少。有那種一般文字框、長敘述欄，也有信箱、標題自動首字大寫，連網址都能驗證。數字相關也涵蓋了好幾種，比如年紀（number）、金額（currency），或小數分數那類。

選擇型態更雜，有下拉選擇器（picker）、標籤 chips、一堆按鈕組合成的 radio。不過具體選項怎麼塞進去，看文件才知道細節。
另外像勾選同意條款或切換通知開關，也都有現成元件能用。
時間日期類型，例如生日挑選器或預約時間，好像也是直接加參數設定範圍。
密碼輸入框倒是沒特別舉例，但感覺應該跟文字差不多處理方式，只是遮蔽內容而已……

總之啊，如果只是做一張簡易或中等複雜度的表單，大致上都能解決。但再細緻些可能得自己動手刻一些東西。另外功能雖然齊全，可每家需求不同，用起來還是得視狀況微調。不少人觀察下來覺得蠻方便，但偶爾也會卡在某些特定場景，需要多花點時間摸索設定吧。

本地推播通知變超簡單，五行程式碼搞定排程推播

有些時候，像是輸入密碼那類的欄位，其實也能切換成明文顯示，也許有人會在意這點。然後像電話號碼、信用卡號這種資訊，常常看到有遮罩格式，反正大致長得差不多吧，什麼括號或空格分隔的那類。想深入了解怎麼做，好像還有個連結可以點，不過內容大概就是那幾樣。

說到自訂指令這回事——現在好像也能在 Nylo 專案裡面從終端機直接搞一個自己命名的新指令。不知道是不是大家都用過，反正只要打一串指令，就能生成新的檔案，通常會被放到某個叫 app/commands 的目錄底下。舉例來說，如果要弄個「格式化並提交程式碼」這種功能，大致上也是同樣流程。有些人覺得蠻方便，但可能還是要看各人需求啦。如果真的想試試，可以考慮照著範例操作看看。

狀態管理新招數：跨頁面觸發動作就像遙控器一樣方便

有些時候，像這樣的指令碼，不知怎麼地就很常見吧？你只要在終端機裡敲個指令，接下來，大致上它會幫你把程式碼格式整理一下，順手再連著 commit、push 到遠端。好像很多人都習慣這種一條龍流程，也不曉得是不是每個團隊都這樣。不過，如果你想靜悄悄地跑一遍，把那些訊息壓到最小，好像也行，加個參數什麼的就能做到。

實作起來嘛，看起來沒啥難度。有段程式，就在那邊「dart format .」處理完後，再直接 git add ，然後 commit 時順帶丟進訊息。最後 push 出去——整套流程，其實蠻常見。訊息內容通常預設就是「Formatted code」，當然你可以換成別的字眼。如果全程不想被打擾，用個 silent 旗標也挺方便。

其實類似的例子還不少，比如說，如果有人想查 github 上最新一次 commit 的話，也不是太複雜。有支指令會先弄個終端動畫（spinner），裝忙一下，然後背後發送 API 請求拉最新 commit 回來。成功了就丟出 sha 值，要是沒回應，只能無奈地報錯。大概也是這種味道。

至於推播通知，有沒有發現現在做本地推播變得容易多了？以前可能還要繞一圈設定，但現在只需要一句話：「PushNotification.sendNotification」。標題、內容隨便填，不用等多久就能看到效果。如果想排程，其實五秒十秒都沒差，一樣簡單搞定。不過細節方面，其實還有很多屬性能調整，感覺可以玩很久。有興趣的人，大概找得到更多教學文件吧。

最後那段關於 StateActions，其實意思是說，在 NyPage 或 NyState 裡面，可以直接寫一些狀態行為。乍聽之下不太直觀，可是真的看範例，就知道原理其實不複雜。有時候光看文字解釋，反而比不上直接照著例子操作更容易懂。

YouTube實機演示搶先看，新功能視覺化全掌握

在某些 Flutter 專案裡頭，偶爾可能會遇到想要在程式的不同地方，隨時「觸發」某個動作的需求。像這段程式碼，其實就有點類似那種場景——你只要用 stateAction 去丟一個指令，就可以叫 HomePage 裡面事先綁好的函數動起來。例如有時候只是想清空輸入框、或是單純輸出個『Hello World』，都能透過這種方式處理掉。

如果有人習慣邊學邊看影片，也許 YouTube 上那支介紹 v6 的片段會有幫助？不確定那畫面是不是每個細節都有顯示，不過大致上應該能看得懂整體變化。網址貼在文件裡頭，有興趣再自行點進去瞧瞧。

Nylo 這套東西，好像從將近五年前開始陸續更新吧。最初據說只是作者自己做專案時順手寫的一份模板，後來一路加加減減，到現在已經推了大概六次比較大的版本。其實，每次改版都多一些新功能，但也不是說每次都翻天覆地啦。下一輪（v7）目前聽到的風聲，是可能會增加額外的小工具和官方套件，方便開發者省點力氣。但具體什麼時候推出、會端出哪些內容，目前資訊還不是很明朗，只能等未來慢慢揭曉。

總之，如果你最近剛好升級 Nylo 或對新版功能感到好奇，不妨親自操作看看。有任何心得或建議，大多數情況下社群還滿樂意傾聽的。至於未來還會不會有更明顯的突破？嗯...也許等一陣子才知道。

Nylo未來藍圖公開！作者親揭v7版本的發展方向

如果你剛接觸Nylo這個東西，嗯……其實可以考慮玩玩看啦。V6算是目前看起來還蠻穩的底子，有些人會用它來做Flutter應用，至於適不適合自己，就得試了才知道。有聽說Anthony Gordon（你也許在GitHub哪裡見過他，大概那串網址吧）提過一些想法。啊，差點忘了，謝謝你花點時間讀到這裡，不過要不要採用還是看個人需求喔。