Flutter设计系统插件sdga_design_system的使用

Flutter设计系统插件sdga_design_system的使用

该插件提供了一整套遵循沙特数字政府管理局（SDGA）设计指南的UI组件和设计原则。通过利用此设计系统，开发者可以创建一致、用户友好且视觉上吸引人的界面。

屏幕截图

安装

在 pubspec.yaml 文件的 dependencies: 部分添加以下行：

sdga_design_system: <latest_version>

然后，在你的主应用代码中，你需要将 SDGATheme 作为扩展应用到 ThemeData 中，使用 ThemeData.copyWith 方法：

return MaterialApp(
  theme: ThemeData.light().copyWith(extensions: [SDGATheme.light()]),
  darkTheme: ThemeData.dark().copyWith(extensions: [SDGATheme.dark()]),
  // 其他 MaterialApp 属性...
);

或者使用扩展方法 applySDGATheme()：

return MaterialApp(
  theme: ThemeData.light().applySDGATheme(),
  darkTheme: ThemeData.dark().applySDGATheme(),
  // 其他 MaterialApp 属性...
);

关键特性

组件

设计系统提供了大量的前缀为 SDGA 的组件，这些包括：

• 动作：SDGAButton, SDGALink。
• 内容展示：SDGAAccordionList, SDGACard, SDGAListTile, SDGACheckboxListTile, SDGARadioListTile, SDGASwitchListTile。
• 数据展示：SDGAAvatar, SDGAContentSwitcher。
• 反馈：SDGAModal, SDGANotificationToast, SDGARatingBar, SDGATooltip。
• 表单：SDGACheckbox, SDGARadio, SDGASwitch, SDGAFileInput, SDGATextField。
• 导航：SDGADrawer, SDGAMenu, SDGAPagination, SDGATabBar。
• 加载指示器：SDGASpinner。
• 搜索和其他元素：SDGATag, SDGABanner, SDGAInlineAlert。

注意：一些组件仍在开发中，例如下拉菜单、日期选择器、AppBar 和 BottomNavigationBar。

颜色

设计系统提供了符合 SDGA 品牌指南的浅色和深色调色板。这些颜色旨在易于访问且具有视觉吸引力，确保所有应用程序的一致外观和感觉。

你可以使用 SDGAColors 或 SDGAColorScheme.of(context) 来访问这些颜色。

样式

设计系统定义了一组样式来规范排版、间距和布局。这些样式确保不同屏幕尺寸和设备上的统一性和可读性。

• 排版：通过 SDGATextStyles 访问字体系列、大小和行高。
• 间距：通过 SDGANumbers 管理，以确保不同设备和屏幕尺寸上的布局一致性。

阴影

预定义的阴影样式可用于 UI 元素如卡片和菜单，可通过 SDGAShadows 访问。

使用

安装并配置好 SDGATheme 后，你就可以开始在 Flutter 应用中使用 SDGA UI 组件了。以下是几个示例演示如何使用不同的组件：

示例 1: 使用 SDGA Button

// 普通按钮
SDGAButton(
  style: SDGAButtonStyle.primaryBrand,
  onPressed: () {
    // 处理按钮点击事件
  },
  child: Text('点击我'),
)
// 破坏性按钮
SDGAButton.destructive(
  style: SDGADestructiveButtonStyle.primary,
  onPressed: () {
    // 处理破坏性操作
  },
  child: Text('删除'),
)
// 图标按钮
SDGAButton.icon(
  icon: Icon(Icons.add),
  onPressed: () {
    // 处理图标按钮点击事件
  },
)
// 浮动操作按钮
SDGAButton.fab(
  style: SDGAFabButtonStyle.primaryBrand,
  icon: Icon(Icons.camera),
  onPressed: () {
    // 处理浮动操作按钮点击事件
  },
)
// 关闭按钮
SDGAButton.close(
  onPressed: () {
    // 处理关闭按钮点击事件
  },
)

示例 2: 使用 SDGA Card

SDGACard(
  title: Text('卡片标题'),
  padChildHorizontally: false,
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      SizedBox(
        height: 24,
        child: ListView.separated(
          padding: const EdgeInsetsDirectional.only(
            start: SDGANumbers.spacingXL,
          ),
          scrollDirection: Axis.horizontal,
          itemCount: 3,
          itemBuilder: (context, index) => SDGATag(
            size: SDGATagSize.small,
            label: Text('标签 $index'),
          ),
          separatorBuilder: (context, index) =>
              const SizedBox(width: SDGANumbers.spacingMD),
        ),
      ),
      const SizedBox(height: SDGANumbers.spacing3XL),
      Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: SDGANumbers.spacingXL,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const SDGARatingBar(
              size: SDGAWidgetSize.small,
              useBrandColors: false,
              value: 3.5,
            ),
            const SizedBox(height: SDGANumbers.spacingXS),
            Text(
              '12 条评论',
              style: SDGATextStyles.textExtraSmallRegular.copyWith(
                color: SDGAColorScheme.of(context)
                    .links
                    .iconNeutralVisited,
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

示例 3: 使用 SDGA Drawer

SDGADrawer(
  header: const SDGADrawerHeader(
    title: Text('用户名', maxLines: 1),
    description: Text(
      'user@example.com',
      overflow: TextOverflow.ellipsis,
      maxLines: 1,
    ),
  ),
  items: [
    SDGADrawerItem(
      label: '首页',
      leading: Icon(Icons.home),
      onTap: () {
        // 处理抽屉项点击事件
      },
    ),
    SDGADrawerItem(
      label: '设置',
      leading: Icon(Icons.settings),
      onTap: () {
        // 处理抽屉项点击事件
      },
    ),
  ],
);

示例 4: 使用 SDGA TextField

const SDGATextField(
  decoration: SDGAInputDecoration(
    helperText: '帮助文本',
    hintText: '搜索...',
    prefix: SDGAInputAffix.text('前缀'),
    prefixIcon: Icon(Icons.search),
  ),
);

通过使用这些组件，你的应用将遵循 SDGA 的设计原则，确保一致和标准化的用户界面。

从 Material 迁移

库中的所有组件都以 SDGA 开头，这有助于从 Material 设计系统平滑过渡。大多数组件与它们的 Material 设计对应物具有相似的属性，但某些属性不适用或会影响独特的 SDGA 风格。

例如：

• TextField 变为 SDGATextField
• Button 变为 SDGAButton

示例应用

探索全套组件及其变化的交互式示例应用。这是一个实时故事书，你可以编辑属性并立即查看结果。

开始步骤

1. 克隆仓库

   git clone https://github.com/FlutterREDF/sdga_design_system
   

2. 导航到示例项目

   cd sdga_design_system/example
   

3. 运行示例应用

   flutter pub get
   flutter run