Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ejprok/colorful_safe_area
A replacement for Flutter's default SafeArea widget
https://github.com/ejprok/colorful_safe_area
dart flutter flutter-package flutter-packages safearea widget
Last synced: 5 days ago
JSON representation
A replacement for Flutter's default SafeArea widget
- Host: GitHub
- URL: https://github.com/ejprok/colorful_safe_area
- Owner: ejprok
- License: mit
- Created: 2020-04-02T23:35:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-17T06:22:37.000Z (over 1 year ago)
- Last Synced: 2024-08-01T12:19:50.192Z (3 months ago)
- Topics: dart, flutter, flutter-package, flutter-packages, safearea, widget
- Language: Dart
- Homepage:
- Size: 764 KB
- Stars: 31
- Watchers: 3
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ColorfulSafeArea
[](https://pub.dev/packages/colorful_safe_area)
A more customizable replacement for the ```SafeArea``` widget. It lets you set the color of your ```SafeArea``` without affecting the color of its child.
Use it just like a regular ```SafeArea``` widget.
```dart
Scaffold(
body: ColorfulSafeArea(
child: SomeWidget(),
),
);
```
## Setting Color
The color of ```ColorfulSafeArea``` widgets are transparent by default. To change their color, set the ```color``` property.
```dart
Scaffold(
body: ColorfulSafeArea(
color: Colors.red,
child: SomeWidget(),
),
);
```
## Using Transparent Colors
You can use any color that has transparency
```dart
Scaffold(
body: ColorfulSafeArea(
color: Colors.red.withOpacity(0.7),
child: SomeWidget(),
),
);
```
## Overflow Rules
If you are using a transparent color and want the child of the ```ColorfulSafeArea``` to appear behind it, you can set ```overflowRules``` to define how the ```ColorfulSafeArea```'s child should appear. The default value is ```OverflowRules.all(false)```. The ```OverflowRules``` class works much like ```EdgeInsets```.
```dart
// allows the child to overflow behind all sides
overflowRules: OverflowRules.all(true)
// allows the child to overflow only on the left and bottom sides
overflowRules: OverflowRules.only(left: true, bottom: true)
// allows the child to overflow on the top and bottom
overflowRules: OverflowRules.symmetric(vertical: true)
```
## Blurring Overflow Area
If you want to apply a blur effect to the ```ColorfulSafeArea```, you can apply a filter.
```dart
Scaffold(
body: ColorfulSafeArea(
overflowRules: OverflowRules.all(true),
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: SomeWidget(),
),
);
```
## Making Overflow Area Interactive
When you set ```overflowRules``` and would like for the parts of the child that have overflowed to be interactable behind the ```ColorfulSafeArea```, you can set ```overflowTappable``` to ```true```.
```dart
Scaffold(
body: ColorfulSafeArea(
overflowRules: OverflowRules.all(true),
overflowTappable: true
child: SomeWidget(),
),
);
```