Flutter颜色管理插件gdsc_ys_color的使用

Flutter颜色管理插件gdsc_ys_color的使用

gdsc_ys_color 是一个为 GDSC Yonsei 分会设计的语义化颜色系统包。它提供了预定义的颜色主题，方便开发者在项目中统一管理颜色。

安装

要将该插件添加到你的项目中，只需在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  gdsc_ys_color: ^1.0.0

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

flutter pub get

在 Dart 文件中导入该包：

import 'package:gdsc_ys_color/gdsc_ys_color.dart';

快速开始

你可以通过导入 gdsc_ys_color.dart 并使用 GDSCTheme 类来快速开始使用该插件。创建一个新的 GDSCTheme 实例时，可以指定你想要使用的主题。目前可用的主题包括蓝色 (blue)、绿色 (green)、黄色 (yellow) 和红色 (red)。

以下是一个完整的示例：

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

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

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

  // 创建一个 GDSCTheme 实例，并指定当前主题为蓝色
  final GDSCTheme theme = GDSCTheme(currentTheme: GDSCThemeColor.blue);

  // 这是应用的根部件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GDSC Theme Demo',
      theme: theme.getThemeData(), // 返回当前主题的 ThemeData 对象
      home: const MyHomePage(title: 'GDSC Theme Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

使用方法

1. 语义化颜色

语义化颜色是根据它们所代表的内容命名的颜色令牌。gdsc_ys_color 提供了以下语义化颜色：

使用语义化颜色时，建议结合状态管理工具（如 GetX 或 Provider）使用。可以通过调用 theme.colors 来访问所需的语义化颜色。

示例代码：

ElevatedButton(
  onPressed: _incrementCounter,
  child: Text('button', style: TextStyle(color: theme.colors.button.primary.label.common)),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(theme.colors.button.primary.background.common),
  ),
),

2. 使用主题

2.1 使用 GetX

当使用 GetX 时，可以通过 GetxController 使用 GDSCTheme 类。

示例代码：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:gdsc_ys_color/gdsc_ys_color.dart';

class ThemeController extends GetxController {
  var currentTheme = GDSCThemeColor.blue.obs;

  void changeTheme(GDSCThemeColor newTheme) {
    currentTheme.value = newTheme;
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetBuilder<ThemeController>(
      init: ThemeController(),
      builder: (themeController) {
        return GetMaterialApp(
          title: 'Flutter Demo',
          theme: themeController.themeData,
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  final _themeController = Get.find<ThemeController>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GDSC Theme Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _themeController.changeTheme(GDSCThemeColor.green),
          child: Text('Change Theme to Green'),
        ),
      ),
    );
  }
}

2.2 使用 Provider

当使用 Provider 时，可以通过 ChangeNotifier 使用 GDSCTheme 类。GDSCThemeManager 已经从 gdsc_ys_color.dart 导出。

示例代码：

import 'package:flutter/material.dart';
import 'package:gdsc_ys_color/gdsc_ys_color.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => GDSCThemeManager(defaultColor: GDSCThemeColor.green),
      child: const DynamicThemeWithProviderExample(),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final themeManager = Provider.of<GDSCThemeManager>(context);
    return MaterialApp(
      title: 'GDSC Dynamic Theme with Provider',
      theme: themeManager.themeData,
      home: const MyHomePage(title: 'GDSC Dynamic Theme with Provider'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final themeManager = Provider.of<GDSCThemeManager>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('GDSC Theme Manager'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => themeManager.changeTheme(GDSCThemeColor.blue),
          child: Text('Change Theme to Blue'),
        ),
      ),
    );
  }
}

2.3 直接访问 ThemeData

GDSCTheme 导出了与 MaterialApp 的 theme 属性兼容的预定义 ThemeData。可以直接通过指定要使用的主题来访问它。

示例代码：

import 'package:flutter/material.dart';
import 'package:gdsc_ys_color/gdsc_ys_color.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 Demo',
      theme: GDSCTheme.green, // 设置为你喜欢的主题
      home: const MyHomePage(title: 'GDSC Theme Demo'),
    );
  }
}