https://github.com/chitochi/flutter_inset_shadow
This package extends BoxShadow and BoxDecoration to support the inset property. [maintainer=@chitochi]
https://github.com/chitochi/flutter_inset_shadow
box-shadow flutter inset-shadow
Last synced: 25 days ago
JSON representation
This package extends BoxShadow and BoxDecoration to support the inset property. [maintainer=@chitochi]
- Host: GitHub
- URL: https://github.com/chitochi/flutter_inset_shadow
- Owner: chitochi
- License: bsd-3-clause
- Created: 2022-03-15T16:35:51.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-30T09:22:27.000Z (12 months ago)
- Last Synced: 2024-11-03T16:38:02.055Z (6 months ago)
- Topics: box-shadow, flutter, inset-shadow
- Language: C++
- Homepage: https://pub.dev/packages/flutter_inset_shadow
- Size: 313 KB
- Stars: 19
- Watchers: 1
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Flutter Inset Shadow
Flutter currently does not support the `inset` property for shadows. This type of shadow is for example used in Neumorphism.
This package extends `BoxShadow` and `BoxDecoration` to support the `inset` property.
> [!IMPORTANT]
>
> **What happened to `flutter_inset_box_shadow`?**
>
> Previously, this package was called `flutter_inset_box_shadow`.
>
> Unfortunately, I've lost access to the verified publisher, allowing me to publish updates to the package.
>
> So I decided to publish the package under a new name.
>
> For more information, you can read https://github.com/chitochi/flutter_inset_shadow/issues/7. 😄
## Features
- All properties of `BoxShadow` are supported.
- If the property of a `BoxShadow` changes during a transition, we first make the old shadow disappear before making the new one appear.
## Example
```dart
import 'package:flutter/material.dart' hide BoxDecoration, BoxShadow;
import 'package:flutter_inset_shadow/flutter_inset_shadow.dart';
void main() {
runApp(const ExampleApp());
}
const primaryColor = Color(0xFFE0E0E0);
class ExampleApp extends StatelessWidget {
const ExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example',
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: primaryColor,
body: Center(
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: primaryColor,
boxShadow: const [
BoxShadow(
offset: Offset(-20, -20),
blurRadius: 60,
color: Colors.white,
inset: true,
),
BoxShadow(
offset: Offset(20, 20),
blurRadius: 60,
color: Color(0xFFBEBEBE),
inset: true,
),
],
),
),
),
),
);
}
}
```
## Usage
First, add the package:
```
flutter pub add flutter_inset_shadow
```
Then, import it as follows:
```dart
import 'package:flutter/material.dart' hide BoxDecoration, BoxShadow;
import 'package:flutter_inset_shadow/flutter_inset_shadow.dart';
```
It is necessary to hide `BoxDecoration` and `BoxShadow` because this library replaces them.
`BoxShadow` now has a boolean `inset` property, which is set to `false` by default.
```dart
return Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 5,
color: Colors.red,
),
BoxShadow(
offset: Offset(1, 2),
blurRadius: 5,
spreadRadius: 2,
color: Colors.green,
inset: true,
),
],
),
);
```
## How does it work?
The algorithm used is the same as that of Blink, the Chromium rendering engine.
The idea is that we draw a rectangle hollowed out by another rounded rectangle inside, then we blur this hollowed rectangle.