Flutter快速搭建UI框架插件getx_scaffold的使用

Flutter快速搭建UI框架插件getx_scaffold的使用

一、关于 GetX Scaffold

GetXScaffold 是基于 GetX 框架和一些常用插件构建的一套快速开发模板。它包括了全局方法、扩展方法、工具类、封装的组件、对话框、网络请求工具、控制器封装、主题和国际化实现等。GetXScaffold 的目的是提高开发效率，减少重复代码，降低开发成本。

二、适配 Flutter 版本

三、更新日志

• 0.2.0
  • 从 0.2.0 开始推荐使用 Material2 重新适配，解决 Material3 的配色问题。
  • 适配 Flutter SDK 版本到 3.24.1。
  • 修复 ButtonX.icon 的 iconSize 参数不生效的问题。
  • 新增滑动验证码 Dialog。
  • HttpService 新增错误拦截和请求拦截。
  • EncryptUtil 和 ExString 新增 sha1、sha256、sha512 散列算法。
  • 新增随机数生成和 Nonce 生成的全局方法。
  • refreshAppui 延时 300ms 刷新，处理主题更新后显示不正常的问题。
  • Android 端修改主题自动修改底部导航栏颜色。

四、运行示例项目

cd example
flutter pub get
flutter run

如果提示 Error: Type 'UnmodifiableUint8ListView' not found，请更新 win32 库：

flutter pub upgrade win32

五、快速开始

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  getx_scaffold: ^0.0.1

  # 如果您的项目中需要使用国际化，请添加以下依赖
  flutter_localizations:
    sdk: flutter

2. 初始化脚手架

在 main.dart 中初始化 GetXScaffold：

import 'package:getx_scaffold/getx_scaffold.dart';

void main() async {
  WidgetsBinding widgetsBinding = await init(
    isDebug: kDebugMode,
    logTag: 'GetxScaffold',
    supportedLocales: TranslationLibrary.supportedLocales,
  );
  runApp(
    GetxApp(
      // 设计稿尺寸 单位：dp
      designSize: const Size(390, 844),
      // Getx Log
      enableLog: kDebugMode,
      // 默认的跳转动画
      defaultTransition: Transition.rightToLeft,
      // 主题模式
      themeMode: GlobalService.to.themeMode,
      // 主题
      theme: AppTheme.light,
      // Dark主题
      darkTheme: AppTheme.dark,
      // 国际化配置
      locale: GlobalService.to.locale,
      translations: TranslationLibrary(),
      fallbackLocale: TranslationLibrary.fallbackLocale,
      supportedLocales: TranslationLibrary.supportedLocales,
      localizationsDelegates: TranslationLibrary.localizationsDelegates,
      // AppTitle
      title: 'GetxScaffold',
      // 首页
      home: const HomePage(),
      // Builder
      builder: (context, widget) {
        // do something....
        return widget!;
      },
    ),
  );
}

3. 定义主题

从 0.2.0 开始推荐使用 Material2 重新适配。以下是主题示例：

import 'package:flutter/material.dart';

class AppTheme {
  static const String fontMontserrat = 'Montserrat';
  static const Color themeColor = Color.fromARGB(255, 11, 107, 47);
  static const Color darkThemeColor = Color.fromARGB(255, 12, 16, 121);

  /// 亮色主题样式
  static ThemeData light = ThemeData(
    useMaterial3: false,
    fontFamily: fontMontserrat,
    colorScheme: ColorScheme.fromSeed(
      seedColor: themeColor,
      brightness: Brightness.light,
    ),
    appBarTheme: const AppBarTheme(
      backgroundColor: Colors.white,
      foregroundColor: Color.fromARGB(200, 0, 0, 0),
      centerTitle: true,
      titleTextStyle: TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
        color: Color.fromARGB(200, 0, 0, 0),
      ),
    ),
  );

  /// 暗色主题样式
  static ThemeData dark = ThemeData(
    useMaterial3: false,
    fontFamily: fontMontserrat,
    colorScheme: ColorScheme.fromSeed(
      seedColor: darkThemeColor,
      brightness: Brightness.dark,
    ),
    appBarTheme: const AppBarTheme(
      centerTitle: true,
      titleTextStyle: TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
      ),
    ),
    bottomAppBarTheme: const BottomAppBarTheme(
      color: Color.fromARGB(255, 34, 34, 34),
    ),
  );
}

4. 国际化

创建 TranslationLibrary 并实现以下方法：

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:getx_scaffold/getx_scaffold.dart';

import 'locales/locale_en.dart';
import 'locales/locale_es.dart';
import 'locales/locale_zh.dart';

class TranslationLibrary extends Translations {
  static const fallbackLocale = Locale('zh', 'CN');
  static const supportedLocales = [
    Locale('zh', 'CN'),
    Locale('en', 'US'),
    Locale('es', 'ES'),
  ];

