title: flutter place widget on the border of a stack
body: <p>I am trying to achieve an effect like this:</p>
  <p><a href="https://i.stack.imgur.com/KolBn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KolBn.jpg" alt="enter image description here" /></a></p>
  <p>My solution so far is to have a container for the background and the child of that container is a Stack that has an aligned Widget that is offset by half of its width using transform.translate and the LayoutBuilder. The code for that looks like this:</p>
  <pre><code>import 'package:flutter/material.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return IconOverlayTest();
    }
  }
  class IconOverlayTest extends StatelessWidget {
    const IconOverlayTest({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: Container(
            width: 200,
            color: Colors.red,
            child: Stack(
              children: [
                Align(
                  alignment: Alignment.centerRight,
                  child: LayoutBuilder(
                    builder: (_, constraint) {
                      final _halfWidth = constraint.maxWidth / 2;
                      return Transform.translate(
                        offset: Offset(_halfWidth, 0),
                        child: Container(
                          padding: EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            shape: BoxShape.circle,
                          ),
                          child: Icon(Icons.close),
                        ),
                      );
                    },
                  ),
                )
              ],
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>The problem now is that the Layoutbuilder width picks up the width of the parent container and _width thus becomes 100 so I am not sure how to combine LayoutBuilder with transform.translate. Is that even a good approach for this sort of problem? I tried using positioned inside of the Stack but that would cut off the part that goes outside of the red background.</p>
  <p>Any help is greatly appreciated!</p>