Question 78010 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Image bigger than container

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

4

Answers


  1. 0

    Try wrapping your image widget inside ClipRRect widget, ClipRRect.

    Login or Signup to reply.
  2. 0

    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,
            ))),
  ),
    Login or Signup to reply.
  3. 0

    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-> image

    Login or Signup to reply.
  4. 0

    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')
    )
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search