Flutter自定义组件问题：如何将Icon参数设为非必填项

要将MyTextField的icon参数改为非必填，只需做以下几处修改：

修改后的完整代码 #

import 'package:flutter/material.dart';

class MyTextField extends StatelessWidget {
  // 明确controller类型，避免隐式类型问题
  final TextEditingController controller;
  final String hintText;
  final bool obscureText;
  // 将Icon改为可空类型
  final Icon? icon;

  const MyTextField({
    super.key,
    required this.controller,
    required this.hintText,
    required this.obscureText,
    // 去掉required，允许不传该参数（默认值为null）
    this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 25.0),
      child: TextField(
        controller: controller,
        obscureText: obscureText,
        decoration: InputDecoration(
          enabledBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: Colors.white),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey.shade400),
          ),
          fillColor: Colors.grey.shade200,
          filled: true,
          hintText: hintText,
          hintStyle: TextStyle(color: Colors.grey[500]),
          // 直接赋值icon，因为suffixIcon本身支持Widget?类型，null时不显示图标
          suffixIcon: icon,
        ),
      ),
    );
  }
}

关键修改点 #

• 参数类型改为可空：把final Icon icon;改成final Icon? icon;，允许该参数接收null值
• 移除required修饰符：构造函数中去掉required this.icon,，可空类型默认值为null，无需额外指定
• 无需额外处理显示逻辑：TextField的suffixIcon参数本身接受Widget?类型，当icon为null时会自动隐藏尾部图标

使用示例 #

• 不需要图标时，直接省略icon参数：

  MyTextField(
    controller: emailController,
    hintText: 'Email',
    obscureText: false,
  )
  

• 需要图标时，正常传入Icon实例：

  MyTextField(
    controller: passwordController,
    hintText: 'Password',
    obscureText: true,
    icon: const Icon(Icons.visibility),
  )
  

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