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 ...
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,
),
),
),
),
],
),
),
);
}
}