Flutter – Problem with blurring a part of the widget

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 may this can give you an idea of how this 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