Flutter设计系统存储插件flutter_design_system_store的使用

Flutter设计系统存储插件flutter_design_system_store的使用

Flutter Design System 是一个为 Flutter 提供的一组可重用组件的包，旨在加速应用程序的开发。它包括常见的组件如按钮、自定义文本框等。

安装

  1. 在你的 pubspec.yaml 文件的依赖项部分添加以下行：

    dependencies:
  flutter_design_system_store:
    git:
      url: https://github.com/JuanJose21/flutter-design-system
      ref: master

  2. 安装依赖项：

    flutter pub get

使用

在你想要使用这些组件的 Dart 文件中导入该包：

import 'package:flutter_design_system_store/flutter_design_system_store.dart';

可用组件

CustomButton

一个具有预定义样式的自定义按钮。

使用示例：

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

class MyScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我的屏幕'),
      ),
      body: Center(
        child: CustomButton(
          text: '点击我',
          onPressed: () {
            print('按钮被按下！');
          },
        ),
      ),
    );
  }
}

CustomTextField

一个具有预定义样式的自定义文本框。

使用示例：

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

class MyFormScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我的表单'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            CustomTextField(
              controller: TextEditingController(),
              hintText: '输入你的文字',
            ),
          ],
        ),
      ),
    );
  }
}

更多组件

请参阅 GitHub 上的完整文档和使用示例，以了解每个组件的详细信息。

贡献

欢迎贡献！如果你发现问题或有建议，请在 GitHub 仓库中打开一个问题或提交一个拉取请求。

许可证

该项目根据 MIT 许可证授权。详情请参阅 LICENSE 文件。


### 示例代码

```dart
import 'package:example/presentation/screens/home_screen.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 设计系统',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

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

1 回复

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


flutter_design_system_store 是一个用于存储和管理设计系统相关数据的 Flutter 插件。它可以帮助开发者在应用中使用和管理设计系统相关的配置、主题、颜色、字体等信息。以下是使用 flutter_design_system_store 插件的基本步骤和示例。

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_design_system_store 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_design_system_store: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装插件。

2. 初始化插件

在使用插件之前，你需要在应用的入口处初始化它。通常可以在 main.dart 文件中进行初始化：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化设计系统存储
  await DesignSystemStore.initialize();

  runApp(MyApp());
}

3. 配置设计系统数据

你可以通过 DesignSystemStore 来存储和管理设计系统相关的数据。例如，存储颜色、字体、间距等信息：

DesignSystemStore.setColor('primaryColor', Colors.blue);
DesignSystemStore.setColor('secondaryColor', Colors.green);

DesignSystemStore.setFont('headingFont', 'Roboto');
DesignSystemStore.setFont('bodyFont', 'OpenSans');

DesignSystemStore.setSpacing('small', 8.0);
DesignSystemStore.setSpacing('medium', 16.0);
DesignSystemStore.setSpacing('large', 24.0);

4. 获取设计系统数据

在你需要的地方，你可以通过 DesignSystemStore 获取之前存储的设计系统数据：

Color primaryColor = DesignSystemStore.getColor('primaryColor');
String headingFont = DesignSystemStore.getFont('headingFont');
double smallSpacing = DesignSystemStore.getSpacing('small');

5. 使用设计系统数据

你可以将这些设计系统数据应用到你的 UI 组件中。例如，在 ThemeData 中使用存储的颜色和字体：

MaterialApp(
  theme: ThemeData(
    primaryColor: DesignSystemStore.getColor('primaryColor'),
    fontFamily: DesignSystemStore.getFont('bodyFont'),
  ),
  home: MyHomePage(),
);

6. 更新设计系统数据

如果你的设计系统数据需要动态更新，你可以使用 DesignSystemStore 的 update 方法来更新数据：

DesignSystemStore.updateColor('primaryColor', Colors.red);

7. 监听设计系统数据的变化

如果你希望在设计系统数据变化时得到通知，你可以使用 DesignSystemStore 的 addListener 方法来监听变化：

DesignSystemStore.addListener(() {
  print('Design system data has been updated!');
});

8. 清理和销毁

在应用退出或不再需要设计系统数据时，你可以清理和销毁 DesignSystemStore：

DesignSystemStore.dispose();

示例代码

以下是一个完整的示例，展示了如何使用 flutter_design_system_store 插件：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await DesignSystemStore.initialize();

  DesignSystemStore.setColor('primaryColor', Colors.blue);
  DesignSystemStore.setFont('bodyFont', 'Roboto');

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: DesignSystemStore.getColor('primaryColor'),
        fontFamily: DesignSystemStore.getFont('bodyFont'),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Design System Store Example'),
      ),
      body: Center(
        child: Text(
          'Hello, Design System!',
          style: TextStyle(
            color: DesignSystemStore.getColor('primaryColor'),
            fontFamily: DesignSystemStore.getFont('bodyFont'),
          ),
        ),
      ),
    );
  }
}
回到顶部