Flutter中如何为InkWell组件设置动态点击函数？

问题说明 #

开发Firebase谷歌及手机号登录功能时，封装了通用按钮组件buttonItem，尝试通过参数传递不同点击逻辑给InkWell的onTap属性，却出现类型不匹配报错。

原组件代码 #

Widget buttonItem(
      String imagepath, String buttonName, double size, Function Tap) {
    return InkWell(
      onTap: Tap, // 此处IDE报错：The argument type 'Function' can't be assigned to the parameter type 'void Function()?'
      child: Container(
        width: MediaQuery.of(context).size.width - 60,
        height: 60,
        child: Card(
          color: Colors.black,
          elevation: 8,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15),
              side: BorderSide(width: 1, color: Colors.grey)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SvgPicture.asset(
                imagepath,
                height: size,
                width: size,
              ),
              SizedBox(
                width: 15,
              ),
              Text(
                buttonName,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 17,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

组件调用代码 #

buttonItem("assets/google.svg", "Continue with Google", 25,
                  () async {
                await authClass.googleSignIn(context);
              }),
              SizedBox(
                height: 15,
              ),
              buttonItem("assets/phone.svg", "Continue with Phone", 25, () {}),
              SizedBox(
                height: 15,
              ),

报错信息 #

IDE提示：The argument type 'Function' can't be assigned to the parameter type 'void Function()?'

问题原因 #

InkWell的onTap属性要求的是无参数、返回值为void的可空函数类型（void Function()?），但原代码中定义的参数是泛型的Function，类型范围太宽泛，无法直接匹配，导致类型检查失败。

解决方法 #

只需将参数的类型明确为符合onTap要求的函数类型即可，有两种常用方式：

方式1：直接指定为void Function()? #

修改组件的参数类型，允许传入空值（符合onTap的可空要求）：

Widget buttonItem(
      String imagepath, String buttonName, double size, void Function()? onTap) {
    return InkWell(
      onTap: onTap, // 此处不再报错
      child: Container(
        width: MediaQuery.of(context).size.width - 60,
        height: 60,
        child: Card(
          color: Colors.black,
          elevation: 8,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15),
              side: BorderSide(width: 1, color: Colors.grey)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SvgPicture.asset(
                imagepath,
                height: size,
                width: size,
              ),
              SizedBox(
                width: 15,
              ),
              Text(
                buttonName,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 17,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

方式2：使用Flutter内置的VoidCallback类型 #

VoidCallback是Flutter定义的别名，等价于void Function()，可以简化代码：

Widget buttonItem(
      String imagepath, String buttonName, double size, VoidCallback? onTap) {
    return InkWell(
      onTap: onTap, // 此处不再报错
      child: Container(
        width: MediaQuery.of(context).size.width - 60,
        height: 60,
        child: Card(
          color: Colors.black,
          elevation: 8,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15),
              side: BorderSide(width: 1, color: Colors.grey)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SvgPicture.asset(
                imagepath,
                height: size,
                width: size,
              ),
              SizedBox(
                width: 15,
              ),
              Text(
                buttonName,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 17,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

注意事项 #

• 调用组件时传入的匿名函数（比如谷歌登录的异步函数）完全符合上述类型要求，无需修改调用代码；
• 使用可空类型（?）允许你在不需要点击逻辑时传入null，更灵活。

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