[SOLUTION] Handling Overflow to Preserve Full-Width Animations

I built a rotating portal that works flawlessly on large screens. However, since the animation depends more on height than width, parts of the portal get clipped on smaller (mobile) devices.

During the rotation animation, the clipped section rotates instead of the full portal, because the overflow area isn't rendered.

At first, the only workaround I found was to make a scrollable row with a fixed width — essentially double the screen width. But I didn’t want the portal to be scrollable, nor did I want the layout to start with the row aligned to the left at scroll position 0.

So I came up with a better solution: a non-scrollable, center-aligned row that functions exactly as needed. It keeps the portal centered and prevents it from being clipped at the screen edges.

Here’s the custom code I used:

class OverFlowBox extends StatefulWidget {
  const OverFlowBox({
    super.key,
    this.width,
    this.height,
    required this.childWidget,
    required this.maxwidth,
  });

  final double? width;
  final double? height;
  final Widget Function() childWidget;
  final double maxwidth;

  @override
  State<OverFlowBox> createState() => _OverFlowBoxState();
}

class _OverFlowBoxState extends State<OverFlowBox> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width ?? double.infinity,
      height: widget.height,
      child: OverflowBox(
        alignment: Alignment.center,
        minWidth: 0.0,
        maxWidth:
            widget.maxwidth, // Use the provided maxwidth to constrain overflow
        child: Row(
          mainAxisAlignment:
              MainAxisAlignment.center, // Center the content horizontally
          mainAxisSize:
              MainAxisSize.min, // Take only the space needed by the child
          children: [
            widget.childWidget(),
          ],
        ),
      ),
    );
  }
}