jagritjkh / blur Goto Github PK

View Code? Open in Web Editor NEW

28.0 28.0 10.0 367 KB

Flutter package for blurring the child widget provided to it.

Home Page: https://pub.dev/packages/blur

License: MIT License

Dart 94.39% Kotlin 1.28% Swift 3.95% Objective-C 0.37%

blur frost imageblur wrapper

blur's People

Contributors

Stargazers

Watchers

Forkers

winterdl kedulu geeksempireofficial asjadsiddiqui aminrz3 paramaw stmerlhin omar-alshyokh dukepeoplus dessonchan

blur's Issues

Animated bluring

Is there a way to do the blurring/frosting with animation?
With duration and curve, etc

There will be a line between two identical Blur components.

describe：

Place two blur components next to each other,Will appear.

image：

code：

Scaffold(
      appBar: AppBar(
          title: const Text('BlurBox', style: TextStyle(color: Colors.black))),
      backgroundColor: Colors.white,
      body: Column(
        children: [
          Blur(
            blur: 2.5,
            blurColor: Theme.of(context).primaryColor,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: double.infinity,
                height: 100,
                alignment: Alignment.center,
                child: const Text(
                  'Blur1',
                  style: TextStyle(color: Colors.black, fontSize: 16),
                ),
              ),
            ),
          ),
          Blur(
            blur: 2.5,
            blurColor: Theme.of(context).primaryColor,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: double.infinity,
                height: 100,
                alignment: Alignment.center,
                child: const Text(
                  'Blur2',
                  style: TextStyle(color: Colors.black, fontSize: 16),
                ),
              ),
            ),
          )
        ],
      ),
    );
    ```

Blur only the widget child and not the background

Hi ! :)
First of all, thank you for your awesome plugin !
I have a question
I have a specific widget, a bar chart with a transparent background, and i want to make it blurry.
Things that i succeed with your plugin, but saddly, it also blurred everything behind it, such as my view background image.
Can you tell me please how to blur only the widget and not things behind it ?
Thank you !

Blur effect does not work over WebView widget

The .frosted function from the blur module doesn't seem to work on the webview widget.

But it seems to work perfectly with other things behind it in the same stack

Here is my code

return Scaffold(
      body: Stack(
        children: [
          Container(
            // padding: EdgeInsets.only(top: 100),
            child: WebView(
              initialUrl: url,
              javascriptMode: JavascriptMode.unrestricted,
            ),
          ),
          Container(
            height: 110,
            width: double.infinity,
            child: Text('demo'),
            // color: Colors.black.withOpacity(0.7),
          ).frosted(blur: 20, frostColor: Colors.black, frostOpacity: 0.2)
        ]
      ),
    );

performance issue

BackdropFilter performance issue
ImageFiltered better than BackdropFilter in performance comparison, But can't blur the background.

performance issue when using Blur as an image item in ListView.builder

Hi, I am using Blur widget as an item of my ListView.builder . it makes my app laggy even in release mode. here is the code below I use for Blur. is there a workaround for this?

Blur(
            blur: 2,
            child: CachedNetworkImage(
              imageUrl: thumbnailURL,
              fit: BoxFit.fill,
              height: double.infinity,
              width: double.infinity,
              fadeInCurve: Curves.easeIn,
              fadeInDuration: const Duration(milliseconds: 100),
            ),
          ),

jagritjkh / blur Goto Github PK

blur's People

Contributors

Stargazers

Watchers

Forkers

blur's Issues

Animated bluring

There will be a line between two identical Blur components.

Blur only the widget child and not the background

Blur effect does not work over WebView widget

The .frosted function from the blur module doesn't seem to work on the webview widget.

But it seems to work perfectly with other things behind it in the same stack

Here is my code

performance issue

performance issue when using Blur as an image item in ListView.builder

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent