Widget Inflation

The most powerful feature of Boxy is the ability to inflate arbitrary widgets at layout time.

In the below example we construct a Text widget based on the size of another child. This would be extremely difficult to accomplish without Boxy, even using a custom Element and RenderObject.

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

  @override
  Widget build(BuildContext context) {
    return CustomBoxy(
      delegate: MyBoxyDelegate(),
      children: [
        Container(
          color: Colors.blue,
          width: 50,
          height: 50,
        ),
      ],
    );
  }
}

class MyBoxyDelegate extends BoxyDelegate {
  @override
  Size layout() {
    // Lay out the container first.
    final container = children.single;
    final containerSize = container.layout(constraints);

    // Inflate a Text widget based on the containers size.
    final text = inflate(
      Text('^ $containerSize'),
      id: #text,
    );
    final textSize = text.layout(constraints);

    // Position the text below the container.
    text.position(Offset(0, containerSize.height));

    return Size(
      max(containerSize.width, textSize.width),
      containerSize.height + textSize.height,
    );
  }
}