ImageFilter.blur() rounded corner in flutter

Question

I was trying to make a blurry effect for the clock and rounding the corners, but the borderRadius() can't change the border of the blur effect.

I tried clipRRect() everywhere, but it didn't work. I even searched but no one had my issue.

this is what I tried:

Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/$bgImage'),
            fit: BoxFit.cover,
          ),
        ),

        child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 200, 0, 0),
          child: Column(
            children: <Widget>[
        
              Center(
                child: ClipRRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                    child: Container(
                      width: 300.0,
                      height: 120.0,
                      padding: EdgeInsets.all(10),
                      // margin: EdgeInsets.symmetric(horizontal: 20),
                      decoration: new BoxDecoration(
                        color: Colors.grey.shade200.withOpacity(0.2),
                        borderRadius: BorderRadius.circular(30),
                      ),
                      
                      child: Column(
                        children: [
                          Text(
                            data!['time'],
                            style: TextStyle(
                              fontSize: 50,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          
                          SizedBox(height: 10,),
                          
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Text(
                                data!['location'],
                                style: TextStyle(
                                  fontSize: 20,
                                  // letterSpacing: 2,
                          
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
      
              SizedBox(height: 30 ,),
        
              TextButton.icon(
                onPressed: () {
                  Navigator.pushNamed(context, '/location');
                },
                icon: Icon(Icons.edit_location),
                label: Text('Edit Location'),
               ),
               
            ],
          ),
        ),
      ),
    );

As you can see in the output, the Contaner() has a border-radius but the blurry effect does not have it.

Answer 1

You need to move your borderRadius inside your Container to your ClipRRect widget.

ClipRRect(
  borderRadius: BorderRadius.circular(30),
  child: BackdropFilter(
    // ...
  ),
),

Here's an example I've made based on your example which you can try on zapp.run: https://zapp.run/edit/flutter-zb3o06yqb3p0?entry=lib%2Fmain.dart&file=lib%2Fmain.dart

Screenshot

Full code sample

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DecoratedBox(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(
              'https://images.unsplash.com/photo-1530634082454-f57b7d567b25?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
            ),
            fit: BoxFit.cover,
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 200, 0, 0),
          child: Column(
            children: <Widget>[
              Center(
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(30),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                    child: Container(
                      width: 300.0,
                      height: 120.0,
                      padding: const EdgeInsets.all(10),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade200.withOpacity(0.2),
                      ),
                      child: Column(
                        children: [
                          const Text(
                            '5:19 PM',
                            style: TextStyle(
                              fontSize: 50,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(height: 10),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: const [
                              Text(
                                'Berlin',
                                style: TextStyle(fontSize: 20),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 30),
              TextButton.icon(
                onPressed: () {
                  Navigator.pushNamed(context, '/location');
                },
                icon: const Icon(Icons.edit_location),
                label: const Text('Edit Location'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}