boxy, Layout made simple

About

Boxy is a Flutter package created to overcome the limitations of built-in layout widgets, it provides utilities for flex, custom multi-child layouts, dynamic widget inflation, slivers, and more!

The package is ready for production use, it has excellent documentation, test coverage, and passes strict analysis.

Check out the new wiki! https://boxy.wiki

Flex layouts

A common design problem is when you need one or more children of a Row or Column to have the same cross-axis size as another child in the list, with boxy this can be achieved trivially using BoxyRow, BoxyColumn and Dominant.

Using BoxyRow. A sidebar matches the height of a dynamically sized container

Using BoxyColumn. An underbar matches the width of a dynamically sized container

Using BoxyColumn and BoxyFlexible.align; The top child has a custom cross axis alignment from the others

See the documentation of BoxyRow and BoxyColumn for more information.

Custom layouts

One of the pains of implementing custom layouts is learning the RenderObject model and how verbose it is, to make this process easier we provide an extremely simple container CustomBoxy that delegates layout, paint, and hit testing.

1. Declare widget using CustomBoxy 2. Implement delegate. Dynamic header and content in a column with an avatar pinned to the center of both

The most powerful feature of CustomBoxy is the ability to inflate arbitrary widgets at layout time, this means widgets can depend on the size of others, something previously impossible without hacky workarounds.

Lazy-loading children with BoxyDelegate.inflate to match the width of a container

See the documentation of CustomBoxy and BoxyDelegate for more information.

Slivers

Ever want to give SliverList a box decoration? The sliver library provides SliverContainer which allows you to use box widgets as the foreground or background of a sliver.

This library also provides SliverCard, a SliverContainer that looks like a card.

Adding a custom card-like background to a SliverList, while still building lazily

Also check out:

Miscellaneous

The utils library provides extensions with dozens of axis-dependant methods on BoxConstraints, Size, Offset, and more. These extensions make writing directional layouts significantly less cumbersome.

The OverflowPadding widget is similar to Padding but allows the child to overflow when given negative insets.

Libraries

boxy
This library contains CustomBoxy, a widget that uses a delegate to control the layout of multiple children.
flex
This library contains the BoxyFlex, BoxyColumn and BoxyRow widgets.
inflating_element
This library contains the internal logic of CustomBoxy, useful if you want to implement a custom RenderObject that inflates arbitrary widgets at layout time.
padding
redirect_pointer
render_boxy
This library contains the guts of CustomBoxy, useful if you want to integrate a custom render protocol.
scale
slivers
This library provides SliverCard and SliverContainer, useful for giving box decorations to lazily built slivers.
utils
This library contains dozens of utility methods for making Axis-dependant layouts, including slivers, significantly less verbose.