flexiblebox 0.0.5
flexiblebox: ^0.0.5 copied to clipboard
Complete CSS Flexbox implementation for Flutter. Features flex grow/shrink, alignment, wrapping, RTL support, absolute positioning, and scrolling.
FlexibleBox #
A Flutter package that brings CSS Flexbox layout capabilities to your Flutter applications. Create responsive, flexible layouts with ease using familiar flexbox concepts.
Features #
- Complete Flexbox Implementation: Full CSS flexbox specification support
- Flexible Sizing: Support for flex grow, shrink, and basis properties
- Advanced Alignment: Cross-axis and main-axis alignment options
- Wrapping Support: Multi-line flex layouts with wrap and wrap-reverse
- RTL Support: Right-to-left language support
- Absolute Positioning: Position items absolutely within flex containers
- Scrolling: Built-in scrollable flex containers
- Sticky Positioning: Sticky items within flex layouts
- Convenience Widgets: RowBox and ColumnBox for common use cases
- Custom Spacing: Flexible spacing and padding systems
Installation #
Add the package using Flutter CLI:
flutter pub add flexiblebox
Demo #
View the interactive demo: https://sunarya-thito.github.io/flexbox
Quick Start #
Import the package:
import 'package:flexiblebox/flexiblebox_flutter.dart';
Create a simple flex layout:
FlexBox(
direction: FlexDirection.row,
children: [
FlexItem(
flexGrow: 1.0,
child: Container(
color: Colors.red,
child: Center(child: Text('Flexible Item')),
),
),
FlexItem(
width: SizeUnit.fixed(100.0),
child: Container(
color: Colors.blue,
child: Center(child: Text('Fixed Width')),
),
),
],
)
Core Components #
FlexBox #
The main flex container widget that implements the flexbox layout algorithm.
FlexBox(
direction: FlexDirection.row, // Layout direction
wrap: FlexWrap.wrap, // Wrapping behavior
alignItems: BoxAlignmentGeometry.start, // Cross-axis alignment
alignContent: BoxAlignmentContent.start, // Content alignment (for wrapping)
justifyContent: BoxAlignmentBase.start, // Main-axis distribution
rowGap: SpacingUnit.fixed(8.0), // Horizontal spacing between items
columnGap: SpacingUnit.fixed(8.0), // Vertical spacing between items
children: [...], // Flex items
)
FlexItem #
Configures individual children within a FlexBox.
FlexItem(
flexGrow: 1.0, // Growth factor
flexShrink: 0.0, // Shrink factor
width: SizeUnit.fixed(200.0), // Preferred width
height: SizeUnit.fixed(100.0), // Preferred height
alignSelf: BoxAlignmentGeometry.start, // Individual alignment
child: YourWidget(),
)
AbsoluteItem #
For absolutely positioned children within a FlexBox.
AbsoluteItem(
left: PositionUnit.fixed(10.0), // Left offset
top: PositionUnit.fixed(20.0), // Top offset
right: PositionUnit.fixed(10.0), // Right offset
bottom: PositionUnit.fixed(20.0), // Bottom offset
width: SizeUnit.fixed(100.0), // Fixed width
height: SizeUnit.fixed(50.0), // Fixed height
child: YourWidget(),
)
Sticky FlexItem #
For sticky positioning within scrollable flex containers, use the top
, left
,
bottom
, and right
properties on FlexItem. These create sticky elements that
remain fixed relative to the viewport during scrolling.
FlexBox(
direction: FlexDirection.column,
// Make the container scrollable
height: SizeUnit.fixed(300.0), // Fixed height to enable scrolling
children: [
FlexItem(
height: SizeUnit.fixed(100.0),
child: Container(
color: Colors.blue,
child: Center(child: Text('Normal Item')),
),
),
// Sticky header that sticks to the top
FlexItem(
top: PositionUnit.fixed(0.0), // Stick to top edge
left: PositionUnit.fixed(0.0), // Stick to left edge
right: PositionUnit.fixed(0.0), // Stick to right edge
height: SizeUnit.fixed(50.0),
child: Container(
color: Colors.red,
child: Center(child: Text('Sticky Header')),
),
),
FlexItem(
height: SizeUnit.fixed(200.0),
child: Container(
color: Colors.green,
child: Center(child: Text('Content')),
),
),
FlexItem(
height: SizeUnit.fixed(200.0),
child: Container(
color: Colors.yellow,
child: Center(child: Text('More Content')),
),
),
],
)
Scrollable AbsoluteItem #
AbsoluteItem positions elements relative to the viewport bounds, not content
bounds. This means bottom: PositionUnit.fixed(10.0)
positions the element 10
units from the bottom of the viewport, not the content.
For scroll-aware positioning, use PositionUnit.scrollOffset
to create elements
that move with scroll:
FlexBox(
direction: FlexDirection.column,
height: SizeUnit.fixed(400.0), // Fixed height to enable scrolling
verticalOverflow: LayoutOverflow.scroll,
children: [
// Regular content
FlexItem(
height: SizeUnit.fixed(200.0),
child: Container(color: Colors.blue, child: Center(child: Text('Content 1'))),
),
FlexItem(
height: SizeUnit.fixed(200.0),
child: Container(color: Colors.green, child: Center(child: Text('Content 2'))),
),
FlexItem(
height: SizeUnit.fixed(200.0),
child: Container(color: Colors.yellow, child: Center(child: Text('Content 3'))),
),
// Absolute positioned element that moves with scroll
AbsoluteItem(
right: PositionUnit.fixed(20.0), // 20px from right viewport edge
bottom: PositionUnit.fixed(20.0), // 20px from bottom viewport edge
width: SizeUnit.fixed(60.0),
height: SizeUnit.fixed(60.0),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
),
// Element that follows scroll position
AbsoluteItem(
left: PositionUnit.fixed(10.0),
top: PositionUnit.scrollOffset + PositionUnit.fixed(10.0), // Moves with scroll
width: SizeUnit.fixed(40.0),
height: SizeUnit.fixed(40.0),
child: Container(
color: Colors.red,
child: Center(child: Text('Scroll\nIndicator')),
),
),
],
)
Convenience Widgets #
RowBox
Horizontal flex layout (equivalent to FlexBox(direction: FlexDirection.row)
):
RowBox(
alignItems: BoxAlignmentGeometry.center,
justifyContent: BoxAlignmentBase.spaceBetween,
children: [
Text('Left'),
Text('Center'),
Text('Right'),
],
)
ColumnBox
Vertical flex layout (equivalent to FlexBox(direction: FlexDirection.column)
):
ColumnBox(
alignItems: BoxAlignmentGeometry.stretch,
justifyContent: BoxAlignmentBase.start,
columnGap: SpacingUnit.fixed(12.0),
children: [
Text('Top'),
Text('Middle'),
Text('Bottom'),
],
)
Layout Properties #
Direction #
FlexDirection.row
: Left to right (default)FlexDirection.rowReverse
: Right to leftFlexDirection.column
: Top to bottomFlexDirection.columnReverse
: Bottom to top
Wrapping #
FlexWrap.none
: No wrapping (default)FlexWrap.wrap
: Wrap to next lineFlexWrap.wrapReverse
: Wrap to previous line
Alignment #
Main Axis (justifyContent)
BoxAlignmentBase.start
: Items at the startBoxAlignmentBase.center
: Items centeredBoxAlignmentBase.end
: Items at the endBoxAlignmentBase.spaceBetween
: Space between itemsBoxAlignmentBase.spaceAround
: Space around itemsBoxAlignmentBase.spaceEvenly
: Equal space distribution
Cross Axis (alignItems)
BoxAlignmentGeometry.start
: Items at cross startBoxAlignmentGeometry.center
: Items centeredBoxAlignmentGeometry.end
: Items at cross endBoxAlignmentGeometry.stretch
: Items stretch to fillBoxAlignmentGeometry.baseline
: Items aligned by baseline
Content Alignment (alignContent)
BoxAlignmentContent.start
: Lines at container startBoxAlignmentContent.center
: Lines centered in containerBoxAlignmentContent.end
: Lines at container endBoxAlignmentContent.stretch
: Lines stretch to fill containerBoxAlignmentContent.spaceBetween
: Space between linesBoxAlignmentContent.spaceAround
: Space around linesBoxAlignmentContent.spaceEvenly
: Equal space distribution
Sizing Units #
SizeUnit
SizeUnit.fixed(double)
: Fixed sizeSizeUnit.minContent
: Minimum content sizeSizeUnit.maxContent
: Maximum content sizeSizeUnit.fitContent
: Fit content sizeSizeUnit.viewportSize
: Viewport size
PositionUnit
PositionUnit.fixed(double)
: Fixed positionPositionUnit.zero
: Zero position (equivalent to fixed(0.0))PositionUnit.viewportSize
: Full viewport size along the axisPositionUnit.contentSize
: Total content size along the axisPositionUnit.childSize
: Size of the positioned child elementPositionUnit.boxOffset
: Offset from the box's natural positionPositionUnit.scrollOffset
: Current scroll offsetPositionUnit.contentOverflow
: Amount content overflows the viewportPositionUnit.contentUnderflow
: Amount content underflows the viewportPositionUnit.viewportStartBound
: Start boundary of the viewportPositionUnit.viewportEndBound
: End boundary of the viewportPositionUnit.cross(PositionUnit)
: Convert passed PositionUnit to cross axisPositionUnit.constrained({required PositionUnit position, PositionUnit min, PositionUnit max})
: Position constrained within min/max bounds
SpacingUnit
SpacingUnit.fixed(double)
: Fixed spacingSpacingUnit.viewportSize
: Viewport-based spacing
Math Operations #
All unit types (SizeUnit
, SpacingUnit
, PositionUnit
) support mathematical
operations:
// Basic arithmetic
SizeUnit combinedWidth = SizeUnit.fixed(100.0) + SizeUnit.fixed(50.0);
PositionUnit offset = PositionUnit.fixed(200.0) - PositionUnit.fixed(50.0);
SpacingUnit scaled = SpacingUnit.fixed(10.0) * SpacingUnit.fixed(2.0);
// Complex expressions (equivalent to CSS calc())
SizeUnit halfViewport = SizeUnit.viewportSize * 0.5; // 50% of viewport size
SizeUnit responsiveSize = SizeUnit.fixed(100.0) + SizeUnit.viewportSize * 0.2; // 100px + 20% viewport
PositionUnit centered = PositionUnit.viewportSize * 0.5 - PositionUnit.childSize * 0.5; // Center child
// Negation
SizeUnit negative = -SizeUnit.fixed(100.0);
// Constraints
PositionUnit clamped = PositionUnit.fixed(150.0).clamp(
min: PositionUnit.fixed(0.0),
max: PositionUnit.fixed(300.0),
);
API Reference #
For detailed API documentation, visit the API Reference.
Key classes:
Testing #
The package includes comprehensive test coverage. Run tests with:
flutter test
View the interactive demo:
cd demo
flutter run
Contributing #
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
License #
This project is licensed under the BSD-3-Clause license - see the LICENSE file for details.
Made with ❤️ for the Flutter community