Performant blur/opacity in Flutter?












0















I love the blurry frost effect using a BackdropFilter (see this).



However, because the BackdropFilter has Opacity and because the widget I'm blurring also has Opacity, the performance is horrendous. This is also because I redraw my widgets a few times a second, but that shouldn't be an issue given Flutter can go 60fps?



I turned on checkerboardOffscreenLayers and see checkerboards for miles. :O
The checkerboards happen due to blurScreen, not due to widgetToBlur but widgetToBlur does slow down performance probably because (in my real code, not this example) it's calling setState() multiple times a second.



Is there a more performant way to make blurs/opacities? The link above says to apply opacity to widgets individually. I can't do that with the blur though (blurScreen below), because the BackdropFilter has to be stacked on top of my widget-that-does-the-redrawing.
I removed the blur effect and my performance is way better (no checkerboards, app doesn't crash).



build() code in question:



final widgetToBlur = Container(
child: Opacity(
opacity: 0.3,
// In my actual code, this is a Stateful widget.
child: Text('Spooky blurry semi-transparent text!'),
),
);

final blurScreen = BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: Container(
decoration: BoxDecoration(
color: _backgroundColor.withOpacity(0.3),
),
),
);

return Container(
child: Stack(
children: <Widget>[
widgetToBlur,
blurScreen,
Text('This is in front of the blurred background'),
],
),
);









