Flutter UI组件插件empathetech_flutter_ui的使用

Flutter UI组件插件empathetech_flutter_ui的使用

Empathetech Flutter UI

Build apps for anyone

当使用Empathetech Flutter UI构建应用时，你可以确保你的应用在各个方面都具有良好的可访问性。以下是该插件的一些主要特点：

• 平台可用性：由于Flutter的支持，EFUI可以在Android、iOS、Linux、MacOS、Windows和Web上全平台运行。
• 响应式设计：使应用能够适应不同尺寸的屏幕。
• 屏幕阅读器支持：通过TalkBack和VoiceOver等工具进行了手动验证。
• 用户定制化：允许用户控制应用的主题，以满足他们的需求。
• 国际化：所有外部文本都已翻译成西班牙语和法语，并且有无限未来翻译的基础设施。

目录

• 安装
• 使用
• 演示
• 贡献
• 许可

安装

在你的项目的根目录下运行以下命令：

flutter pub add empathetech_flutter_ui

然后在任何使用EFUI库的文件中添加以下导入语句：

import 'package:empathetech_flutter_ui/empathetech_flutter_ui.dart';

使用

TL;DR

• 必需

  1. 在void main()中初始化EzConfig
  2. 使用EzAppProvider构建一个PlatformApp（或者在现有provider中使用ezThemeData，或者使用EzConfig来构建一个自定义的ThemeData）

• 推荐

  1. 复制示例项目中的设置沙箱到你的项目
  2. 享受吧！

设置

步骤 1

初始化 EzConfig in void main()

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final SharedPreferences prefs = await SharedPreferences.getInstance();

  EzConfig.init(
    // 路径到应用使用的任何本地存储的图片
    assetPaths: {},

    preferences: prefs,

    // 你的品牌颜色，自定义样式等
    defaults: empathetechConfig, // 可选的起始配置
  );

  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);

  runApp(const YourApp());
}

如何工作

EzConfig 收集并存储应用的主题数据，将你的customDefaults与用户的保存偏好合并。

一旦收集完毕，EzConfig 将数据存储在一个单例实例中以便高效访问。EzConfig 提供了一系列的getter和setter方法来安全地与主题数据交互。

步骤 2

使用 EzAppProvider 构建一个 PlatformApp

class YourApp extends StatelessWidget {
  const YourApp({super.key});

  @override
  Widget build(BuildContext context) {
    return EzAppProvider(
      app: PlatformApp.router(
        debugShowCheckedModeBanner: false,

        // 语言处理
        localizationsDelegates: {
          LocaleNamesLocalizationsDelegate(),
          ...EFUILang.localizationsDelegates,
          YourAppFeedbackLocalizationsDelegate,
        },

        // 支持的语言
        supportedLocales: EFUILang.supportedLocales,

        // 当前语言
        locale: EzConfig.getLocale(),

        title: yourAppTitle,
        routerConfig: yourAppRouter,
      ),
    );
  }
}

如何工作

EzAppProvider 是一个PlatformProvider包装器，默认使用ezThemeData。

ezThemeData 设置动态颜色方案和文本主题，并默认将一些触摸点更新为更高的对比度。

你也可以使用自己的应用/提供商与ezThemeData达到相同的效果。或者，你可以完全使用EzConfig数据构建自己的自定义基础主题。

步骤 3

复制示例项目的设置沙箱到你的项目

示例应用被设计为你的应用设置的即插即用解决方案。复制/粘贴所有屏幕文件，并在你的应用路由中创建路径。

例如，使用GoRouter的设置…

/// 基于路径的路由器，适用于网络应用
final GoRouter _yourAppRouter = GoRouter(
  initialLocation: homePath,
  routes: [
    GoRoute(
      path: homePath,
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: [
        /// ...所有预存在的或即将存在的路由
        GoRoute(
          path: settingsRoute,
          builder: (BuildContext context, GoRouterState state) {
            return const SettingsHomeScreen();
          },
          routes: [
            GoRoute(
              path: textSettingsPath,
              builder: (BuildContext context, GoRouterState state) {
                return const TextSettingsScreen();
              },
            ),
            GoRoute(
              path: layoutSettingsPath,
              builder: (BuildContext context, GoRouterState state) {
                return const LayoutSettingsScreen();
              },
            ),
            GoRoute(
              path: colorSettingsPath,
              builder: (BuildContext context, GoRouterState state) {
                return const ColorSettingsScreen();
              },
            ),
            GoRoute(
              path: imageSettingsPath,
              builder: (BuildContext context, GoRouterState state) {
                return const ImageSettingsScreen();
              },
            ),
          ],
        ),
      ],
    ),
  ],
);