Flutter设计系统插件senior_design_tokens的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter设计系统插件senior_design_tokens的使用

概述

senior_design_tokens 是一个用于在Flutter移动应用中实现Senior Design System设计令牌的项目。它提供了定义间距、字体、颜色等常量的令牌,以便在应用程序中使用。

快速开始

添加依赖

要将 senior_design_tokens 添加到您的项目中,您可以直接使用我们在 Pub.dev 上发布的包。您可以通过以下两种方式之一添加依赖:

  1. pubspec.yaml 文件中添加依赖:

    dependencies:
      senior_design_tokens: ^最新版本号
    
  2. 使用命令行工具:

    flutter pub add senior_design_tokens
    

如何使用

要在项目中使用这些令牌,首先需要导入我们的令牌包:

import 'package:senior_design_tokens/senior_design_tokens.dart';

之后,您可以在需要的地方使用这些令牌。以下是一个示例,展示了如何将 primary-color 令牌应用于一个 Container

Container(
  color: SeniorColors.primaryColor,
)

示例代码

以下是一个完整的示例项目,展示了如何在不同的页面中使用 senior_design_tokens 提供的各种令牌:

main.dart

import 'package:flutter/material.dart';

import './pages/colors_example.dart';
import './pages/icon_size_example.dart';
import './pages/radius_example.dart';
import './pages/spacing_example.dart';
import './pages/typography_example.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: PageView(
            children: const [
              ColorsExample(),
              IconSizeExample(),
              RadiusExample(),
              SpacingExample(),
              TypographyExample(),
            ],
          ),
        ),
      ),
    );
  }
}

colors_example.dart

import 'package:flutter/material.dart';
import 'package:senior_design_tokens/senior_design_tokens.dart';

class ColorsExample extends StatelessWidget {
  const ColorsExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 100,
          height: 100,
          color: SeniorColors.primaryColor,
          child: Center(child: Text('Primary Color')),
        ),
        SizedBox(height: 20),
        Container(
          width: 100,
          height: 100,
          color: SeniorColors.secondaryColor,
          child: Center(child: Text('Secondary Color')),
        ),
      ],
    );
  }
}

icon_size_example.dart

import 'package:flutter/material.dart';
import 'package:senior_design_tokens/senior_design_tokens.dart';

class IconSizeExample extends StatelessWidget {
  const IconSizeExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.star, size: SeniorSizes.iconSmall),
        SizedBox(height: 20),
        Icon(Icons.star, size: SeniorSizes.iconMedium),
        SizedBox(height: 20),
        Icon(Icons.star, size: SeniorSizes.iconLarge),
      ],
    );
  }
}

radius_example.dart

import 'package:flutter/material.dart';
import 'package:senior_design_tokens/senior_design_tokens.dart';

class RadiusExample extends StatelessWidget {
  const RadiusExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(SeniorRadii.radiusSmall),
          ),
          child: Center(child: Text('Small Radius')),
        ),
        SizedBox(height: 20),
        Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(SeniorRadii.radiusMedium),
          ),
          child: Center(child: Text('Medium Radius')),
        ),
        SizedBox(height: 20),
        Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(SeniorRadii.radiusLarge),
          ),
          child: Center(child: Text('Large Radius')),
        ),
      ],
    );
  }
}

spacing_example.dart

import 'package:flutter/material.dart';
import 'package:senior_design_tokens/senior_design_tokens.dart';

class SpacingExample extends StatelessWidget {
  const SpacingExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
          margin: EdgeInsets.all(SeniorSpacing.spacingSmall),
          child: Center(child: Text('Small Spacing')),
        ),
        SizedBox(height: 20),
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
          margin: EdgeInsets.all(SeniorSpacing.spacingMedium),
          child: Center(child: Text('Medium Spacing')),
        ),
        SizedBox(height: 20),
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
          margin: EdgeInsets.all(SeniorSpacing.spacingLarge),
          child: Center(child: Text('Large Spacing')),
        ),
      ],
    );
  }
}

typography_example.dart

import 'package:flutter/material.dart';
import 'package:senior_design_tokens/senior_design_tokens.dart';

