在堆栈的边界上颤动放置小部件

Question

I am trying to achieve an effect like this:

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:

import 'package:flutter/material.dart';

void main() => 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),
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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.

Any help is greatly appreciated!

Answer 1

    double iconSize = 35;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            centerTitle: true,
            title: Text('Drag widget on screen'),
          ),
          body: Container(
              width: 200,
              color: Colors.red,
              child: Stack(
                clipBehavior: Clip.none,
                children: [
                  Positioned(
                    left: 200-iconSize,
                    top: MediaQuery.of(context).size.height/2-(iconSize*1.5),
                    child: Container(
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              shape: BoxShape.circle,
                            ),
                            child: Icon(Icons.close, color:Colors.grey, size: iconSize),
                          ),
                  )
                ],
              ),
            ),
        );
  }