Flutter Image bigger than container - flutter

Question

How can I make it so that if an image that is rotated and goes outside of its container does not show outside of it?
I would also like that if the image is in a normal position and if it is larger than its container, it will be shown cut off.
By the way, can I do the same treatment with the icons?
Here is my code
class CardList extends StatelessWidget {
const CardList({
Key? key,
required this.text,
required this.subText,
required this.trailing,
}) : super(key: key);
final String text;
final String subText;
final Widget trailing;
#override
Widget build(BuildContext context) {
GlobalKey _container = GlobalKey();
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 0,
color: Theme.of(context).colorScheme.surfaceVariant,
margin: EdgeInsets.symmetric(horizontal: 0.5.w, vertical: 0.5.h),
child: Row(
children: [
Container(
padding: EdgeInsets.only(left: 10.w),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AutoSizeText(text,
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1),
subText.isNotEmpty
? AutoSizeText(
subText,
maxLines: 1,
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
fontWeight: FontWeight.w500),
)
: const SizedBox(
height: 0,
),
],
),
),
Container(
color: Colors.blue,
height: 100,
child: Transform.translate(
offset: Offset(0.0, 15.0),
child: Transform.rotate(
angle: -3.14 / 12.0,
child: Image.asset(
'assets/images/map.png',
height: 300,
))),
),
],
));
}
}

Answer 1

By using Container's clipBehavior and set it to antiAlias you can make sure the child widget never appear outside of its parent, like this:
Container(
clipBehavior: Clip.antiAlias, // add this
decoration: BoxDecoration(// add this
color: Colors.blue,
),
height: 100,
child: Transform.translate(
offset: Offset(0.0, 15.0),
child: Transform.rotate(
angle: -3.14 / 12.0,
child: Image.asset(
'assets/images/map.png',
height: 300,
))),
),

Answer 2

Try wrapping your image widget inside ClipRRect widget, ClipRRect.

Answer 3

Try below code hope its help to you, refer ClipRRect, just change my image with your image
FittedBox(
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
constraints: BoxConstraints.tight(const Size(100, 100)),
color: Colors.blue,
child: Transform.translate(
offset: const Offset(0.0, 15.0),
child: Transform.rotate(
angle: -3.14 / 12.0,
child: const FlutterLogo(size: 300),
),
),
),
),
),
Result->

Answer 4

Using ClipRRect Widget will solve that.
If you wrap your image inside a ClipRRect Widget in a rotation position, it will automatically cut the outward edges.
ClipRRect(child: Image.network('your image'))
Also, in a normal image position inside a container, if the corners are rounded and the image is not, you need to put your image inside a ClipRRect widget, and borderRadius option allows you to round your image to match the container radius.
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(5)),
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.network('Your Image')
)
)