Flutter TextField 中的 SvgPicture 不适应颜色

Question

当我将TextField.prefixIcon属性设置为Icon(Icons.example)小部件时，图标的颜色会根据 TextField 的 state（启用、聚焦等）自动调整。 现在，我得到了一个包含 svg 个文件的图标包，我想在 TextField 中使用这些文件。 我正在使用flutter_svg来展示它们：

TextFormField(
  decoration: InputDecoration(
    hintText: "Password",
    prefixIcon: SvgPicture.asset(
      AppIcons.lock,
    ),
  ),
),

那么，如何实现SvgPicture的自动颜色适配呢？

Answer 1

您需要手动解决它：

  FocusNode _focusNode = FocusNode();
  bool _enabled = true;


  @override
  Widget build(BuildContext context) {

    return TextFormField(
      focusNode: _focusNode,
      enabled: _enabled,
      decoration: InputDecoration(
        hintText: "password"
      ).copyWith(
        prefixIcon: SvgPicture.asset(AppIcons.lock, color: _resolveColor())
      ),
    );
  }

  Color _resolveColor(){
    if (_focusNode.hasFocus){
      return Colors.yellow;
    }
    if(!_enabled){
      return Colors.white;
    }
    if (!_form.valid){
      return Colors.red;
    }
    return Colors.grey;
  }