https://github.com/lukas-pierce/elevated_flex
Flutter Column and Row with z-index elevated children
https://github.com/lukas-pierce/elevated_flex
column flutter row z-index
Last synced: 3 months ago
JSON representation
Flutter Column and Row with z-index elevated children
- Host: GitHub
- URL: https://github.com/lukas-pierce/elevated_flex
- Owner: lukas-pierce
- License: bsd-3-clause
- Created: 2024-05-14T01:41:43.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-17T03:43:19.000Z (almost 2 years ago)
- Last Synced: 2024-08-22T23:42:39.460Z (over 1 year ago)
- Topics: column, flutter, row, z-index
- Language: Dart
- Homepage: https://pub.dev/packages/elevated_flex
- Size: 4.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## About
`elevated_flex` is flutter package that allows you to build columns and rows within which you can elevate some children above the rest. At the same time, without violating their order and content adaptability.
## ElevatedColumn
`ElevatedColumn` is built exactly like a regular `Column`, and accepts all the same parameters. All you need is to wrap one or several of the children in an `Elevated` widget:
```dart
ElevatedColumn(
mainAxisSize: MainAxisSize.min,
children: [
SimpleChild(),
Elevated(child: SimpleChild(shadow: true)),
SimpleChild(),
],
)
```
## ElevatedRow
`ElevatedRow` is built exactly like a regular `Row`, and accepts all the same parameters. All you need is to wrap one or several of the children in an `Elevated` widget:
```dart
ElevatedRow(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SimpleChild(),
Elevated(child: SimpleChild(shadow: true)),
SimpleChild(),
],
)
```
## Flex params
The `ElevatedColumn` and `ElevatedRow` widgets accept all the same parameters as their standard prototypes:
- `mainAxisAlignment`
- `mainAxisSize`
- `crossAxisAlignment`
- `verticalDirection`.
Therefore, you can safely use it for replacement where necessary.
To test the behavior, I developed a special sandbox screen where you can compare the behavior of standard components and their Elevated analogues
[column_and_row_behavior_example.dart](https://github.com/lukas-pierce/elevated_flex/blob/main/example/lib/pages/column_and_row_behavior_example.dart)
Video version
https://github.com/lukas-pierce/elevated_flex/assets/4938316/3b5b91f4-2f94-46a9-bda8-1afba238d8db
## TODO
The package does not currently support `CrossAxisAlignment.baseline`