Flutter设计系统插件senior_design_tokens的使用
Flutter设计系统插件senior_design_tokens的使用
概述
senior_design_tokens
是一个用于在Flutter移动应用中实现Senior Design System设计令牌的项目。它提供了定义间距、字体、颜色等常量的令牌,以便在应用程序中使用。
快速开始
添加依赖
要将 senior_design_tokens
添加到您的项目中,您可以直接使用我们在 Pub.dev 上发布的包。您可以通过以下两种方式之一添加依赖:
-
在
pubspec.yaml
文件中添加依赖:dependencies: senior_design_tokens: ^最新版本号
-
使用命令行工具:
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
更多关于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;
}
注意:dp
和 sp
扩展函数需要上下文 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
插件来管理设计令牌。这种方法使得你的设计属性可以统一管理和维护,有助于提升代码的可维护性和一致性。