assorted layout widgets
flutter package: assorted layout widgets that boldly go where no native flutter widgets have gone before.
widgets in this package:
columnsuper
rowsuper
fithorizontally
box
textoneline
i will slowly but surely add interesting widgets to this package.
columnsuper
given a list of children widgets, this will arrange them in a column.
it can overlap cells, add separators and more.
columnsuper({
list<widget> children,
double outerdistance,
double innerdistance,
bool invert,
alignment alignment,
widget separator,
bool separatorontop,
});
children
is the list of widgets that represent the column cells, just like in a regularcolumn
widget.
however, the list may containnull
s, which will be ignored.outerdistance
is the distance in pixels before the first and after the last widget.
it can be negative, in which case the cells will overflow the column.innerdistance
is the distance in pixels between the cells.
it can be negative, in which case the cells will overlap.invert
if true will paint the cells that come later on top of the ones that came before.
this is specially useful when cells overlap (negativeinnerdistance
).alignment
will align the cells horizontally if they are smaller than the available horizontal space.separator
is a widget which will be put between each cells. its height doesn’t matter,
since the distance between cells is given byinnerdistance
(in other words, separators don’t occupy space).
the separator will overflow if its width is larger than the column’s width.separatorontop
iftrue
(the default) will paint the separator on top of the cells.
iffalse
will paint the separator below the cells.
note: this is not a substitute for flutter’s native column
,
it doesn’t try to have a similar api, and it doesn’t do all that column
does.
in special, expanded
and flexible
widget don’t work inside of columnsuper
,
and it will overflow if the column is not big enough to fit its contents.
columnsuper
is meant only to certain use cases where column
won’t work,
like when you need overlapping cells.
rowsuper
given a list of children widgets, this will arrange them in a row.
it can overlap cells, add separators and more.
rowsuper({
list<widget> children,
double outerdistance,
double innerdistance,
bool invert,
alignment alignment,
widget separator,
bool separatorontop,
bool fithorizontally,
double shrinklimit,
mainaxissize mainaxissize,
});
on contrary to columnsuper
and the native row
(which will overflow if the cells are not big enough to fit their content),
rowsuper
will resize its cells, proportionately to the width of the minimum intrinsic width of each cell content.
try running the rowsuper example.
most parameters are the same as the ones of columnsuper
, except:
fithorizontally
if true will resize the cells content, horizontally only, until theshrinklimit
is reached.shrinklimit
by default is 67%, which means the cell contents will shrink until 67% of their original width,
and then overflow. makeshrinklimit
equal to0.0
if you want the cell contents to shrink with no limits.
note, iffithorizontally
is false, theshrinklimit
is not used.mainaxissize
by default ismainaxissize.min
, which means the row will occupy no more than its content’s width.
make itmainaxissize.max
to expand the row to occupy the whole horizontal space.
you can also use a rowspacer
to add empty space (if available) between cells. for example:
rowsuper(
children: [
widget1,
rowspacer(),
widget2,
widget3,
]
)
);
assorted layout widgets assorted layout widgets
note: this is not a substitute for flutter’s native row
,
it doesn’t try to have a similar api, and it doesn’t do all that row
does.
in special, expanded
and flexible
widget don’t work inside of rowsuper
,
since rowsuper
will resize cells proportionately when content doesn’t fit.
rowsuper
is meant only to certain use cases where row
won’t work,
like when you need overlapping cells, or when you need to scale the contents
of the cells when they don’t fit.
fithorizontally
fithorizontally({
widget child,
double shrinklimit,
bool fitsheight,
alignmentgeometry alignment,
});
assorted layout widgets
assorted layout widgets assorted layout widgets
the child
will be asked to define its own intrinsic height.
if fitsheight
is true, the child will be proportionately resized (keeping its aspect ratio)
to fit the available height.
then, if the child doesn’t fit the width, it will be shrinked horizontally
only (not keeping its aspect ratio) until it fits, unless shrinklimit
is larger than zero,
in which case it will shrink only until that limit.
note if shrinklimit
is 1.0 the child
will not shrink at all. the default is 0.67 (67%).
this is specially useful for text that is displayed in a single line.
when text doesn’t fit the container it will shrink only horizontally,
until it reaches the shrink limit. from that point on it will clip,
display ellipsis or fade, according to the text’s text.overflow
property.
note: fithorizontally
with shrinklimit
0.0 is not the same as fittedbox
with boxfit.fitwidth
,
because fithorizontally
will only scale horizontally, while fittedbox
will maintain the aspect ratio.
box
box
is something between a container
and a sizedbox
, which is less verbose and can be made const
.
const box({
bool show,
color color,
double top,
double right,
double bottom,
double left,
double vertical,
double horizontal,
double width,
double height,
alignment alignment,
widget child,
});
since it can be made const
, it’s good for creating colored boxes,
with or without a child and padding:
const box(color: colors.red, width: 50, height:30);
the padding is given by top
, right
, bottom
and left
values, but they
are only applied if the child is not null.
if the child
, width
and height
are all null
, this means the box will occupy no space (will be
hidden). note: this will be extended in the future, so that it ignores horizontal
padding when the child has zero width, and ignores vertical padding when the child
has zero height.
if top
and bottom
are equal, you can instead provide vertical
:
// this:
const box(top: 20, bottom:20, child: ...);
// is the same as this:
const box(vertical: 20, child: ...);
you can’t provide vertical
and top
or bottom
at the same time.
similarly, if right
and left
are equal, you can instead provide horizontal
.
you can’t provide horizontal
and right
or left
at the same time.
you can also hide the box by making the show
parameter equal to false
.
clean-code:
box
can be used as a cleaner substitute for padding
. for example, this code:
return container(
padding: const edgeinsets.symmetric(vertical: 8.0, horizontal: 5.0),
color: colors.green,
child: const padding(
padding: edgeinsets.only(top: 12.0, bottom: 12.0, left: 4.0),
child: text("hello."),
),
),
);
is the functional equivalent of this:
return const box(
vertical: 8.0,
horizontal: 5.0,
color: colors.green,
child: box(vertical: 12.0, left: 4.0, child: text("hello.")),
);
debugging:
- if need to quickly and temporarily add a color to your box so that you can see it,
you can use the constructorsbox.r
for red,box.g
for green,box.b
for blue, andbox.y
for yellow.box(child: mychild); box.r(child: mychild); box.g(child: mychild); box.b(child: mychild); box.y(child: mychild);
- if you want to see rebuilds, you can use the
box.rand
constructor.
it will then change its color to a random one, whenever its build method is called.box.rand(child: mychild);
textoneline
it uses a special fade-with-ellipsis, which is
much better than the current buggy and ugly-looking ellipsis-that-cuts-the-whole-word.
for example, this:
text("this isaverylongwordtodemonstrateaproblem", maxlines: 1, softwrap: false);
will print this in the screen:
this ...
while this:
textoneline("this isaverylongwordtodemonstrateaproblem");
will print this:
this isaverylongwordtodemonst...
this widget probably only makes sense while that issue is not fixed.
Comments are closed.