Flutter：IconButton条件渲染语句报错，如何实现按需显示？

你直接在Widget的child参数位置写if语句不符合Flutter的Widget树语法规则，因为child需要接收一个Widget类型的值，而非代码块。以下是几种正确的实现方式：

方式一：条件表达式（三目运算符） #

适合简单的二选一场景，直接给child赋值：

Center(
  child: item.info != "" 
      ? IconButton(
          icon: const Icon(Icons.info_outline_rounded),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Page2()),
            );
          },
        )
      : SizedBox.shrink(), // 用空占位Widget避免null可能引发的异常
)

方式二：集合中的if语法 #

如果是在Row/Column等支持多子Widget的组件的children列表中，可直接使用：

Row(
  children: [
    // 其他需要显示的Widget
    if (item.info != "")
      IconButton(
        icon: const Icon(Icons.info_outline_rounded),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const Page2()),
          );
        },
      ),
    // 其他需要显示的Widget
  ],
)

方式三：使用Visibility组件 #

更灵活控制显示/隐藏，还可选择是否保留组件占位空间：

Center(
  child: Visibility(
    visible: item.info != "",
    maintainSize: false, // 隐藏时不占空间，设为true则保留
    child: IconButton(
      icon: const Icon(Icons.info_outline_rounded),
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const Page2()),
        );
      },
    ),
  ),
)

额外提示 #

如果item.info可能为null，建议把判断条件改成item.info?.isNotEmpty == true，同时处理null和空字符串的情况。

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