Shadow size is wrong when using BoxShape.circle with a width and height that are not equal

[vishaljnimblechapps]

Details:-

Flutter SDK version :- 3.16.5
flutter_inset_box_shadow: ^1.0.8

code :-

Container(
              color: selectedBackgroundColor,
              child: Center(
                child: Container(
                  // width: MediaQuery.of(context).size.width * 0.75,
                  // height: MediaQuery.of(context).size.height * 0.25,
                  width: 275,
                  height: 275,
                  decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.amber,
                      boxShadow: [
                        BoxShadow(
                          color: Color.fromRGBO(0, 0, 0, 0.75),
                          offset: Offset(0, -10),
                          inset: true,
                        ),
                      ]),
                ),
              ),
            ),
            

I'm attaching the final output with the fixed height and width and with the dynamic height and width.

with fixed height I'm getting this output:-

with the dynamic width height I'm getting this output:-

can anyone help me to achieve the same result as with the fixed height?

[Deleted user]

Hi! Thank you for opening an issue. 🙏

The package changed name to flutter_inset_shadow. If you want to know the reasons why, you can go check the README.md of the project (do not hesitate if you have any question tho).

Can you try again using the latest version of flutter_inset_shadow instead of flutter_inset_box_shadow?

Thanks in advance!

[vishaljnimblechapps]

@johynpapin Thanks for the quick reply. I have switched to flutter_inset_shadow, but I'm still encountering the same issue I mentioned.

[Deleted user]

Thank you for trying again! 🙏

I may have an idea of the cause of the bug, so I will try to take some time to fix this.
But, I can't say when I will do this, I have a lot going on right now.

I will keep you updated! 😄

[vishaljnimblechapps]

Hi @chitochi, have you had a chance to look into this? We have an urgent need for this to be resolved, and it would be greatly appreciated and helpful for us if you could address it.

[Chito]

Hi, I will try to take a look today. 👍

[Chito]

The issue seems to happen when using BoxShape.circle and a width and height that are not equal. (So it's not about using a dynamic size.)

That's because a circle must have the same width and height. Internally, Flutter uses shortestSide (the minimum of width and height).

So maybe a quick fix is to import dart:math and to use the min function to choose between width and height, for example:

// ...

final width = MediaQuery.of(context).size.width * 0.75;
final height = MediaQuery.of(context).size.height * 0.25;
final size = math.min(width, height);

// ...

return Container(
  width: size,
  height: size,
  // ...
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
    // ...
  ),
  // ...
);

I will try to fix this so that such a quick fix is not needed tho. 😅

[vishaljnimblechapps]

@chitochi Thank you so much for the quick fix. I understand the issue you just mentioned. I implemented the same, and I can confirm it is working fine.

One more thing I have: what if the container doesn't have width and height? In that case, the shadow size is wrong.

@chitochi Please inform me about this as well.

[Chito]

Hi, good to know that it works for you too! 🎉

For a Container without width and height, maybe you can use the AspectRatio widget?

The idea here is to force the Container to be a square.

return AspectRatio(
  aspectRatio: 1, // ensure that the Container will be a square
  child: Container(/* ... */),
);

I am not sure, but maybe you will need to wrap the AspectRatio in a Center widget or something.

This is not ideal tho, only a temporary fix.

[vishaljnimblechapps]

@chitochi Okay, but we have the BoxShape.circle shape so you probably need to fix it in an ideal way. Let me know when you get a chance to fix it.

BTW Thanks for the quick replies.

[Chito]

Just in case, even if you use BoxShape.circle the Container is technically still a square or a rectangle, but it's drawn as a circle. That's why I think ensuring that the Container will be a square will allow you to get a beautiful circle. 🟢

Thank you for opening the issue. 😄

[Chito]

Here is a little diagram to explain what I mean:

The dotted square is the invisible Container, even with BoxShape.circle applied. The purple circle is what is drawn. But as you can see, the Container is still a square.

[vishaljnimblechapps]

@chitochi I understand your point, but this fix is not appropriate. If I simply add a margin, it will break again.

[vishaljnimblechapps]

Hi @chitochi do you have any updates on this?

[Chito]

hi, I will try to fix this this week

[Chito]

So I fixed this, I will add a message here once it's released.

[Chito]

I just released the 2.0.3 version! 🎉
I would very much appreciate a confirmation that the fix works. :3