Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carllosnc/boxy
A simple way to create boxes on flutter
https://github.com/carllosnc/boxy
Last synced: 11 days ago
JSON representation
A simple way to create boxes on flutter
- Host: GitHub
- URL: https://github.com/carllosnc/boxy
- Owner: carllosnc
- License: mit
- Created: 2023-11-06T19:00:06.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-11T18:43:21.000Z (9 months ago)
- Last Synced: 2024-06-11T04:43:41.057Z (5 months ago)
- Language: C++
- Homepage:
- Size: 4.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Boxy
[](https://github.com/C4co/boxy/actions/workflows/dart.yml)
> A simple and customizable box widget for Flutter
**Install:**
```yml
dependencies:
boxy:
git:
url: https://github.com/C4co/boxy.git
```
## Features
- Solid color
- Gradiend color
- Shadow
- Blur effect with gradient and images
- Image background
- Custom border radius
- Width, height, padding, margin
## Usage
```dart
Boxy(
backgroundImage: const NetworkImage('/path/to/image.png'),
height: 120,
width: double.infinity,
onTap: () {},
blurEffect: 5,
gradient: const LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Colors.transparent,
Colors.black,
],
),
padding: const EdgeInsets.all(20),
borderRadius: BorderRadius.circular(10),
splashColor: Colors.white.withOpacity(0.2),
border: Border.all(
color: Colors.white.withOpacity(1),
width: 1,
),
child: const Text(
'Background image with gradient and blur ',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
)
```
## Properties
| Property | Type | Description |
| ----------------- | --------------- | ---------------------------------------- |
| `backgroundImage` | `ImageProvider` | The image to be used as background |
| `height` | `double` | The height of the box |
| `width` | `double` | The width of the box |
| `onTap` | `Function` | The function to be called on tap |
| `onDoubleTap` | `Function` | The function to be called on double tap |
| `onLongPress` | `Function` | The function to be called on long press |
| `blurEffect` | `double` | The blur effect of the box |
| `gradient` | `Gradient` | The gradient of the box |
| `padding` | `EdgeInsets` | The padding of the box |
| `borderRadius` | `BorderRadius` | The border radius of the box |
| `splashColor` | `Color` | The splash color trigged after tap event |
| `border` | `Border` | The border of the box |
| `child` | `Widget` | The child of the box |
Some observations:
- gradient has priority over color
- gradient has priority over imageBackground but both can coexist together if gradient use transparent color
---
**Example:**
---
Carlos Costs @ 2023