expandify 1.0.1 expandify: ^1.0.1 copied to clipboard
Provides widget to help child expand to fill space or scroll
Expandify #
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:
With the same set-up but 5 items, it will look like this:
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: