Hide overflow flutter, without overflowed message

user_4299560 0
Viewed 1384

I have an animation that I want to be partially visible.

enter image description here

Basically the end of the screen should cut the animation in half. So the animation is overflowing but that's intended. How do I remove the overflowed message then ?

return ClipRect(
  child: Container(
    width: MediaQuery.of(context).size.width - 32,
    child: Padding(
      padding: const EdgeInsets.fromLTRB(spacingM, spacingM, 0, spacingM),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          TextInfo(
              location: location, dateFormatter: dateFormatter, date: date),
          Transform.translate(
            offset: Offset(30, 0),
            child: WeatherAnimation(),
          ),
        ],
      ),
    ),
  ),
);
flutter-layout flutter
2 Answers

Try using wrapping what is overflowing with a FittedBox. This will clip out what is overflowing.

In this scenario, I believe you should wrap the Padding widget or perhaps the Row widget with FittedBox which would allow the FittedBox to take shape of its parent and clip the children to fit.

user_140312500

Instead of ClipRect, you can use Stack with fit as StackFit.expand.

return Stack(
fit: StackFit.expand,
  children: [ 
  Container(
    width: MediaQuery.of(context).size.width - 32,
    child: Padding(
      padding: const EdgeInsets.fromLTRB(spacingM, spacingM, 0, spacingM),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          TextInfo(
              location: location, dateFormatter: dateFormatter, date: date),
          Transform.translate(
            offset: Offset(30, 0),
            child: WeatherAnimation(),
          ),
        ],
      ),
    ),
  ),
 ]
);

let me know, if this work.

user_137010720
Related