share|improve this question





























    0















    I love the blurry frost effect using a BackdropFilter (see this).



    However, because the BackdropFilter has Opacity and because the widget I'm blurring also has Opacity, the performance is horrendous. This is also because I redraw my widgets a few times a second, but that shouldn't be an issue given Flutter can go 60fps?



    I turned on checkerboardOffscreenLayers and see checkerboards for miles. :O
    The checkerboards happen due to blurScreen, not due to widgetToBlur but widgetToBlur does slow down performance probably because (in my real code, not this example) it's calling setState() multiple times a second.



    Is there a more performant way to make blurs/opacities? The link above says to apply opacity to widgets individually. I can't do that with the blur though (blurScreen below), because the BackdropFilter has to be stacked on top of my widget-that-does-the-redrawing.
    I removed the blur effect and my performance is way better (no checkerboards, app doesn't crash).



    build() code in question:



    final widgetToBlur = Container(
    child: Opacity(
    opacity: 0.3,
    // In my actual code, this is a Stateful widget.
    child: Text('Spooky blurry semi-transparent text!'),
    ),
    );

    final blurScreen = BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
    child: Container(
    decoration: BoxDecoration(
    color: _backgroundColor.withOpacity(0.3),
    ),
    ),
    );

    return Container(
    child: Stack(
    children: <Widget>[
    widgetToBlur,
    blurScreen,
    Text('This is in front of the blurred background'),
    ],
    ),
    );









    share|improve this question



























      0












      0








      0








      I love the blurry frost effect using a BackdropFilter (see this).



      However, because the BackdropFilter has Opacity and because the widget I'm blurring also has Opacity, the performance is horrendous. This is also because I redraw my widgets a few times a second, but that shouldn't be an issue given Flutter can go 60fps?



      I turned on checkerboardOffscreenLayers and see checkerboards for miles. :O
      The checkerboards happen due to blurScreen, not due to widgetToBlur but widgetToBlur does slow down performance probably because (in my real code, not this example) it's calling setState() multiple times a second.



      Is there a more performant way to make blurs/opacities? The link above says to apply opacity to widgets individually. I can't do that with the blur though (blurScreen below), because the BackdropFilter has to be stacked on top of my widget-that-does-the-redrawing.
      I removed the blur effect and my performance is way better (no checkerboards, app doesn't crash).



      build() code in question:



      final widgetToBlur = Container(
      child: Opacity(
      opacity: 0.3,
      // In my actual code, this is a Stateful widget.
      child: Text('Spooky blurry semi-transparent text!'),
      ),
      );

      final blurScreen = BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
      child: Container(
      decoration: BoxDecoration(
      color: _backgroundColor.withOpacity(0.3),
      ),
      ),
      );

      return Container(
      child: Stack(
      children: <Widget>[
      widgetToBlur,
      blurScreen,
      Text('This is in front of the blurred background'),
      ],
      ),
      );









      share|improve this question
















      I love the blurry frost effect using a BackdropFilter (see this).



      However, because the BackdropFilter has Opacity and because the widget I'm blurring also has Opacity, the performance is horrendous. This is also because I redraw my widgets a few times a second, but that shouldn't be an issue given Flutter can go 60fps?



      I turned on checkerboardOffscreenLayers and see checkerboards for miles. :O
      The checkerboards happen due to blurScreen, not due to widgetToBlur but widgetToBlur does slow down performance probably because (in my real code, not this example) it's calling setState() multiple times a second.



      Is there a more performant way to make blurs/opacities? The link above says to apply opacity to widgets individually. I can't do that with the blur though (blurScreen below), because the BackdropFilter has to be stacked on top of my widget-that-does-the-redrawing.
      I removed the blur effect and my performance is way better (no checkerboards, app doesn't crash).



      build() code in question:



      final widgetToBlur = Container(
      child: Opacity(
      opacity: 0.3,
      // In my actual code, this is a Stateful widget.
      child: Text('Spooky blurry semi-transparent text!'),
      ),
      );

      final blurScreen = BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
      child: Container(
      decoration: BoxDecoration(
      color: _backgroundColor.withOpacity(0.3),
      ),
      ),
      );

      return Container(
      child: Stack(
      children: <Widget>[
      widgetToBlur,
      blurScreen,
      Text('This is in front of the blurred background'),
      ],
      ),
      );






      performance flutter opacity blur






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 20 '18 at 23:16







      Mary

















      asked Nov 20 '18 at 22:52









      MaryMary

      1,11611434




      1,11611434
























          2 Answers
          2






          active

          oldest

          votes


















          0














          I ended up drawing the widgetToBlur once, blurred, with opacity, using Paint and Canvas.



          This means it only runs the blur and opacity operations once, in initState(), and never has to be re-rendered-with-blur throughout the lifecycle of the widget.



          If anyone else ends up stuck with this, you can leave a comment and I can help out more.






          share|improve this answer































            0














            I have a similar problem and it also boils down to using canvas and paint.
            The only problem now is, if I apply a MaskFilter to the image, not much happens despite the enormously high sigma... Only the edge is a little blurred.



            Now the question is why is that so? How did you solved this issue?



            canvas.drawImageRect(
            image,
            Offset(0, 0) & srcSize,
            Offset(-delta, 0) & dstSize,
            Paint()..maskFilter = MaskFilter.blur(
            BlurStyle.normal, 100.0
            )
            );


            For those of you who are interested, I have loaded the image in the init function as follows:



            rootBundle.load("assets/gift_1.png").then((bd) {
            Uint8List lst = new Uint8List.view(bd.buffer);
            Ui.instantiateImageCodec(lst).then((codec) {
            codec.getNextFrame().then((frameInfo) {
            image = frameInfo.image;
            });
            });
            });


            P.s. Unfortunately, I can't write any comments yet; therefore here as a contribution, including solution proposal






            share|improve this answer


























            • My sigma was only 3. When I was playing around with MaskFilter it seemed like I needed to give it more space than the object I'm blurring, and the object needs to be centered. E.g. if your image is 100 x 100, try making your canvas size 200 x 200 and starting your image at (50, 50). This will give the outline of the blur some space. Maybe also try without any offsets, or try just drawing and blurring a solid colored rectangle first.

              – Mary
              Dec 3 '18 at 22:34











            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402799%2fperformant-blur-opacity-in-flutter%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            I ended up drawing the widgetToBlur once, blurred, with opacity, using Paint and Canvas.



            This means it only runs the blur and opacity operations once, in initState(), and never has to be re-rendered-with-blur throughout the lifecycle of the widget.



            If anyone else ends up stuck with this, you can leave a comment and I can help out more.






            share|improve this answer




























              0














              I ended up drawing the widgetToBlur once, blurred, with opacity, using Paint and Canvas.



              This means it only runs the blur and opacity operations once, in initState(), and never has to be re-rendered-with-blur throughout the lifecycle of the widget.



              If anyone else ends up stuck with this, you can leave a comment and I can help out more.






              share|improve this answer


























                0












                0








                0







                I ended up drawing the widgetToBlur once, blurred, with opacity, using Paint and Canvas.



                This means it only runs the blur and opacity operations once, in initState(), and never has to be re-rendered-with-blur throughout the lifecycle of the widget.



                If anyone else ends up stuck with this, you can leave a comment and I can help out more.






                share|improve this answer













                I ended up drawing the widgetToBlur once, blurred, with opacity, using Paint and Canvas.



                This means it only runs the blur and opacity operations once, in initState(), and never has to be re-rendered-with-blur throughout the lifecycle of the widget.



                If anyone else ends up stuck with this, you can leave a comment and I can help out more.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 27 '18 at 2:31









                MaryMary

                1,11611434




                1,11611434

























                    0














                    I have a similar problem and it also boils down to using canvas and paint.
                    The only problem now is, if I apply a MaskFilter to the image, not much happens despite the enormously high sigma... Only the edge is a little blurred.



                    Now the question is why is that so? How did you solved this issue?



                    canvas.drawImageRect(
                    image,
                    Offset(0, 0) & srcSize,
                    Offset(-delta, 0) & dstSize,
                    Paint()..maskFilter = MaskFilter.blur(
                    BlurStyle.normal, 100.0
                    )
                    );


                    For those of you who are interested, I have loaded the image in the init function as follows:



                    rootBundle.load("assets/gift_1.png").then((bd) {
                    Uint8List lst = new Uint8List.view(bd.buffer);
                    Ui.instantiateImageCodec(lst).then((codec) {
                    codec.getNextFrame().then((frameInfo) {
                    image = frameInfo.image;
                    });
                    });
                    });


                    P.s. Unfortunately, I can't write any comments yet; therefore here as a contribution, including solution proposal






                    share|improve this answer


























                    • My sigma was only 3. When I was playing around with MaskFilter it seemed like I needed to give it more space than the object I'm blurring, and the object needs to be centered. E.g. if your image is 100 x 100, try making your canvas size 200 x 200 and starting your image at (50, 50). This will give the outline of the blur some space. Maybe also try without any offsets, or try just drawing and blurring a solid colored rectangle first.

                      – Mary
                      Dec 3 '18 at 22:34
















                    0














                    I have a similar problem and it also boils down to using canvas and paint.
                    The only problem now is, if I apply a MaskFilter to the image, not much happens despite the enormously high sigma... Only the edge is a little blurred.



                    Now the question is why is that so? How did you solved this issue?



                    canvas.drawImageRect(
                    image,
                    Offset(0, 0) & srcSize,
                    Offset(-delta, 0) & dstSize,
                    Paint()..maskFilter = MaskFilter.blur(
                    BlurStyle.normal, 100.0
                    )
                    );


                    For those of you who are interested, I have loaded the image in the init function as follows:



                    rootBundle.load("assets/gift_1.png").then((bd) {
                    Uint8List lst = new Uint8List.view(bd.buffer);
                    Ui.instantiateImageCodec(lst).then((codec) {
                    codec.getNextFrame().then((frameInfo) {
                    image = frameInfo.image;
                    });
                    });
                    });


                    P.s. Unfortunately, I can't write any comments yet; therefore here as a contribution, including solution proposal






                    share|improve this answer


























                    • My sigma was only 3. When I was playing around with MaskFilter it seemed like I needed to give it more space than the object I'm blurring, and the object needs to be centered. E.g. if your image is 100 x 100, try making your canvas size 200 x 200 and starting your image at (50, 50). This will give the outline of the blur some space. Maybe also try without any offsets, or try just drawing and blurring a solid colored rectangle first.

                      – Mary
                      Dec 3 '18 at 22:34














                    0












                    0








                    0







                    I have a similar problem and it also boils down to using canvas and paint.
                    The only problem now is, if I apply a MaskFilter to the image, not much happens despite the enormously high sigma... Only the edge is a little blurred.



                    Now the question is why is that so? How did you solved this issue?



                    canvas.drawImageRect(
                    image,
                    Offset(0, 0) & srcSize,
                    Offset(-delta, 0) & dstSize,
                    Paint()..maskFilter = MaskFilter.blur(
                    BlurStyle.normal, 100.0
                    )
                    );


                    For those of you who are interested, I have loaded the image in the init function as follows:



                    rootBundle.load("assets/gift_1.png").then((bd) {
                    Uint8List lst = new Uint8List.view(bd.buffer);
                    Ui.instantiateImageCodec(lst).then((codec) {
                    codec.getNextFrame().then((frameInfo) {
                    image = frameInfo.image;
                    });
                    });
                    });


                    P.s. Unfortunately, I can't write any comments yet; therefore here as a contribution, including solution proposal






                    share|improve this answer















                    I have a similar problem and it also boils down to using canvas and paint.
                    The only problem now is, if I apply a MaskFilter to the image, not much happens despite the enormously high sigma... Only the edge is a little blurred.



                    Now the question is why is that so? How did you solved this issue?



                    canvas.drawImageRect(
                    image,
                    Offset(0, 0) & srcSize,
                    Offset(-delta, 0) & dstSize,
                    Paint()..maskFilter = MaskFilter.blur(
                    BlurStyle.normal, 100.0
                    )
                    );


                    For those of you who are interested, I have loaded the image in the init function as follows:



                    rootBundle.load("assets/gift_1.png").then((bd) {
                    Uint8List lst = new Uint8List.view(bd.buffer);
                    Ui.instantiateImageCodec(lst).then((codec) {
                    codec.getNextFrame().then((frameInfo) {
                    image = frameInfo.image;
                    });
                    });
                    });


                    P.s. Unfortunately, I can't write any comments yet; therefore here as a contribution, including solution proposal







                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Dec 3 '18 at 12:16

























                    answered Dec 3 '18 at 12:02









                    SilasSilas

                    82




                    82













                    • My sigma was only 3. When I was playing around with MaskFilter it seemed like I needed to give it more space than the object I'm blurring, and the object needs to be centered. E.g. if your image is 100 x 100, try making your canvas size 200 x 200 and starting your image at (50, 50). This will give the outline of the blur some space. Maybe also try without any offsets, or try just drawing and blurring a solid colored rectangle first.

                      – Mary
                      Dec 3 '18 at 22:34



















                    • My sigma was only 3. When I was playing around with MaskFilter it seemed like I needed to give it more space than the object I'm blurring, and the object needs to be centered. E.g. if your image is 100 x 100, try making your canvas size 200 x 200 and starting your image at (50, 50). This will give the outline of the blur some space. Maybe also try without any offsets, or try just drawing and blurring a solid colored rectangle first.

                      – Mary
                      Dec 3 '18 at 22:34

















                    My sigma was only 3. When I was playing around with MaskFilter it seemed like I needed to give it more space than the object I'm blurring, and the object needs to be centered. E.g. if your image is 100 x 100, try making your canvas size 200 x 200 and starting your image at (50, 50). This will give the outline of the blur some space. Maybe also try without any offsets, or try just drawing and blurring a solid colored rectangle first.

                    – Mary
                    Dec 3 '18 at 22:34





                    My sigma was only 3. When I was playing around with MaskFilter it seemed like I needed to give it more space than the object I'm blurring, and the object needs to be centered. E.g. if your image is 100 x 100, try making your canvas size 200 x 200 and starting your image at (50, 50). This will give the outline of the blur some space. Maybe also try without any offsets, or try just drawing and blurring a solid colored rectangle first.

                    – Mary
                    Dec 3 '18 at 22:34


















                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402799%2fperformant-blur-opacity-in-flutter%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    How to change which sound is reproduced for terminal bell?

                    Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

                    Can I use Tabulator js library in my java Spring + Thymeleaf project?