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

Flutter – Large image inside SlideTransition is getting cropped

Here is what I’m trying to achieve and had achieved by using Positioned instead of SlideTransition before attempting to do animations:
enter image description here

Now when I tried using SlideTransition and after messing around with the fits a little I got this:

enter image description here

How can I make the image not get cropped at the top and bottom where it would be meeting the constraints of its parent container?

Container(
                color: Colors.yellow,
                width: 300,
                height: 400,
                child: Stack(
                  fit: StackFit.passthrough,
                  children: [
                    SlideTransition(
                        position: _offsetAnimation,
                        child: Transform.rotate(
                          angle: pi / 4,
                          child: Image.asset('assets/TOD10N_v.png', height: screenHeight, fit: BoxFit.cover)
                        )
                    ),
                  ],
                )
              )
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    You need to use clipBehaviour = Clip.none on the stack, and put the stack child in a Positioned widget with any property top, right, bottom, left set to anything.

    Container(
  width: 300,
  height: 400,
  color: Colors.yellow,
  child: Stack(
    clipBehavior: Clip.none,
    children: [
      Positioned(
        top: 0,
        child: SlideTransition(
          position: _offsetAnimation,
          child: Transform.rotate(
            angle: pi / 4,
            child: Image.asset('assets/TOD10N_v.png', height: screenHeight, fit: BoxFit.cover)
          ),
        ),
      ),
    ],
  )
)

Please signup or login to give your own answer.

Back To Top
Search