flutter_space 0.0.2
flutter_space: ^0.0.2 copied to clipboard
A Flutter package to create flexible, intuitive, and customizable spacing in your layouts, inspired by [`package:gap`](https://pub.dev/packages/gap) but improved and more powerful.
Space #
A Flutter package to create flexible, intuitive, and customizable spacing in your layouts, inspired by package:gap but improved and more powerful.
With Space, you can add consistent spacing between widgets, create sliver gaps in scrollable areas, and even build flexible layouts with adaptive space. Works perfectly with Flutter's Column, Row, Flex, CustomScrollView, and other sliver-based scrollable widgets.
Features #
- Easy-to-use spacing widgets for both regular layouts and slivers.
- Supports numeric spacing (
double) or predefined spacing enums (Spacing.tiny,Spacing.large, etc.). - Sliver-compatible: use
SliverSpacefor scrollable areas. - Flexible and adaptive space with
MaxSpace. - Optional
colorparameter for debugging or visual separation. - Improved API inspired by
package:gap, with more customization options. - Multiple constructors for quick predefined spacing:
Space.small()Space.medium()Space.large()Space.extraLarge(), etc.
Installation #
Add this to your pubspec.yaml:
dependencies:
flutter_space: ^0.0.2
Then run:
flutter pub get
or
flutter pub add flutter_space
Usage #
Regular space #
Column(
children: [
Text('Hello'),
Space(20), // 20 pixels of space
Text('World'),
Space(Spacing.large), // Predefined large spacing
],
)
Using predefined sizes #
Column(
children: [
Text('Tiny space above'),
Space.tiny(),
Text('Extra large space below'),
Space.extraLarge(),
],
)
Flexible space in layouts #
Row(
children: [
Text('Start'),
MaxSpace.fill(), // takes all remaining space
Text('End'),
],
)
Sliver spacing #
CustomScrollView(
slivers: [
SliverAppBar(title: Text('Header')),
SliverSpace(20), // 20 pixels of sliver space
SliverSpace.large(), // Predefined large sliver space
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(title: Text('Item $index')),
childCount: 10,
),
),
],
)
Predefined Spacing Enum #
enum Spacing {
tiny, // small value
extraSmall,
small,
medium,
large,
extraLarge,
huge,
massive,
}
Use like this:
Space(Spacing.large)
SliverSpace(Spacing.medium)
Debugging #
Optionally, you can add a color to make spaces visible for layout debugging:
Space.large(color: Colors.red.withOpacity(0.3))
SliverSpace.medium(color: Colors.blue.withOpacity(0.3))
Why Space? #
- Flexible: Works with both fixed and adaptive layouts.
- Sliver-ready: Perfect for scrollable UI designs.
- Developer-friendly: Easy constructors for common spacing.
- Improved over
gap: Adds flexibility, sliver support, and visual debugging.
Credits #
Developed by Siva Sankar Company: UpDown Co
Inspired by package:gap.