Flutter模拟器插件cvd_simulator的使用

Flutter模拟器插件cvd_simulator的使用

色盲（color vision deficiency, CVD）影响着大约每12名男性中有1人（8%）和每200名女性中有1人。在英国，大约有300万色盲患者（约占总人口的4.5%），其中大部分是男性。全球范围内，估计有约3亿人患有色盲，这几乎相当于美国的总人口！因此，开发者应该确保色盲不会限制用户使用他们的应用程序。

此插件帮助正常视力的开发者可视化色盲的影响。换句话说，它可以模拟你的应用对色盲用户来说看起来是什么样子。

特性

• 模拟你的应用对色盲用户来说看起来是什么样子。
• 可视化不同种类和程度的色盲。

开始使用

flutter pub add cvd_simulator

使用方法

只需将你的目标（整个应用或单个组件）包裹在一个CVDSimulator中，并提供所需的CVDSimulation。你可能想要使用MachadoCVDSimulation。

Widget build(BuildContext context) {
  return CVDSimulator(
    simulation: MachadoCVDSimulation.protanopia,
    child: Image.network(
      "https://upload.wikimedia.org/wikipedia/commons/e/e0/Ishihara_9.png",
      height: 300,
    ),
  );
}

其他信息

目前，该插件不支持模拟锥体单色视觉或杆体单色视觉。

此外，没有任何CVD模拟可以完全准确地展示你的应用对色盲用户来说看起来是什么样子，因为许多因素各不相同，每个CVD案例都是不同的。即使是屏幕校准也可能有所不同。问题在于这种模拟是否足够好？

作为经验法则，尝试使用你的新开发的应用程序，并依次应用每个严重程度为1的MachadoCVDSimulation（MachadoCVDSimulation.protanopia，MachadoCVDSimulation.deuteranopia 和 MachadoCVDSimulation.tritanopia）。如果你在这些滤镜应用的情况下仍然能够舒适地使用你的应用，那么你的应用对大多数色盲用户来说可能是可用的。

提供不同的颜色方案也可能有所帮助。

示例代码

以下是一个完整的示例代码，展示了如何使用cvd_simulator插件来模拟色盲效果：

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  CVDSimulation Function(double)? type;
  double severity = 0;
  CVDSimulation simulation = CVDSimulation.normal;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CVDSimulator(
      simulation: simulation,
      child: MaterialApp(
        title: 'CVD Simulator Example',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: Scaffold(
          appBar: AppBar(
            title: const Text("CVD Simulator Example"),
          ),
          body: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Builder(builder: (context) {
                  final theme = Theme.of(context);
                  return Wrap(
                    spacing: 2,
                    children: const {
                      "normal": _normal,
                      "protanomaly": MachadoCVDSimulation.protanomaly,
                      "deuteranomaly": MachadoCVDSimulation.deuteranomaly,
                      "tritanomaly": MachadoCVDSimulation.tritanomaly,
                    }
                        .entries
                        .map((option) => MaterialButton(
                              onPressed: () {
                                setState(() {
                                  type = option.value;
                                  simulation = option.value(severity);
                                });
                              },
                              color: type == option.value
                                  ? theme.primaryColor
                                  : theme.disabledColor,
                              child: Text(option.key),
                            ))
                        .toList(),
                  );
                }),
              ),
              Row(
                children: [
                  Expanded(
                    child: Slider(
                      value: severity,
                      onChanged: (value) {
                        setState(() {
                          severity = value;
                          simulation =
                              type?.call(severity) ?? CVDSimulation.normal;
                        });
                      },
                    ),
                  ),
                  SizedBox(width: 50, child: Text(severity.toStringAsFixed(2))),
                ],
              ),
              Flexible(
                child: SingleChildScrollView(
                  child: Wrap(
                    crossAxisAlignment: WrapCrossAlignment.center,
                    children: [
                      Image.network(
                        "https://upload.wikimedia.org/wikipedia/commons/4/4b/Ishihara_1.PNG",
                        height: 300,
                      ),
                      Image.network(
                        "https://upload.wikimedia.org/wikipedia/commons/e/e0/Ishihara_9.png",
                        height: 300,
                      ),
                      Image.network(
                        "https://upload.wikimedia.org/wikipedia/commons/f/f0/Ishihara_23.PNG",
                        height: 300,
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  static CVDSimulation _normal(_) => CVDSimulation.normal;
}