flutterstackblur

Problem with blurring a part of the widget


I'm having a problem making a portion of a widget to be blurred (I'm using a stack).

return Scaffold(
      body: Stack(
        children: [

        Padding(
          //sth very nice
        ),
        Positioned(
          top: 0,
          bottom: height*0.85,
          right: 0,
          left: 0,
            child: BackdropFilter(
              filter: ui.ImageFilter.blur(
                sigmaX: 5, sigmaY: 5,
              ),
              child: Container(color: Colors.transparent,)
          ),
        )
      ],
      ),
    );

What I want is a little blurred area at the top of my page, that covers the below widget (in this case, the content of the padding).

Actually, what I have is that the blurring effect covers all the screen and this is very interesting because in my stack I have a Positioned widget with a precise dimension. It seems like the blurring effect goes over the limits ...

I put the image of the entired blurred screen: enter image description here


Solution

  • As you said

    What I want is a little blurred area at the top of my page, that covers the below widget (in this case, the content of the padding).

    I try to implement what you try to achieve, i don't think it's exactly correct, but maybe this can give you an idea of how the blur works.

    import 'dart:ui';
    import 'package:flutter/material.dart';
    
    class BlurPage extends StatelessWidget {
      const BlurPage({super.key});
    
      @override
      Widget build(BuildContext context) {
        final Size deviceSize = MediaQuery.of(context).size;
    
        final Image img = Image.network(
          'https://images.hdqwalls.com/download/nature-background-2560x1080.jpg',
          fit: BoxFit.fitWidth,
        );
    
        const field = Padding(
          padding: EdgeInsets.all(16),
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Input',
            ),
          ),
        );
    
        return Scaffold(
          body: SafeArea(
            child: Stack(
              fit: StackFit.expand,
              children: [
                // This is the main content of the page that consist [Image] and [TextField].
                //
                // This widget will be shown below the blur effect.
                SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [img, field, img, field, img, field, field],
                  ),
                ),
    
                // Blur Section
                Positioned(
                  // Set top to '0' in [Positioned] will make the widget at the top.
                  top: 0,
                  // Add [ClipRRect] for limiting the [BackdropFilter] effect to only
                  // child widget.
                  child: ClipRRect(
                    child: BackdropFilter(
                      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                      // Add a container with the specified height & width.
                      child: Container(
                        width: deviceSize.width,
                        height: 75,
                        color: Colors.transparent,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }
    

    The output

    Output