assorted_layout_widgets 1.0.8

Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets

Widgets in this package:

• ColumnSuper
• RowSuper
• FitHorizontally

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 regular Column widget. The list may contain nulls, 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 (negative innerDistance).

• 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 by innerDistance.

• separatorOnTop if true (the default) will paint the separator on top of the cells. If false 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 the native Column won't work, like when you need overlapping cells.

Try running the ColumnSuper example.

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,
  });

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 the shrinkLimit is reached.

• shrinkLimit by default is 67%, which means the cell contents will shrink until 67% of their original width, and then overflow. Make shrinkLimit equal to 0.0 if you want the cell contents to shrink with no limits. Note, if fitHorizontally is false, the shrinkLimit is not used.

Try running the RowSuper with FitHorizontally example.

FitHorizontally

FitHorizontally({
    Widget child,  
    double shrinkLimit,
    bool fitsHeight,
    AlignmentGeometry alignment,
  });

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.

Try running the FitHorizontally example.

AlignPositioned

See package align_positioned for widgets AlignPositioned and its siblings AnimatedAlignPositioned and AnimChain. They should be part of this package, but will remain in their own package for historical reasons.

---

The Flutter packages I've authored:

• async_redux
• provider_for_redux
• i18n_extension
• align_positioned
• network_to_file_image
• matrix4_transform
• back_button_interceptor
• indexed_list_view
• animated_size_and_fade
• assorted_layout_widgets

Marcelo Glasberg:
https://github.com/marcglasberg
https://twitter.com/glasbergmarcelo
https://stackoverflow.com/users/3411681/marcg
https://medium.com/@marcglasberg