CODEWITHSUNDEEP
flutterstackblur
Geremia Moretti
Geremia Moretti

Reputation: 53

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

Upvotes: 0

Views: 93

Answers (2)

Manas D
Manas D

Reputation: 26

Wrap the stack widget with ClipRect widget

Upvotes: 0

gopelkujo
gopelkujo

Reputation: 822

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

Upvotes: 1

Related Questions