Flutter GetX 4.7.2 發佈：被嚴重低估的強大框架

視頻

https://youtu.be/BAgTUSbVHlI

https://www.bilibili.com/video/BV1oHPaeXErV/

前言

原文 GetX 框架：簡潔、高效的 Flutter 開發工具

先説結論：感謝 GetX 讓我節省了很多代碼時間，這是一款被嚴重低估的 Flutter 組件，被認為設計的過於簡單、沒有深度、無人維護啥啥的。

很多開發者在討論 GetX 是否已經放棄維護，但實際上並非如此。GetX 目前正集中精力開發 5.0 版本，同時也在維護 4.x 版本，最新更新已達到 4.7.2。社區內一些人常常拿其他狀態管理庫來與 GetX 對比，然而作為一個使用過 Bloc、Provider 和 Riverpod 的開發者，我認為 GetX 完全不遜色於它們，而且使用起來非常簡單。

值得強調的是，GetX 本身是一個工具庫，涵蓋了狀態管理、依賴注入、導航、擴展、HTTP 通信、多語言、對話框和防抖等多種功能。這些特性使得 GetX 在開發中非常高效和便捷。

參考

• https://pub.dev/packages/get
• https://github.com/jonataslaw/getx
• https://github.com/jonataslaw/getx/graphs/contributors

GetX 優點

社區熱度 Github Star 10.6K

bloc 12k , riverpod 6.5k

所以説 getx 社區認可度還是可以的

https://github.com/jonataslaw/getx

https://github.com/jonataslaw/getx/graphs/contributors

非常多的人蔘與到這個項目中。

GetBuilder 手動觸發方式性能更好

試圖 view

  // 滾動圖
  Widget _buildBanner(BuildContext context) {
    return GetBuilder<ProductDetailsController>(
        id: "product_banner",
        tag: tag,
        builder: (_) {
          return CarouselWidget(
            // 打開大圖預覽
            onTap: controller.onGalleryTap,
            // 圖片列表
            items: controller.bannerItems,
            // 當前索引
            currentIndex: controller.bannerCurrentIndex,
            // 切換回調
            onPageChanged: controller.onChangeBanner,
            // 高度
            height: 190.w,
            // 指示器圓點
            indicatorCircle: false,
            // 指示器位置
            indicatorAlignment: MainAxisAlignment.start,
            // 指示器顏色
            indicatorColor: context.colors.scheme.secondary,
          );
        }).backgroundColor(context.colors.scheme.surface);
  }

控制器 觸發更新

  // Banner 切換事件
  void onChangeBanner(int index, reason) {
    bannerCurrentIndex = index;
    update(["product_banner"]); // 手動刷新 Banner
  }

全自動依賴管理視圖、控制器創建釋放

防止 StatefulWidgets 濫用

採用 GetBuilder + StatelessWidget 的方案非常乾淨。

class ApplyPromoCodePage extends StatelessWidget {
  const ApplyPromoCodePage({
    super.key,
    required this.onApplyCouponCode,
  });

  // 主視圖
  Widget _buildView(BuildContext context) {
    return ...
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ApplyPromoCodeController>(
      init: ApplyPromoCodeController(),
      id: "apply_promo_code",
      builder: (_) {
        return _buildView(context);
      },
    );
  }
}

輕鬆多語言

同構 tr 擴展來調用

TextWidget.h4(LocaleKeys.orderConfirmationTitle.tr).paddingBottom(10.w),

豐富工具庫

• 依賴管理

  • Get.put
  • Get.find

• 路由操作

  • Get.to
  • Get.off
  • Get.offAll

• HTTP 通訊

  • GetConnect

• 對話框

  • Get.dialog
  • Get.snackbar

• 響應式

  • Rx
  • Obx()
• 多語言

• 防抖和節流

  • Debounce
  • Throttle
• 路由中間件
• 服務Service

• GetX 擴展

  • 顏色
  • 文本
  • 圖標
  • 邊距

上手簡單，配合貓哥插件更省心

https://marketplace.visualstudio.com/items?itemName=ducafecat...

根據 x3 圖片自動生成 x1 x2 圖片
生成 圖片 svg 常量列表 files.txt
生成規範目錄 common
生成 GetBuilder + GetView 的代碼
生成 StatefulWidget + GetBuilder + GetView 的代碼
生成 controller、view、widgets、bindings、state、index 完整的代碼
生成 路由聲明定義文件

代碼

https://github.com/jonataslaw/getx

小結

本文深入探討了 Flutter GetX 3.7.2 的特點與優勢，特別是它在自動依賴管理、簡潔語法以及多種開發工具方面的表現。作為一個被嚴重低估的框架，GetX 為 Flutter 開發者提供了高效的解決方案，幫助他們快速構建功能豐富的應用程序。希望本文能夠幫助更多開發者瞭解並應用 GetX 框架，提升開發效率。

感謝閲讀本文

如果有什麼建議，請在評論中讓我知道。我很樂意改進。

貓哥 APP

• SaaS Fast
• Flutter GetX Generator

flutter 學習路徑

• Flutter 優秀插件推薦
• Flutter 基礎篇1 - Dart 語言學習
• Flutter 基礎篇2 - 快速上手
• Flutter 實戰1 - Getx Woo 電商APP
• Flutter 實戰2 - 上架指南 Apple Store、Google Play
• Flutter 基礎篇3 - 仿微信朋友圈
• Flutter 實戰3 - 騰訊即時通訊 第一篇
• Flutter 實戰4 - 騰訊即時通訊 第二篇

© 貓哥
ducafecat.com

end