boxy_overflow_parent_data_example.dart

import 'package:boxy/boxy.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Boxy Demo',
      theme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Boxy Demo')),
      body: Align(
        child: Container(
          width: 250.0,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.white30, width: 2.0),
            borderRadius: BorderRadius.circular(8.0),
          ),
          padding: const EdgeInsets.all(8.0),
          child: CustomBoxy(
            delegate: OverflowableColumnBoxy(),
            children: [
              Container(
                height: 75.0,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(8.0),
                ),
              ),
              OverflowingChild(
                padding: const EdgeInsets.only(top: -16),
                child: Container(
                  height: 75.0,
                  decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                ),
              ),
              OverflowingChild(
                padding: const EdgeInsets.only(top: -16),
                child: Container(
                  height: 75.0,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class OverflowingChild extends StatelessWidget {
  const OverflowingChild({
    Key? key,
    required this.padding,
    required this.child,
  }) : super(key: key);

  final EdgeInsets padding;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return BoxyId(
      child: child,
      data: padding,
    );
  }
}

class OverflowableColumnBoxy extends BoxyDelegate {
  @override
  Size layout() {
    final childConstraints = BoxConstraints.tightFor(
      width: constraints.maxWidth,
    );
    var y = 0.0;
    for (final child in children) {
      child.layout(childConstraints);
      final childInsets = child.parentData as EdgeInsets? ?? EdgeInsets.zero;
      child.position(Offset(childInsets.left, y + childInsets.top));
      y += child.size.height + childInsets.vertical;
    }
    return Size(constraints.maxWidth, y);
  }

  @override
  void paintForeground() {
    for (var i = 0; i < children.length; i++) {
      final fullRect = children[i].rect;
      final x = 32.0 + (i * 32.0);
      canvas.drawPath(
        Path()
          ..moveTo(x + 16, fullRect.top + 1)
          ..lineTo(x, fullRect.top + 1)
          ..lineTo(x, fullRect.bottom - 1)
          ..lineTo(x + 16, fullRect.bottom - 1),
        Paint()
          ..color = Colors.white
          ..style = PaintingStyle.stroke
          ..strokeWidth = 2.0,
      );
    }
  }
}