Flutter色盲辅助插件clr_blindness_helper的使用

Flutter色盲辅助插件clr_blindness_helper的使用

本插件旨在帮助屏幕上的颜色适应色盲人群。通过使用此插件，可以有效避免一些色盲用户难以区分的颜色组合。

Demo

开始使用

要开始使用此插件，你需要导入三个主要部分：

import 'package:clr_blindness_helper/filter_decorator.dart';
import 'package:clr_blindness_helper/filter_manager.dart';
import 'package:clr_blindness_helper/filter_mode.dart';

如何使用插件

首先，你需要在项目中的任何位置创建一个 FilterManager() 实例（参见示例代码）。FilterManager 是一个单例类，因此无论你在哪里调用构造函数，都会得到相同的实例。

为了展示哪些颜色需要进行调整，你需要使用 FilterDecorator（参见示例代码）。FilterDecorator 会连接到 FilterManager 并在需要时转换颜色。

为了切换滤镜，你需要更改 FilterManager 的模式（参见示例代码）。

filterManager.filterMode = 'Here you put the instance of filter';

当前可用的滤镜有：

- NoFilter() - 禁用滤镜

- RedFilter() - 用于红绿色盲患者（不能看到红色）

- GreenFilter() - 用于红绿色盲患者（不能看到绿色）

简单代码示例

class _MyHomePageState extends State<MyHomePage> {
  // 初始化滤镜管理器
  FilterManager filterManager = FilterManager();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('测试色盲适应'),
        // 这里我们将颜色与装饰器连接
        backgroundColor: FilterDecorator(Colors.amber, filterManager),
      ),
      body: SomeWidget(),
    );
  }
}

它是如何工作的？

滤镜可以帮助避免“危险”的颜色组合。例如，对于红绿色盲患者，红绿、红棕这样的组合是难以区分的。为了帮助色盲用户区分不同的颜色，滤镜会在色盲用户能够看到的颜色范围内做出改变。例如，如果一个人看不到红色，那么滤镜会将红色转换为他们能够看到的光谱范围（如蓝色或绿色）。

完整示例代码

/// 首先，你需要导入三个主要部分

import 'package:clr_blindness_helper/filter_decorator.dart';
import 'package:clr_blindness_helper/filter_manager.dart';
import 'package:clr_blindness_helper/filter_mode.dart';

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

void main() => runApp(MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  /// 初始化滤镜管理器
  FilterManager filterManager = FilterManager();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('测试色盲适应'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  child: Text("无滤镜"),
                  onPressed: () {
                    /// 这是一个更新滤镜和屏幕颜色的例子。
                    /// 当你改变滤镜模式时，需要重建你的屏幕。
                    setState(() {
                      filterManager.filterMode = NoFilter();
                    });
                  },
                ),
                ElevatedButton(
                  child: Text("红滤镜"),
                  onPressed: () {
                    setState(() {
                      filterManager.filterMode = RedFilter();
                    });
                  },
                ),
                ElevatedButton(
                  child: Text("绿滤镜"),
                  onPressed: () {
                    setState(() {
                      filterManager.filterMode = GreenFilter();
                    });
                  },
                ),
              ],
            ),
            /// 这是一个饼图，用于展示滤镜如何工作。
            Container(
                height: 200,
                padding: EdgeInsets.only(top: 50),
                child: PieChart(PieChartData(
                    centerSpaceRadius: 0,
                    sectionsSpace: 0,
                    borderData: FlBorderData(show: false),
                    sections: [
                      PieChartSectionData(
                          value: 10,
                          color:
                          /// 初始化颜色以自动更新，当你改变模式时。
                          /// 你应该使用FilterDecorator来初始化颜色，并提供filterManager以连接。
                          FilterDecorator(Colors.lightGreen, filterManager),
                          radius: 110),
                      PieChartSectionData(
                          value: 10,
                          color: FilterDecorator(Colors.amber, filterManager),
                          radius: 110),
                      PieChartSectionData(
                          value: 10,
                          color: FilterDecorator(Colors.yellow, filterManager),
                          radius: 110),
                      PieChartSectionData(
                          value: 10,
                          color: FilterDecorator(Colors.orange, filterManager),
                          radius: 110),
                      PieChartSectionData(
                          value: 30,
                          color: FilterDecorator(Colors.red, filterManager),
                          radius: 110)
                    ]))),
          ],
        ));
  }
}