Incorrect use of ParentDataWidget using Flexible widget-CodePudding

I was working on my project and got stucked with this error while using a flexible widget. Check out my code below. I was trying to make the small green box to be flexible and get size according to its need. But it is throwing an error 'Incorrect use of ParentDataWidget'. I think the problem is with Flexible widget I am using. I am not sure kindly help me out. Here is my code.

Product Card Widget.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,
                      ),
                    ),
                  ),
                ),
              ),
            ),

Error

The following assertion was thrown while applying parent data.: Incorrect use of ParentDataWidget.

The ParentDataWidget Flexible(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type BoxParentData.

Usually, this means that the Flexible widget has the wrong ancestor RenderObjectWidget. Typically, Flexible widgets are placed directly inside Flex widgets. The offending Flexible is currently placed inside a Padding widget.

CodePudding user response：

The error is that you are using a flexible widget inside the wrong parent. Providing the flexible widget will give it the maximum dimension it can have. If you want to make your box fit and flexible, I would suggest you go for the FittedBox widget. Here is an updated code. Let me know if this works for you.

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,
                      ),
                    ),
                  ),
                ),
              ),
            ),