Flutter Widget 之ColorFiltered

Flutter中，大部分的widget都能轻易变更配色，不过有时候，要变更参数就没那么容易

Text(
    'Changing color',
    style: TextStyle(color: Colors.green)
)
RaisedButton(
    color: Colors.green,
    child: Text('Changing color'),
)

例如，若想操弄图像颜色，你会怎么做？ 使用颜色参数，结果可能会很糟，这并非我们所愿

Image.asset('assets/dash.png')

Image.asset(
    'assets/dash.png',
    color: Colors.red,
)

ColorFiltered这个widget能解决这个问题，将Dash的羽色换成绿色

ColorFiltered(
    colorFilter: ColorFilter.mode(Colors.green,
    BlendMode.modulate),
    child: Image.asset('assets/dash.png'),
)

换成红色系

ColorFiltered(
    colorFilter: ColorFilter.mode(Colors.red,
    BlendMode.modulate),
    child: Image.asset('assets/dash.png'),
)

Flutter有很多过滤器和模式可选用

BlendMode.modulate,
BlendMode.colorBurn,
BlendMode.darken,
BlendMode.difference

ColorFiltered也可用来变更许多子widget的配色,若你想灰显照片UI的某一区块，不妨试试ColorFildered

ColorFiltered(
    colorFilter: ColorFilter.mode(
        Colors.grey,
        BlendMode.saturation,
    ),
    child: MyWidgets(),
)

如果想了解有关ColorFiltered的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址