class TypographyExample extends StatelessWidget {
  const TypographyExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Heading 1',
          style: SeniorTypography.heading1,
        ),
        SizedBox(height: 20),
        Text(
          'Heading 2',
          style: SeniorTypography.heading2,
        ),
        SizedBox(height: 20),
        Text(
          'Body Text',
          style: SeniorTypography.bodyText,
        ),
      ],
    );
  }
}

团队与贡献

此项目由 Senior Sistemas 的设计团队开发和维护,并接收来自整个开发团队的贡献。如果您有任何改进建议或希望提出新的功能,请联系我们 😄

希望这些信息对您有所帮助!如果有任何问题或需要进一步的帮助,请随时提问。


更多关于Flutter设计系统插件senior_design_tokens的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter设计系统插件senior_design_tokens的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,senior_design_tokens 是一个用于 Flutter 的设计系统插件,它允许你在应用中统一管理和使用设计令牌(Design Tokens)。设计令牌是设计系统中的一种方式,用于存储和共享颜色、间距、字体大小等设计属性值。

下面是一个简单的代码示例,展示如何在 Flutter 项目中使用 senior_design_tokens 插件。

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 senior_design_tokens 依赖:

dependencies:
  flutter:
    sdk: flutter
  senior_design_tokens: ^latest_version  # 请替换为实际的最新版本号

2. 安装依赖

运行以下命令以安装依赖:

flutter pub get

3. 定义设计令牌

你可以在一个单独的文件中定义你的设计令牌,例如 design_tokens.dart

import 'package:senior_design_tokens/senior_design_tokens.dart';

// 创建一个 DesignTokenSet 实例
final DesignTokenSet myDesignTokens = DesignTokenSet(
  colorTokens: {
    'primaryColor': Color(0xFF6200EA), // 主颜色
    'secondaryColor': Color(0xFF03DAC5), // 次颜色
    'backgroundColor': Color(0xFFFEFEFE), // 背景颜色
  },
  spacingTokens: {
    'smallSpacing': 8.0.dp, // 小间距
    'mediumSpacing': 16.0.dp, // 中等间距
    'largeSpacing': 32.0.dp, // 大间距
  },
  fontTokens: {
    'bodyText': FontDescriptor(
      fontSize: 16.0.sp,
      fontWeight: FontWeight.w400,
    ),
    'headlineText': FontDescriptor(
      fontSize: 24.0.sp,
      fontWeight: FontWeight.w700,
    ),
  },
);

// 使用 dp 和 sp 扩展函数
extension SizeExtensions on num {
  Double dp get => this * (96.0 / MediaQuery.of(context).size.width * ui.window.devicePixelRatio);
  Double sp get => this * (96.0 / MediaQuery.of(context).size.width * ui.window.devicePixelRatio) * 0.75;
}

注意dpsp 扩展函数需要上下文 context,这在实际应用中可能需要在某个 Widget 树中定义。为了简化示例,这里直接使用了 context,但在实际项目中你可能需要更灵活的处理方式。

4. 使用设计令牌

在你的 Flutter Widget 中使用这些设计令牌:

import 'package:flutter/material.dart';
import 'design_tokens.dart'; // 导入设计令牌文件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: myDesignTokens.colorTokens['primaryColor']!,
        textTheme: TextTheme(
          bodyText1: TextStyle(
            fontSize: myDesignTokens.fontTokens['bodyText']!.fontSize,
            fontWeight: myDesignTokens.fontTokens['bodyText']!.fontWeight,
          ),
          headline1: TextStyle(
            fontSize: myDesignTokens.fontTokens['headlineText']!.fontSize,
            fontWeight: myDesignTokens.fontTokens['headlineText']!.fontWeight,
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Flutter Design Tokens Example',
          style: TextStyle(color: myDesignTokens.colorTokens['secondaryColor']!),
        ),
        backgroundColor: myDesignTokens.colorTokens['primaryColor']!,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Body Text',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            SizedBox(height: myDesignTokens.spacingTokens['mediumSpacing']!),
            Text(
              'Headline Text',
              style: Theme.of(context).textTheme.headline1,
            ),
          ],
        ),
      ),
    );
  }
}

总结

通过上述步骤,你可以在 Flutter 项目中成功地定义和使用 senior_design_tokens 插件来管理设计令牌。这种方法使得你的设计属性可以统一管理和维护,有助于提升代码的可维护性和一致性。

回到顶部