Black screen with circle in the middle

Question

Hi I am trying to create a screen that is completely black, except of a circle in the middle. I wrote some code that creates the black screen:

       Stack(
         ...
          Positioned.fill(
                child: Container(
                       color: Colors.grey.withOpacity(0.5),
               )
          )
     )

But the problem that I am facing is that I don't know how to punch a round hole into the screen so that so that it shows what is behind it in the stack.

Thanks in advance for your answers!

Check out [this response](https://stackoverflow.com/a/49396544/3925977), I think it's exactly what you want. — MickaelHrndz, May 15 '20 at 12:04
@MickaelHrndz Yes I have seen that but I did not understand the part with the 'InvertedCircleClipper' class. The actual question then is, if there is an easier way to do it. — Mo711, May 15 '20 at 12:16

score 1 · Answer 1 · answered May 15 '20 at 12:35

1

Use CircleAvatar to draw Circles! Change the radius: property to your desired size, a lot easier than Containers(), or FloatingActionButtons()

Container(
  color: Colors.black,
  Center(
    child: CircleAvatar(
      backgroundColor: Colors.red,
      radius: 20,
    ),
  ),
)

Hope this helps!

answered May 15 '20 at 12:35

Hema Chandran

173
2
9

Yes but it sill doesn't show the content that is behind it, considering that there is something, a layer beneath it, because of `Stack` – Mo711 May 15 '20 at 12:49
Reduce the opacity of the color, or make it totally transparent using `Color(0x00000000)` – Hema Chandran May 15 '20 at 12:56

Jitesh Mohite · Answer 2 · 2020-05-15T13:15:05.337

0

This should work for you.

Container(
            color: Colors.black,
            alignment: Alignment.center,
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                Text("BackGround Text", style: TextStyle(color: Colors.purple),),
                CircleAvatar(
                  backgroundColor: Colors.white.withOpacity(0.3),
                  radius: 100,
                ),
              ],
            )));

edited May 15 '20 at 13:15

answered May 15 '20 at 12:09

Jitesh Mohite

31,138
12
157
147

This is not really what I meant, the hole should be see-through so that you can see the content, **that is behind**, it in the stack. – Mo711 May 15 '20 at 12:26
@Mo711: Edited the answer, have a look – Jitesh Mohite May 15 '20 at 13:15

Black screen with circle in the middle

2 Answers2