Flutter报错：参数类型InputDecoration无法分配给InputDecoration?

嘿，这个报错的核心原因是命名冲突！你自己定义了一个名为InputDecoration的StatelessWidget，但Flutter的material库中已经有一个用于配置输入框样式的InputDecoration类了——这就导致Dart在解析你代码里的InputDecoration(...)时，优先指向了你自己写的Widget类，而不是系统提供的输入装饰类。

TextField的decoration参数要求的类型是系统的InputDecoration?，但你传的却是自己定义的StatelessWidget类型，自然就会出现类型不匹配的报错。

解决办法 #

有两种简单的方式可以修复这个问题：

1. 重命名你自定义的Widget类 #

这是最直接的方案，把你自己的Widget改成一个不会和系统类重名的名字，比如CustomInputField或者StyledTextField：

class CustomInputField extends StatelessWidget {
  const CustomInputField({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) { // 顺便修正你拼写错误的`conyext`
    return TextField(
      keyboardType: TextInputType.text,
      style: TextStyle(
        color: Colors.grey.shade800,
        fontSize: 16.0,
      ),
      decoration: InputDecoration(
        hintText: 'Hint Text',
        errorText: 'Error Text',
        border: OutlineInputBorder(),
      ),
    );
  }
}

2. 使用全名引用系统的InputDecoration #

如果你不想修改自定义Widget的名字，可以通过指定库前缀来明确调用系统的InputDecoration：
首先在导入material库时添加别名：

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

然后在代码里这样使用：

class InputDecoration extends StatelessWidget {
  const InputDecoration({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextField(
      keyboardType: TextInputType.text,
      style: TextStyle(
        color: Colors.grey.shade800,
        fontSize: 16.0,
      ),
      // 明确使用material库中的InputDecoration
      decoration: material.InputDecoration(
        hintText: 'Hint Text',
        errorText: 'Error Text',
        border: material.OutlineInputBorder(),
      ),
    );
  }
}

另外注意一下，你代码里的build方法参数拼写错了（conyext → context），这个小问题也顺手修正了哦~

内容的提问来源于stack exchange，提问作者Abdullah