expandify 1.0.1 copy "expandify: ^1.0.1" to clipboard
expandify: ^1.0.1 copied to clipboard

Provides widget to help child expand to fill space or scroll

Expandify #

![pub package][version_badge]

This package provides a very simple implementation of a widget which ensures a child widget can take the height or width of the screen, but still be able to scroll.

This is useful in the case where you want to show space between widgets when there are less than fill the entire screen, but to have them touching (or close to it) when there many of them.

Getting started #

Add this package: flutter pub add expandify

Usage #

You can use Expandify similar to how you would use a SingleChildScrollView. This is an example of using it horizontally:

return Expandify(
  direction: Axis.horizontal,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(color: Colors.blue, width: 100, height: 100),
      Container(color: Colors.red, width: 100, height: 100),
    ],
  ),
);

And this is an example of using it vertically:

return Expandify(
  child: Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(color: Colors.blue, width: 100, height: 100),
      Container(color: Colors.red, width: 100, height: 100),
    ],
  ),
),

Examples: #

With two items and spaceBetween specified, it will look like this:

Shows usage of expandify with items not taking the whole width. They are at each side of the viewport.

With the same set-up but 5 items, it will look like this:

Shows usage of expandify with items taking the whole width. They aligned left-to-right with no space between.

From this code:

Expandify(
  direction: Axis.horizontal,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(color: Colors.blue, width: 100, height: 50),
      Container(color: Colors.red, width: 100, height: 50),
      Container(color: Colors.purple, width: 100, height: 100),
      Container(color: Colors.orange, width: 200, height: 100),
      Container(color: Colors.green, width: 100, height: 100),
    ],
  ),
),

You'll notice that the green box is missing as it is off-screen; if we scroll this is what we'd see:

Shows usage of expandify with items taking the whole width, scrolled to the far right to show the last box.

3
likes
130
pub points
0%
popularity

Publisher

unverified uploader

Provides widget to help child expand to fill space or scroll

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on expandify