Repository: flutter
Issue: Expose a flag for allowing to BackdropFilter filter over the ClipRect result
Labels: c: new feature,framework,c: proposal,P3,team-framework,triaged-framework

### Use case

ImageFilter.blur with TileMode.decal typically produces smooth edges when applied to an entire widget. However, when we use a BackdropFilter and clip it over a specific region, we lose those smooth edges. This is because the clipping occurs after the blur effect is applied, resulting in sharp edges at the clipped boundaries.

Example for reproduction:
```dart
import 'package:flutter/material.dart';
import 'dart:ui';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom AppBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<String> imageUrls = [
    'https://picsum.photos/id/1018/800/600',
    'https://picsum.photos/id/1015/800/600',
    'https://picsum.photos/id/1019/800/600',
    'https://picsum.photos/id/1016/800/600',
    'https://picsum.photos/id/1021/800/600',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Content - List of Image Cards
          SafeArea(
            child: ListView.builder(
              padding: EdgeInsets.only(top: 80), // Space for the custom app bar
              itemCount: imageUrls.length,
              itemBuilder: (context, index) {
                return Card(
                  margin: EdgeInsets.all(16),
                  elevation: 5,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Column(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
                        child: Image.network(
                          imageUrls[index],
                          fit: BoxFit.cover,
                          height: 200,
                          width: double.infinity,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(16),
                        child: Text(
                          'Image ${index + 1}',
                          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
          // Custom AppBar with BackdropFilter
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10, tileMode: TileMode.decal),
                child: Container(
                  height: 100,
                  color: Colors.white.withOpacity(0.3),
                  child: SafeArea(
                    child: Center(
                      child: Text(
                        'Image Gallery',
                        style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                          color: Colors.black87,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
```


The code uses BackdropFilter for a blurred app bar, but it creates sharp edges at the bottom. The desired effect is a smooth fade-out at the bottom edge, as shown in the right image, for a more pleasing transition between blurred and non-blurred areas.


![image](https://github.com/user-attachments/assets/bfc803f3-e19b-445e-95d3-889fdf03f4bf)


### Proposal

I don't know what is the correct API because right now we have to wrap BackdropFilter with ClipRect and it makes sense not to have the smooth edges but since this is specific to only BackdropFilter we can probably add a flag in BackdropFilter widget to allow which operation happens first ?