使用Flexible小部件错误使用ParentDataWidget

Question

我正在处理我的项目，在使用灵活的小部件时遇到了这个错误。查看下面的代码。我试着让这个绿色的小盒子变得灵活，并根据需要调整尺寸。但它抛出了一个错误"ParentDataWidget的错误使用"。我认为问题出在我使用的Flexible小部件上。我不确定能否好心帮我。这是我的密码。

产品卡小工具.dart

Padding(
padding: const EdgeInsets.only(
top: 10,
left: 5,
),
child: Flexible(
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,
),
),
),
),
),
),

错误

应用父数据时引发了以下断言。：ParentDataWidget的使用不正确。

ParentDataWidget Flexible(flex:1(希望将FlexParentData类型的ParentData应用于RenderObject，RenderObject已设置为接受不兼容类型BoxParentData的ParentData。

通常，这意味着Flexible小部件具有错误的祖先RenderObjectWidget。通常，Flexible小部件直接放置在Flex小部件中。违规的Flexible当前被放置在Padding小部件中。

Answer 1

错误在于您在错误的父级中使用了灵活的小部件。提供灵活的小部件将使其具有最大的尺寸。如果你想让你的盒子变得合适和灵活，我建议你使用FittedBox小部件。这是一个更新的代码。让我知道这是否适合你。

Padding(
padding: const EdgeInsets.only(
top: 10,
left: 5,
),
child: FittedBox(
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,
),
),
),
),
),
),

Answer 2

尝试使用Wrap小部件。

Padding(
padding: const EdgeInsets.only(
top: 10,
left: 5,
),
child: Wrap(
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,
),
),
),
),
),
),