Hey there! Let's sort out that RenderFlex overflow issue you're hitting with your Flutter Row layout.

The Root Cause #

Right now, you're setting a fixed width on your Container using _mediaQuery.width * 0.65. When this width plus the minimum space needed for your FlatButton.icon exceeds the total screen width, the Row can't fit both elements—hence the overflow error on the right side. Rows don't automatically adjust child sizes to fit by default, so we need to tell it how to distribute space properly.

Fix 1: Wrap the Container in Flexible #

The simplest fix is to wrap your Container with a Flexible widget. This tells the Row to allocate space to the Container only after accounting for the button's minimum required width. The Container will then take up all remaining space, and the button will never get pushed off-screen.

Here's the modified code:

final Size _mediaQuery = MediaQuery.of(context).size;
File _storedImage;
return Row(
  children: [
    Flexible(
      child: Container(
        width: double.infinity, // Let the Container fill the space assigned by Flexible
        height: _mediaQuery.height * 0.35,
        decoration: BoxDecoration(border: Border.all(width: 1, color: Colors.grey)),
        child: _storedImage != null 
            ? Image.file(_storedImage, fit: BoxFit.cover, width: double.infinity) 
            : const Text('No image picked'),
        alignment: Alignment.center,
      ),
    ),
    Expanded(
      child: FlatButton.icon(
        icon: const Icon(Icons.camera),
        label: const Text('Take picture'),
        textColor: Theme.of(context).primaryColor,
        onPressed: () {},
      ),
    ),
  ],
);

Fix 2: Add a Maximum Width Constraint (If Needed) #

If you want to cap the Container's width at a specific percentage (like your original 65% of screen width) while still keeping the button from overflowing, add a constraints property to the Container:

Flexible(
  child: Container(
    constraints: BoxConstraints(
      maxWidth: _mediaQuery.width * 0.65, // Limit container to 65% of screen width max
    ),
    width: double.infinity,
    height: _mediaQuery.height * 0.35,
    decoration: BoxDecoration(border: Border.all(width: 1, color: Colors.grey)),
    child: _storedImage != null 
        ? Image.file(_storedImage, fit: BoxFit.cover, width: double.infinity) 
        : const Text('No image picked'),
    alignment: Alignment.center,
  ),
)

Quick Note on Flexible vs Expanded #

Flexible lets its child shrink if needed to fit the parent, while Expanded forces the child to fill all assigned space. In this case, Flexible is perfect because it prioritizes keeping the button visible while letting the Container take as much space as possible.

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