如何实现Flutter Container条件渲染？解决空变量占位问题

方法1：直接在组件列表中使用条件判断 #

在需要渲染的位置通过 sdesc1.isNotEmpty 判断，为空时返回不占空间的 SizedBox.shrink()，避免出现空白行：

...
sdesc1.isNotEmpty 
    ? Container(
        width: double.infinity,
        color: Colors.transparent,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(sdesc1,
              style: TextStyle(fontSize: 10, fontStyle: FontStyle.italic)),
        ),
      )
    : SizedBox.shrink(),
...

方法2：封装为Widget方法（避免返回可空类型） #

如果要把这段逻辑封装成方法，不要返回Widget?，而是在为空时返回SizedBox.shrink()：

Widget _buildDescContainer() {
  if (sdesc1.isEmpty) {
    return SizedBox.shrink(); // 完全不占据空间的空组件
  }
  return Container(
    width: double.infinity,
    color: Colors.transparent,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(sdesc1,
          style: TextStyle(fontSize: 10, fontStyle: FontStyle.italic)),
    ),
  );
}

使用时直接调用方法即可：

...
_buildDescContainer(),
...

方法3：利用Visibility组件控制显示 #

通过Visibility组件的visible属性控制显示状态，同时关闭maintainSize确保空时不占位：

...
Visibility(
  visible: sdesc1.isNotEmpty,
  maintainSize: false,
  maintainAnimation: false,
  maintainState: false,
  child: Container(
    width: double.infinity,
    color: Colors.transparent,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(sdesc1,
          style: TextStyle(fontSize: 10, fontStyle: FontStyle.italic)),
    ),
  ),
),
...

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