  @override
  Map<String, Map<String, String>> get keys => {
        'zh': zh,
        'en': en,
        'es': es,
      };

  static const localizationsDelegates = [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ];
}

在 main.dart 中加入以下代码：

// 国际化配置
locale: GlobalService.to.locale,
translations: TranslationLibrary(),
fallbackLocale: TranslationLibrary.fallbackLocale,
supportedLocales: TranslationLibrary.supportedLocales,
localizationsDelegates: TranslationLibrary.localizationsDelegates,

5. 添加页面

所有页面使用 GetView 加 GetxController 视图与逻辑分离的开发方式。所有 GetxController 必须混入 BaseControllerMixin，以响应全局刷新。

HomePage.dart

import 'package:flutter/material.dart';
import 'package:example/common/langs/index.dart';
import 'package:getx_scaffold/getx_scaffold.dart';

import 'index.dart';

class HomePage extends GetView<HomeController> {
  const HomePage({super.key});

  // 主视图
  Widget _buildView() {
    return <Widget>[
      ListTile(
        title: Text(TextKey.zhuTi.tr),
        onTap: () {
          Get.to(() => const ThemePage());
        },
      ),
      ListTile(
        title: Text(TextKey.yuYan.tr),
        onTap: () {
          Get.to(() => const LanguagePage());
        },
      ),
    ]
        .toListView(
          separator: const DividerX(),
        )
        .scrollbar()
        .safeArea();
  }

  Widget _buildFloatingActionButton() {
    return FloatingActionButton(
      onPressed: () {},
      child: const Icon(Icons.info),
    ).padding(all: 20.w);
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
      init: HomeController(),
      id: 'home',
      builder: (_) {
        return DoublePressBackWidget(
          child: Scaffold(
            appBar: AppBar(
              title: const Text("GetxScaffold"),
              centerTitle: true,
              elevation: 1,
            ),
            floatingActionButton: _buildFloatingActionButton(),
            body: _buildView(),
          ),
        );
      },
    );
  }
}

HomeController.dart

import 'package:getx_scaffold/getx_scaffold.dart';

class HomeController extends GetxController with BaseControllerMixin {
  @override
  String get builderId => 'home';

  HomeController();

  @override
  void onInit() {
    super.onInit();
    updateUi();
    back();
    delayedBack();
  }

  @override
  bool get listenLifecycleEvent => true;

  @override
  void onDetached() {
    log('onDetached');
  }

  @override
  void onHidden() {
    log('onHidden');
  }

  @override
  void onInactive() {
    log('onInactive');
  }

  @override
  void onPaused() {
    log('onPaused');
  }

  @override
  void onResumed() {
    log('onResumed');
  }
}

六、全局方法

GetXScaffold 提供了丰富的全局方法，例如：

• 获取当前时间戳
• 判断设备是否连接网络
• 显示 Toast
• 显示加载对话框
• 切换主题模式
• 更改语言
• 打开网页
• 拨打电话
• 申请权限

七、扩展方法

GetXScaffold 提供了对 String、num、List<Widget> 和 Widget 的扩展方法，方便开发者快速构建 UI。

八、内置组件

GetXScaffold 封装了一些常用的组件，如 TextX、ButtonX、IconX、SpinKit、Lottie 等，简化了组件的使用。

九、网络请求

GetXScaffold 对 Dio 进行了二次封装，提供了更简洁的调用方式和完整的请求日志。通过 HttpService 进行调用。

十、权限管理

GetXScaffold 封装了权限申请的逻辑，简化了权限申请流程。提供了 requestCameraPermission、requestPhotosPermission 等方法。

示例代码

以下是 main.dart 的完整示例代码：

import 'package:example/common/langs/index.dart';
import 'package:example/pages/home/index.dart';
import 'package:example/common/styles/theme.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';
import 'package:getx_scaffold/getx_scaffold.dart';

void main() async {
  WidgetsBinding widgetsBinding = await init(
    isDebug: kDebugMode,
    logTag: 'GetxScaffold',
    supportedLocales: TranslationLibrary.supportedLocales,
  );
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(
    GetxApp(
      designSize: const Size(390, 844),
      enableLog: kDebugMode,
      defaultTransition: Transition.rightToLeft,
      themeMode: GlobalService.to.themeMode,
      theme: AppTheme.light,
      darkTheme: AppTheme.dark,
      locale: GlobalService.to.locale,
      translations: TranslationLibrary(),
      fallbackLocale: TranslationLibrary.fallbackLocale,
      supportedLocales: TranslationLibrary.supportedLocales,
      localizationsDelegates: TranslationLibrary.localizationsDelegates,
      title: 'GetxScaffold',
      home: const HomePage(),
      builder: (context, widget) {
        return widget!;
      },
    ),
  );
}