使用Flexible组件触发Incorrect use of ParentDataWidget错误求助

错误原因 #

Flexible是弹性布局专用组件，它必须直接作为Flex（Row、Column都是Flex的子类）的子组件使用。你的代码中把Flexible嵌套在了Padding内部，而Padding属于Box类布局组件，它只能为子组件提供BoxParentData类型的父数据，和Flexible需要的FlexParentData类型不匹配，因此触发报错。

修复方案 #

方案1：调整层级，将Padding放到Flexible内部

如果确实需要Flexible的弹性适配能力，把Padding作为Flexible的子组件，让Flexible直接成为Row/Column的子元素：

Flexible(
  child: Padding(
    padding: const EdgeInsets.only(top: 10, left: 5),
    child: Container(
      padding: EdgeInsets.all(5),
      decoration: BoxDecoration(
        color: product.type == 'Veg'
            ? Colors.green.withOpacity(0.8)
            : Colors.red.withOpacity(0.8),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(
        child: Text(
          product.type,
          style: GoogleFonts.acme(
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
),

方案2：不需要弹性布局时，直接移除Flexible

如果只是想让Container自适应内容尺寸，不需要弹性分配空间，直接去掉Flexible即可：

Padding(
  padding: const EdgeInsets.only(top: 10, left: 5),
  child: Container(
    padding: EdgeInsets.all(5),
    decoration: BoxDecoration(
      color: product.type == 'Veg'
          ? Colors.green.withOpacity(0.8)
          : Colors.red.withOpacity(0.8),
      borderRadius: BorderRadius.circular(10),
    ),
    child: Center(
      child: Text(
        product.type,
        style: GoogleFonts.acme(
          color: Colors.white,
        ),
      ),
    ),
  ),
),

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