title: Flutter and BoxShapeBorder
body: <p>I'm trying to add the <strong>&quot;Protection Icon&quot;</strong> on top of the <strong>&quot;Box Shape&quot; border</strong> and make sure that when it moves, it's within Its borderlines on each screen size:</p>
  <p>Code:</p>
  <pre class="lang-dart prettyprint-override"><code>    return Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: const Color(0xff182341),
          ),
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                          border: Border.all(color: const Color(0xff5F687E)),
                          shape: BoxShape.circle,
                          
                  ),
              ),
            Stack( // Using stack here because of other elements that will be added.
              children: [
            AnimatedPositioned(
                          top: 280,
                          left: 130,
                          duration: Duration(milliseconds: 500),
                          child: Container(
                            child: Image(image: AssetImage('images/g8.png')),
                          ),
                        ),
                 ] 
            ),
          ]),
        ),
      );
  
  </code></pre>
  <p><strong>Result:</strong></p>
  <p><a href="https://i.stack.imgur.com/h2liI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h2liI.jpg" alt="Screenshot" /></a></p>
  <p>However, I only got the iPhone 13 Pro's screen right, the other's aren't where they should be</p>