Flutter设计系统插件hondooye_design_system的使用

Features

此插件提供了一套完整的Flutter设计系统，包括颜色主题、字体样式、按钮组件等。它旨在帮助开发者快速构建具有统一风格的应用程序。

Getting started

在使用hondooye_design_system之前，确保已将插件添加到项目的pubspec.yaml文件中：

dependencies:
  hondooye_design_system: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

Usage

引入插件

首先，我们需要在项目中导入hondooye_design_system包，并使用其提供的颜色和字体样式。

import 'package:hondooye_design_system/hondooye_design_system.dart';

主应用结构

接下来，我们将创建一个简单的Flutter应用程序来展示插件的功能。

示例代码解释

以下是完整的示例代码，展示了如何使用该插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Hondooye Design System Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Hondooye Design System'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示主色调
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 20,
                  height: 20,
                  color: HdyColor.primary,
                ),
                Container(
                  width: 20,
                  height: 20,
                  color: HdyColor.secondary,
                ),
                Container(
                  width: 20,
                  height: 20,
                  color: HdyColor.tertiary,
                ),
              ],
            ),

            // 显示多种字体样式
            Text(
              "NotoSansKR 노토산스",
              style: NotoSansKR.thin(fontSize: 12),
            ),
            Text(
              "NotoSansKR 노토산스",
              style: NotoSansKR.light(fontSize: 12),
            ),
            Text(
              "NotoSansKR 노토산스",
              style: NotoSansKR.regular(fontSize: 12),
            ),
            Text(
              "NotoSansKR 노토산스",
              style: NotoSansKR.medium(fontSize: 12),
            ),
            Text(
              "NotoSansKR 노토산스",
              style: NotoSansKR.bold(fontSize: 12),
            ),
            Text(
              "NotoSansKR 노토산스",
              style: NotoSansKR.black(fontSize: 12),
            ),

            // 其他字体样式
            Text(
              "Roboto 로보토",
              style: Roboto.thin(fontSize: 12),
            ),
            Text(
              "Roboto 로보토",
              style: Roboto.light(fontSize: 12),
            ),
            Text(
              "Roboto 로보토",
              style: Roboto.regular(fontSize: 12),
            ),
            Text(
              "Roboto 로보토",
              style: Roboto.bold(fontSize: 12),
            ),

            // 按钮切换主题
            const SizedBox(height: 32),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    ThemeNotifier.of(context)!.setLightMode();
                  },
                  child: const Text("Light Theme"),
                ),
                const SizedBox(width: 32),
                ElevatedButton(
                  onPressed: () {
                    ThemeNotifier.of(context)!.setDarkMode();
                  },
                  child: const Text("Dark Theme"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}