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

How to make the image visible in stack overflowing the container area in flutter

I have a container and circle avatar in a stack. avatar is placed at the top center with alignment and is positioned to used as a overlay image over the container border. But the image is disappearing as it is overflowing the container border. Is there any widget that can be used to produce the desired result?

Stack(
          alignment: Alignment.topCenter,
          children: [
            Container(
              height: screenWidth / 1.25,
              width: screenWidth / 1.4,
              decoration: BoxDecoration(
                color: kAppBarColor,
                borderRadius: BorderRadius.circular(12.0),
              ),
              child: Column(
                children: [
                  const SizedBox(height: 45.0),
                  Text(
                    'Joey',
                    style: kTitleTextStyle.copyWith(
                      fontSize: 22.0,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  const SizedBox(height: 3.0),
                  Text(
                    'WhatsApp contact',
                    style: kSubTitleTextStyle.copyWith(fontSize: 12.0),
                  ),
                  const SizedBox(height: 10.0),
                  SizedBox(
                    height: 210.0,
                    width: 210.0,
                    child: Image.asset(
                      'images/qr_whatsapp.jpg',
                      scale: 1.2,
                    ),
                  ),
                  const SizedBox(height: 5.0),
                ],
              ),
            ),
            const Positioned(
              top: -20,
              child: CircleAvatar(
                radius: 25.0,
                backgroundImage: AssetImage('images/p1.jpg'),
              ),
            )
          ],
        ),

enter image description here

Tags:

2

Answers


  1. 0

    You have a clipBehavior property in stack you can try it to solve this issue.

    Stack(
  clipBehavior: Clip.none,
    ...rest of your code
)
    Login or Signup to reply.
  2. 0

    Wrap your CircleAvatar with ClipOval like this:

    Stack(
  alignment: Alignment.topCenter,
  children: [
    Container(
      height: screenWidth / 1.25,
      width: screenWidth / 1.4,
      decoration: BoxDecoration(
        color: kAppBarColor,
        borderRadius: BorderRadius.circular(12.0),
      ),
      child: Column(
        children: [
          const SizedBox(height: 45.0),
          Text(
            'Joey',
            style: kTitleTextStyle.copyWith(
              fontSize: 22.0,
              fontWeight: FontWeight.w500,
            ),
          ),
          const SizedBox(height: 3.0),
          Text(
            'WhatsApp contact',
            style: kSubTitleTextStyle.copyWith(fontSize: 12.0),
          ),
          const SizedBox(height: 10.0),
          SizedBox(
            height: 210.0,
            width: 210.0,
            child: Image.asset(
              'images/qr_whatsapp.jpg',
              scale: 1.2,
            ),
          ),
          const SizedBox(height: 5.0),
        ],
      ),
    ),
    Positioned(
      top: -20,
    // this is changed
      child: ClipOval(
        child: CircleAvatar(
          radius: 25.0,
          backgroundImage: AssetImage('images/p1.jpg'),
        ),
      ),
    )
  ],
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search