{"id":13549978,"url":"https://github.com/iofod/flutter_css_filter","last_synced_at":"2025-07-15T01:31:09.008Z","repository":{"id":37930450,"uuid":"501077815","full_name":"iofod/flutter_css_filter","owner":"iofod","description":"Use CSS filter effects on Flutter","archived":false,"fork":false,"pushed_at":"2023-02-26T09:41:30.000Z","size":1527,"stargazers_count":53,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-08T19:11:29.105Z","etag":null,"topics":["css","css-filter","dart","filter","flutter-filter","flutter-package","fluttter","library","web","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/css_filter","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iofod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-06-08T02:51:47.000Z","updated_at":"2024-12-19T20:41:57.000Z","dependencies_parsed_at":"2024-01-16T18:55:52.245Z","dependency_job_id":"0b4cb39d-df62-4ecf-b8ea-220582b3cf05","html_url":"https://github.com/iofod/flutter_css_filter","commit_stats":{"total_commits":10,"total_committers":2,"mean_commits":5.0,"dds":0.09999999999999998,"last_synced_commit":"03631bd64c5b6ded3233adabb18415979b77b78c"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/iofod/flutter_css_filter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iofod%2Fflutter_css_filter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iofod%2Fflutter_css_filter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iofod%2Fflutter_css_filter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iofod%2Fflutter_css_filter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iofod","download_url":"https://codeload.github.com/iofod/flutter_css_filter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iofod%2Fflutter_css_filter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265385756,"owners_count":23756728,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-filter","dart","filter","flutter-filter","flutter-package","fluttter","library","web","widget"],"created_at":"2024-08-01T12:01:27.660Z","updated_at":"2025-07-15T01:31:08.585Z","avatar_url":"https://github.com/iofod.png","language":"Dart","readme":"# CSS Filter for Flutter\n\nEnglish | [简体中文](./translations/zh-cn/README.md)\n\nUse CSS filter effects on Flutter.\n\n[![Version](https://img.shields.io/github/v/release/iofod/flutter_css_filter?label=version)](https://pub.dev/packages/css_filter)\n[![Build Status](https://github.com/iofod/flutter_css_filter/workflows/build/badge.svg)](https://github.com/iofod/flutter_css_filter/actions)\n\n[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).\n\n## Features\n\n- Simple and efficient\n- Support multiple filter effects overlay\n- Rich preset effects.\n- Full platform support\n- Customize your own effect\n- Null-safety\n\n## Getting started\n\nAfter importing the dependent, you can use the basic filters through `CSSFilter`.\n\n```dart\nimport 'package:css_filter/css_filter.dart';\n\nCSSFilter.contrast(child: const Text('foo'), value: 1.2);\n```\n\nSupport filters:\n\n- contrast()\n- grayscale()\n- sepia()\n- hueRotate()\n- brightness()\n- saturate()\n- invert()\n- blur()\n- opacity()\n\nYou 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:\n\n```dart\nCSSFilter.apply(\n  child: const Text('bar'),\n  value: CSSFilterMatrix().contrast(1.2).sepia(0.8).hueRotate(90.0).invert(0.9).opacity(0.9)\n);\n```\n\n**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.\n\n## Use presets\n\nThe [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`.\n\n```dart\nimport 'package:css_filter/css_filter.dart';\n\nCSSFilterPresets.insXpro2(child: const Text('Your widget'));\n```\n\nSupport effects:\n\n| Effect name | Preview effect | Sample code |\n| :----: | :----: | :----: |\n| origin | ![origin](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/origin.jpg) | `CSSFilterPresets.origin(child: Image(...))` |\n| ins1977 | ![ins1977](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/ins1977.jpg) | `CSSFilterPresets.ins1977(child: Image(...))` |\n| ins1977V2 | ![ins1977V2](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/ins1977V2.jpg) | `CSSFilterPresets.ins1977V2(child: Image(...))` |\n| insAden | ![insAden](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insAden.jpg) | `CSSFilterPresets.insAden(child: Image(...))` |\n| insAmaro | ![insAmaro](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insAmaro.jpg) | `CSSFilterPresets.insAmaro(child: Image(...))` |\n| insAshby | ![insAshby](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insAshby.jpg) | `CSSFilterPresets.insAshby(child: Image(...))` |\n| insBrannan | ![insBrannan](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insBrannan.jpg) | `CSSFilterPresets.insBrannan(child: Image(...))` |\n| insBrooklyn | ![insBrooklyn](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insBrooklyn.jpg) | `CSSFilterPresets.insBrooklyn(child: Image(...))` |\n| insClarendon | ![insClarendon](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insClarendon.jpg) | `CSSFilterPresets.insClarendon(child: Image(...))` |\n| insDogpatch | ![insDogpatch](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insDogpatch.jpg) | `CSSFilterPresets.insDogpatch(child: Image(...))` |\n| insEarlybird | ![insEarlybird](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insEarlybird.jpg) | `CSSFilterPresets.insEarlybird(child: Image(...))` |\n| insGingham | ![insGingham](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insGingham.jpg) | `CSSFilterPresets.insGingham(child: Image(...))` |\n| insHelena | ![insHelena](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insHelena.jpg) | `CSSFilterPresets.insHelena(child: Image(...))` |\n| insHudson | ![insHudson](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insHudson.jpg) | `CSSFilterPresets.insHudson(child: Image(...))` |\n| insInkwell | ![insInkwell](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insInkwell.jpg) | `CSSFilterPresets.insInkwell(child: Image(...))` |\n| insInkwellV2 | ![insInkwellV2](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insInkwellV2.jpg) | `CSSFilterPresets.insInkwellV2(child: Image(...))` |\n| insJuno | ![insJuno](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insJuno.jpg) | `CSSFilterPresets.insJuno(child: Image(...))` |\n| insKelvin | ![insKelvin](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insKelvin.jpg) | `CSSFilterPresets.insKelvin(child: Image(...))` |\n| insLark | ![insLark](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insLark.jpg) | `CSSFilterPresets.insLark(child: Image(...))` |\n| insLofi | ![insLofi](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insLofi.jpg) | `CSSFilterPresets.insLofi(child: Image(...))` |\n| insLudwig | ![insLudwig](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insLudwig.jpg) | `CSSFilterPresets.insLudwig(child: Image(...))` |\n| insMaven | ![insMaven](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insMaven.jpg) | `CSSFilterPresets.insMaven(child: Image(...))` |\n| insMayfair | ![insMayfair](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insMayfair.jpg) | `CSSFilterPresets.insMayfair(child: Image(...))` |\n| insMoon | ![insMoon](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insMoon.jpg) | `CSSFilterPresets.insMoon(child: Image(...))` |\n| insMoonV2 | ![insMoonV2](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insMoonV2.jpg) | `CSSFilterPresets.insMoonV2(child: Image(...))` |\n| insNashville | ![insNashville](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insNashville.jpg) | `CSSFilterPresets.insNashville(child: Image(...))` |\n| insNashvilleV2 | ![insNashvilleV2](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insNashvilleV2.jpg) | `CSSFilterPresets.insNashvilleV2(child: Image(...))` |\n| insPerpetua | ![insPerpetua](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insPerpetua.jpg) | `CSSFilterPresets.insPerpetua(child: Image(...))` |\n| insPoprocket | ![insPoprocket](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insPoprocket.jpg) | `CSSFilterPresets.insPoprocket(child: Image(...))` |\n| insReyes | ![insReyes](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insReyes.jpg) | `CSSFilterPresets.insReyes(child: Image(...))` |\n| insRise | ![insRise](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insRise.jpg) | `CSSFilterPresets.insRise(child: Image(...))` |\n| insSierra | ![insSierra](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insSierra.jpg) | `CSSFilterPresets.insSierra(child: Image(...))` |\n| insSkyline | ![insSkyline](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insSkyline.jpg) | `CSSFilterPresets.insSkyline(child: Image(...))` |\n| insSlumber | ![insSlumber](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insSlumber.jpg) | `CSSFilterPresets.insSlumber(child: Image(...))` |\n| insStinson | ![insStinson](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insStinson.jpg) | `CSSFilterPresets.insStinson(child: Image(...))` |\n| insSutro | ![insSutro](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insSutro.jpg) | `CSSFilterPresets.insSutro(child: Image(...))` |\n| insToaster | ![insToaster](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insToaster.jpg) | `CSSFilterPresets.insToaster(child: Image(...))` |\n| insToasterV2 | ![insToasterV2](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insToasterV2.jpg) | `CSSFilterPresets.insToasterV2(child: Image(...))` |\n| insValencia | ![insValencia](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insValencia.jpg) | `CSSFilterPresets.insValencia(child: Image(...))` |\n| insVesper | ![insVesper](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insVesper.jpg) | `CSSFilterPresets.insVesper(child: Image(...))` |\n| insWalden | ![insWalden](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insWalden.jpg) | `CSSFilterPresets.insWalden(child: Image(...))` |\n| insWaldenV2 | ![insWaldenV2](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insWaldenV2.jpg) | `CSSFilterPresets.insWaldenV2(child: Image(...))` |\n| insWillow | ![insWillow](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insWillow.jpg) | `CSSFilterPresets.insWillow(child: Image(...))` |\n| insXpro2 | ![insXpro2](https://raw.githubusercontent.com/iofod/flutter_css_filter/main/assets/insXpro2.jpg) | `CSSFilterPresets.insXpro2(child: Image(...))` |\n\nSimilar 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:\n\n```dart\n/// You can replace the value parameter with any of the supported effects.\nCSSFilterPresets.apply(\n  child: YourWidget,\n  value: CSSFilterPresets.insNashville, \n  strength: 0.7\n);\n```\n\n## Customize your own filter preset\n\n`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.\n\n```dart\n\ncustomPreset({ required Widget child }) {\n  return CSSFilter.apply(\n    child: child, \n    value: CSSFilterMatrix().sepia(0.2).saturate(1.4)\n  );\n}\n\n/// Used by CSSFilterPresets to set the intensity of the effect.\nCSSFilterPresets.apply(\n  child: YourWidget,\n  value: customPreset,\n  strength: 0.9\n);\n\n/// It also supports direct use.\ncustomPreset(child: YourWidget);\n```\n\n## More examples\n\nFor more usage examples, please check out the [example project](https://github.com/iofod/flutter_css_filter/tree/main/example).\n","funding_links":[],"categories":["Dart"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiofod%2Fflutter_css_filter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiofod%2Fflutter_css_filter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiofod%2Fflutter_css_filter/lists"}