AppBar图像太暗

Question

我想在AppBar上添加一个徽标，但无论我把它设置为leading还是title，它看起来总是比原来的颜色更暗。AppBar的颜色恰好是#338585，这也是我的.png图像在body的Scaffold中的背景颜色。

为什么图像看起来如此不同？是否有自动应用到AppBar的BackdropFilter，或者可能是我的文件中的某些内容？

​

​

以下是如何重现该问题的方法(createMaterialColor从一种颜色生成样本，但AppBar是正确的，所以这可能不是问题所在)：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: createMaterialColor(Color(0xFF338585)),
      ),
      home: Scaffold(
        appBar: AppBar(
          leading: Image.asset('assets/logo.png'),
        ),
        body: Image.asset('assets/logo.png'),
      ),
    );
  }

  MaterialColor createMaterialColor(Color color) {
    List strengths = <double>[.05];
    final swatch = <int, Color>{};
    final int r = color.red, g = color.green, b = color.blue;

    for (int i = 1; i < 10; i++) {
      strengths.add(0.1 * i);
    }
    strengths.forEach((strength) {
      final double ds = 0.5 - strength;
      swatch[(strength * 1000).round()] = Color.fromRGBO(
        r + ((ds < 0 ? r : (255 - r)) * ds).round(),
        g + ((ds < 0 ? g : (255 - g)) * ds).round(),
        b + ((ds < 0 ? b : (255 - b)) * ds).round(),
        1,
      );
    });
    return MaterialColor(color.value, swatch);
  }
}

Answer 1

原来，徽标的颜色是半透明的，只有在白色背景上使用时才会显示为预期的颜色。实际颜色值不是#338585，而是#006666。

经验教训:当图像中可能存在透明度时，不要使用paint来检查颜色值。