如何從祖先小部件更改文本字段的顏色？

Question

想象一下，我有一個這樣的小部件：

MyWidget(
  fgColor: Colors.red,
  child: Text('Hello', style: MyStyles.someStaticStyle);
)

fgColor MyWidget給child文本？

Widget build(context){
  return child; // How to apply fgColor to this?
}

Answer 1

你的child可以是任何Widget ，所以這實際上是不可能的。 但是，如果您仍然想通過一些解決方法來 go，那么您正在尋找以下內容：

class MyWidget extends StatelessWidget {
  final Color? fgColor;
  final Widget child;

  const MyWidget({
    Key? key,
    this.fgColor,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Widget widget = child;
    if (widget is Text) {
      return Text(
        widget.data!,
        style: widget.style != null ? widget.style!.copyWith(color: fgColor) : TextStyle(color: fgColor),
      );
    }

    return Container(color: fgColor, child: child);
  }
}

用法：

Column(
  children: [
    MyWidget(
      fgColor: Colors.red,
      child: Text('Hello'), // Red color 'Hello'
    ),
    MyWidget(
      fgColor: Colors.red,
      child: SizedBox.square(dimension: 40), // Red color box
    ),
  ],
)

Answer 2

看起來我可以為此使用ColorFiltered ：

return ColorFiltered(
  colorFilter: ColorFilter.mode(fgColor, BlendMode.srcIn),
  child: children);

似乎我應該能夠通過在孩子上方提供DefaultTextStyle來做到這一點，但我似乎無法讓它工作。