Flutter 中的设计系统

有效的移动应用程序开发不仅需要在功能方面有坚实的基础，还需要对用户界面设计采用连贯一致的方法。设计系统对于实现这一目标至关重要，它提供了一组可重用和模块化的标准，促进了一致性、效率和可扩展性。

什么是设计系统？

设计系统是一组可重用的标准和组件，有助于开发标准化、美观的用户界面，并显然能确保数字产品的所有部分都有一致的体验。在 Flutter（或任何其他前端）中，设计系统使我们开发人员更多地专注于解决功能需求，而不是为我们的应用程序构建相同的标准化屏幕。

1 - 配置项目

首先，我们将创建一个新项目，我们可以在应用程序的主文件夹内创建，或者创建一个外部包以便可重用。

flutter create --template=package design_system

这会创建包的基本结构，您可以开始添加您的组件和样式。

2 - 定义设计指南

在开始编码之前，定义您的系统将遵循的设计指南。这包括：

• 调色板：定义主要、次要、背景、文本等颜色。

• 字体：选择字体、大小和文本样式。

• 可定制组件：Flutter 允许创建高度可定制和可重用的组件。

3 - 构建包结构

以易于理解和维护的方式组织您的包。一个常见的结构可能是：

lib/
├── src/
│   ├── components/
│   │   └── button.dart
│   ├── theme/
│   │   ├── colors.dart
│   │   ├── text_styles.dart
│   │   └── theme.dart
│   └── utils/
│       └── spacing.dart
└── design_system.dart

4 - 创建颜色调色板

在 lib/src/theme/colors.dart 文件中，定义您的颜色调色板：

import 'package:flutter/material.dart';
​
class AppColors {
  static const Color primary = Color(0xFF6200EE);
  static const Color primaryVariant = Color(0xFF3700B3);
  static const Color secondary = Color(0xFF03DAC6);
  static const Color secondaryVariant = Color(0xFF018786);
  static const Color background = Color(0xFFFFFFFF);
  static const Color surface = Color(0xFFFFFFFF);
  static const Color error = Color(0xFFB00020);
  static const Color onPrimary = Color(0xFFFFFFFF);
  static const Color onSecondary = Color(0xFF000000);
  static const Color onBackground = Color(0xFF000000);
  static const Color onSurface = Color(0xFF000000);
  static const Color onError = Color(0xFFFFFFFF);
}

在 Flutter 中，0xFF 表示十六进制颜色

5 - 定义文本样式

在 lib/src/theme/text_styles.dart 文件中，定义您的文本样式：

import 'package:flutter/material.dart';
​
class TextStyles {
  static const TextStyle headline1 = TextStyle(
    fontSize: 96,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  );
  static const TextStyle bodyText1 = TextStyle(
    fontSize: 16,
    color: Colors.black,
  );
  // 根据需要添加更多样式
}

6 - 创建主题

在 lib/src/theme/theme.dart 文件中，定义您的主题：

import 'package:flutter/material.dart';
​
import 'colors.dart';
import 'text_styles.dart';
​
class AppTheme {
  static ThemeData get lightTheme {
    return ThemeData(
      primaryColor: AppColors.primary,
      primaryColorLight: AppColors.primaryVariant,
      textTheme: const TextTheme(
        displayLarge: TextStyles.headline1,
        bodyLarge: TextStyles.bodyText1,
      ),
      colorScheme: ColorScheme.fromSwatch().copyWith(
        secondary: AppColors.secondary,
        surface: AppColors.background,
      ),
​
      // 根据需要添加更多自定义项
    );
  }
}

7 - 创建可重用组件

在 lib/src/components/button.dart 文件中，创建一个自定义按钮组件：

import 'package:flutter/material.dart';
​
import '../theme/colors.dart';
​
class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;
​
  const CustomButton({super.key, required this.label, required this.onPressed});
​
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: AppColors.primary,
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
        // 根据需要添加更多样式属性
      ),
      onPressed: onPressed,
      child: Text(
        label,
        style: const TextStyle(color: AppColors.onPrimary),
      ),
    );
  }
}

8 - 导出您的设计系统 在 lib/design_system.dart 文件中，导出您的所有定义：

library design_system;
​
export 'rc/components/button.dart';
export 'rc/theme/colors.dart';
export 'rc/theme/text_styles.dart';
export 'rc/theme/theme.dart';

9 - 在项目中使用设计系统

dependencies:
  flutter:
    sdk: flutter
  design_system:
    path:./design_system

在您的项目中，导入并使用设计系统：

import 'package:flutter/material.dart';
import 'package:design_system/design_system.dart';
​
void main() {
  runApp(MyApp());
}
​
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: AppTheme.lightTheme,
      home: Scaffold(
        appBar: AppBar(title: Text('设计系统示例')),
        body: Center(
          child: CustomButton(
            label: '按我',
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

结论

在 Flutter 中创建设计系统允许模块化和可重用的结构。这便于您的应用程序的维护和扩展，确保用户体验的一致性和高质量。通过明确的指南和组件定义，您可以快速将您的设计系统应用于不同的项目，并保持视觉和功能的一致性。