Flutter Image bigger than container-CodePudding

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,
                          ))),
                ),
              ],
            ));
  }
}

CodePudding user response：

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

CodePudding user response：

Try wrapping your image widget inside ClipRRect widget,

CodePudding user response：

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