Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iofod/flutter_css_filter
Use CSS filter effects on Flutter
https://github.com/iofod/flutter_css_filter
css css-filter dart filter flutter-filter flutter-package fluttter library web widget
Last synced: 4 days ago
JSON representation
Use CSS filter effects on Flutter
- Host: GitHub
- URL: https://github.com/iofod/flutter_css_filter
- Owner: iofod
- License: bsd-3-clause
- Created: 2022-06-08T02:51:47.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-26T09:41:30.000Z (over 1 year ago)
- Last Synced: 2024-03-17T00:42:16.147Z (4 months ago)
- Topics: css, css-filter, dart, filter, flutter-filter, flutter-package, fluttter, library, web, widget
- Language: Dart
- Homepage: https://pub.dev/packages/css_filter
- Size: 1.46 MB
- Stars: 51
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-stars - flutter_css_filter
README
# CSS Filter for Flutter
English | [简体中文](./translations/zh-cn/README.md)
Use CSS filter effects on Flutter.
[](https://pub.dev/packages/css_filter)
[](https://github.com/iofod/flutter_css_filter/actions)
[IFstruct parser](https://github.com/iofod/IFstruct-parser) supports generating flutter code from [iofod](https://www.iofod.com/) visually edited projects. We have separated its filter module code and added many preset effects to form the current CSS Filter for Flutter, which facilitates all flutter projects to use the excellent design of the Web: [CSS filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).
## Features
- Simple and efficient
- Support multiple filter effects overlay
- Rich preset effects.
- Full platform support
- Customize your own effect
- Null-safety
## Getting started
After importing the dependent, you can use the basic filters through `CSSFilter`.
```dart
import 'package:css_filter/css_filter.dart';
CSSFilter.contrast(child: const Text('foo'), value: 1.2);
```
Support filters:
- contrast()
- grayscale()
- sepia()
- hueRotate()
- brightness()
- saturate()
- invert()
- blur()
- opacity()
You can combine and overlay these filters in flutter just as you would with a CSS filter. Use `CSSFilter.apply` in conjunction with `CSSFilterMatrix()`. Such as:
```dart
CSSFilter.apply(
child: const Text('bar'),
value: CSSFilterMatrix().contrast(1.2).sepia(0.8).hueRotate(90.0).invert(0.9).opacity(0.9)
);
```
**Note:** the order of the chain calls represents the order in which the filters are applied, and the order in which the filter effects are applied affects the final result.
## Use presets
The [CSSgram](https://github.com/una/CSSgram) project does an excellent job of providing the CSS world with Instagram-like filters, and [instagram.css](https://github.com/picturepan2/instagram.css) complements it with more types of filters. We've combined these two libraries to encapsulate several presets that can call through `CSSFilterPresets`.
```dart
import 'package:css_filter/css_filter.dart';
CSSFilterPresets.insXpro2(child: const Text('Your widget'));
```
Support effects:
| Effect name | Preview effect | Sample code |
| :----: | :----: | :----: |
| origin |  | `CSSFilterPresets.origin(child: Image(...))` |
| ins1977 |  | `CSSFilterPresets.ins1977(child: Image(...))` |
| ins1977V2 |  | `CSSFilterPresets.ins1977V2(child: Image(...))` |
| insAden |  | `CSSFilterPresets.insAden(child: Image(...))` |
| insAmaro |  | `CSSFilterPresets.insAmaro(child: Image(...))` |
| insAshby |  | `CSSFilterPresets.insAshby(child: Image(...))` |
| insBrannan |  | `CSSFilterPresets.insBrannan(child: Image(...))` |
| insBrooklyn |  | `CSSFilterPresets.insBrooklyn(child: Image(...))` |
| insClarendon |  | `CSSFilterPresets.insClarendon(child: Image(...))` |
| insDogpatch |  | `CSSFilterPresets.insDogpatch(child: Image(...))` |
| insEarlybird |  | `CSSFilterPresets.insEarlybird(child: Image(...))` |
| insGingham |  | `CSSFilterPresets.insGingham(child: Image(...))` |
| insHelena |  | `CSSFilterPresets.insHelena(child: Image(...))` |
| insHudson |  | `CSSFilterPresets.insHudson(child: Image(...))` |
| insInkwell |  | `CSSFilterPresets.insInkwell(child: Image(...))` |
| insInkwellV2 |  | `CSSFilterPresets.insInkwellV2(child: Image(...))` |
| insJuno |  | `CSSFilterPresets.insJuno(child: Image(...))` |
| insKelvin |  | `CSSFilterPresets.insKelvin(child: Image(...))` |
| insLark |  | `CSSFilterPresets.insLark(child: Image(...))` |
| insLofi |  | `CSSFilterPresets.insLofi(child: Image(...))` |
| insLudwig |  | `CSSFilterPresets.insLudwig(child: Image(...))` |
| insMaven |  | `CSSFilterPresets.insMaven(child: Image(...))` |
| insMayfair |  | `CSSFilterPresets.insMayfair(child: Image(...))` |
| insMoon |  | `CSSFilterPresets.insMoon(child: Image(...))` |
| insMoonV2 |  | `CSSFilterPresets.insMoonV2(child: Image(...))` |
| insNashville |  | `CSSFilterPresets.insNashville(child: Image(...))` |
| insNashvilleV2 |  | `CSSFilterPresets.insNashvilleV2(child: Image(...))` |
| insPerpetua |  | `CSSFilterPresets.insPerpetua(child: Image(...))` |
| insPoprocket |  | `CSSFilterPresets.insPoprocket(child: Image(...))` |
| insReyes |  | `CSSFilterPresets.insReyes(child: Image(...))` |
| insRise |  | `CSSFilterPresets.insRise(child: Image(...))` |
| insSierra |  | `CSSFilterPresets.insSierra(child: Image(...))` |
| insSkyline |  | `CSSFilterPresets.insSkyline(child: Image(...))` |
| insSlumber |  | `CSSFilterPresets.insSlumber(child: Image(...))` |
| insStinson |  | `CSSFilterPresets.insStinson(child: Image(...))` |
| insSutro |  | `CSSFilterPresets.insSutro(child: Image(...))` |
| insToaster |  | `CSSFilterPresets.insToaster(child: Image(...))` |
| insToasterV2 |  | `CSSFilterPresets.insToasterV2(child: Image(...))` |
| insValencia |  | `CSSFilterPresets.insValencia(child: Image(...))` |
| insVesper |  | `CSSFilterPresets.insVesper(child: Image(...))` |
| insWalden |  | `CSSFilterPresets.insWalden(child: Image(...))` |
| insWaldenV2 |  | `CSSFilterPresets.insWaldenV2(child: Image(...))` |
| insWillow |  | `CSSFilterPresets.insWillow(child: Image(...))` |
| insXpro2 |  | `CSSFilterPresets.insXpro2(child: Image(...))` |
Similar to `CSSFilter`, we provide the `apply` method for `CSSFilterPresets` to invoke presets consistently, and apply additionally supports setting the intensity of the filter effect used. To do so:
```dart
/// You can replace the value parameter with any of the supported effects.
CSSFilterPresets.apply(
child: YourWidget,
value: CSSFilterPresets.insNashville,
strength: 0.7
);
```
## Customize your own filter preset
`CSSFilter` provides the most basic filters, `CSSFilterPresets` collects the commonly used combinations of basic filters as presets, meaning you can also customize your own filter presets based on the basic filters.
```dart
customPreset({ required Widget child }) {
return CSSFilter.apply(
child: child,
value: CSSFilterMatrix().sepia(0.2).saturate(1.4)
);
}
/// Used by CSSFilterPresets to set the intensity of the effect.
CSSFilterPresets.apply(
child: YourWidget,
value: customPreset,
strength: 0.9
);
/// It also supports direct use.
customPreset(child: YourWidget);
```
## More examples
For more usage examples, please check out the [example project](https://github.com/iofod/flutter_css_filter/tree/main/example).