how can i use BackdropFilter in flutter for Appbar ? when i use that for the Appbarother widgets which they are into Scaffold blurred, not AppBar
for example:
BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 5,
sigmaY: 5
),
child: AppBar(
automaticallyImplyLeading: false,
// Used for removing back button.
elevation: 8.0,
titleSpacing: 0.0,
backgroundColor: theme.appMainColor,
title: Stack(
children: <Widget>[
],
)),
),
After searching web for a while and trying different combinations of widgets, I finally found the solution
appBar: PreferredSize(
child: Container(
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
// width: MediaQuery.of(context).size.width,
// height: MediaQuery.of(context).padding.top,
color: Colors.transparent,
))),
),
preferredSize: Size(MediaQuery.of(context).size.width, 22),
),
Go nuts!!
Use the flexibleSpace parameter of the AppBar.
Wrap the BackDropFilter with a ClipRect to prevent the blur from getting all over the screen.
Make sure to create a Container as the child of the BackDropFilter
Here is the minimal code you'll need to add to your AppBar:
flexibleSpace: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 7, sigmaY: 7),
child: Container(
color: Colors.transparent,
),
),
),
Related
This question already has answers here:
Blur background behind dialog flutter? [closed]
(4 answers)
Closed last month.
Here is an example, I want this type of dialog box for my initial project, anyone helps me out?
Try with backdropfilter with filter property. Hope you get the solution!
Get.dialog(
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: AlertDialog(
contentPadding: EdgeInsets.zero,
backgroundColor: Colors.transparent,
elevation: 10.0,
content: Container(
height: height,
width: 100.0.w,
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
borderRadius: BorderRadius.circular(16),
),
child: Text('Downloading')
),
),
);
);
By Wrapping your Dialog with BackdropFilter You can achieve your design.
return new BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
backgroundColor: Color(ColorResources.BLACK_ALPHA_65),
child: _dialogContent(),
)
);
I have designed it first in figma, where I had added a drop shadow to the butterfly just make to feel more interesting. I am wondering if I can achieve this in flutter too. I have tried Box Shadow widget but it gives shadow as square or rectangle.
You can achieve it from using Stack, BackdropFilter and duplicating image twice.
Stack(
children: [
Image.asset(
imgPath,
color: Colors.black.withOpacity(0.7),
),
BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Image.asset(
imgPath,
),
)
],
),
The first image will act as the shadow. You can adjust effect by changing the transparency value and sigma values
Try using the following code.
Stack(
alignment: Alignment.center,
children: [
Image.asset(
imgPath,
color: Colors.black.withOpacity(0.3),
),
ClipRect(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 5.0,
sigmaY: 5.0,
),
child: Image.asset(
imgPath,
),
),
),
)
],
)
In App bar i added search widget like this:
return Scaffold(
appBar: AppBar(
title: Container(
margin: EdgeInsets.only(top: 30),
decoration: BoxDecoration(
color: Color.fromARGB(50, 255, 255, 255),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: TextFormField(...
)),
),
),
)
],
),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: TabBar(...
I added margin from top equal 30 but search section is cropped:
How can i increase default title size in appbar?
You can use flexibleSpace instead of title.
return Scaffold(
appBar: AppBar(
flexibleSpace: Container(....
flexibleSpace works fine but another way is to use PreferredSize.
Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child:AppBar(
title:Text("title"),
)
),
body:...
)
I would like to implement this overlay bar
This is what i reached lately (i just want to blur the part below the overlay bar portion, everything else is not a problem)
The crucial part is that it must blur the portion of screen below itself. I have no clue about how should i do it, i tried everything (like setting up a transparent container and blur it, but the transparent color turns out to be black :/ ).
This is how i currently implement the navigation bar with a container over it:
Widget _navigationBarAndOverlay() {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
OverlayBarWidget(),
_navigationBar(),
],
);
}
And this is the OverlayBarWidget code:
Widget build(BuildContext context) {
return Container(
color: Colors.transparent,
height: 85,
width: MediaQuery.of(context).size.width,
child: Center(child: Text("Nothing to do"),),
);
}
Thanks in advance for your help!
EDIT:
In the end i managed to do it just few minutes later, so i won't assign the best answer.
The solution is using a Stack instead of a Column: the overlay part will actually overlay the interface instead of being put below. In order to do it, you need to give your bottomAppBar a precise dimension (use a SizeBox, as below) and use a Positioned for the overlay bar positioning
Stack(
children: <Widget>[
Scaffold(
body: TabBarView(
controller: tabController,
...
),
bottomNavigationBar: SizedBox(
height: 57,
child: _navigationBar(),
),
),
Positioned(
bottom: 57,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaY: 16, sigmaX: 16),
child: OverlayBarWidget(),
),
),
)
)
Final result
You can try BackDropFilter
This kind of effects are relatively expensive, use them with caution!
Important: Wrap your container with ClipRect widget, otherwise the entire screen will take the BackDropFilter effect.
ClipRect(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/your-image.png'),
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
child: Container(
color: Colors.black.withOpacity(0.0),
),
),
),
)
Play with the values to get different effects
sigmaX: 5.0
sigmaY: 5.0
withOpacity: 0.0
Making a comparison, at this point you get something like this:
Now, if you want to display information over that image, you can just use the previous code in a Stack(), and add some Positioned() Text()
Stack(
children: <Widget>[
ClipRect( ... ),
Positioned(top: 30, left: 30, child: Text("Some Info"),
Positioned(top: 60, left: 30, child: Text("Some more Info"),
], )
You can get something like this
BackDropFilter documentation
Flutter video about BackDropFilter --> https://youtu.be/dYRs7Q1vfYI
I am trying to achieve a very similar effect to what was shown in the widget of the week video on flutter's channel: https://www.youtube.com/watch?v=dYRs7Q1vfYI#t=1m20s
On the right you see the desired result, on the left you see what's currently going on in my app.
The code I've been using is pretty similar to the one from the example video, using a Stack to position the Backdrop filter over my image. The rounded image and the blur over it are inside one widget, which will is placed inside another stack (along with the text at the bottom). Since I applied the filter only a small section of the image, I don't understand why entire app is blurred. Here's the code for the Image Widget:
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size.width - 75;
return Container(
height: size,
width: size,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Image(imageUri: "...", size: size - 30), // this is just a container with the image
Positioned(
top: 100,
left: 100,
bottom: 100,
right: 100,
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 5,
sigmaY: 5,
),
child: Container(
color: Color(0x66FF0000),
),
),
)
],
),
);
}
}
It turns out the video is missing an important part from the documentation:
If there's no clip, the filter will be applied to the full screen.
So the solution is to wrap the filter into a ClipRect, as taken from the example:
ClipRect( // <-- clips to the 200x200 [Container] below
child: BackdropFilter(
filter: ui.ImageFilter.blur(
sigmaX: 5.0,
sigmaY: 5.0,
),
child: Container(
alignment: Alignment.center,
width: 200.0,
height: 200.0,
child: Text('Hello World'),
),
),
),
Another solution in 2021:
Apply clipBehavior: Clip.hardEdge to parent of BackdropFilter
Container(
clipBehavior: Clip.hardEdge,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
child: Container(
color: Colors.black.withOpacity(0.2),
),
),
)
Explanation:
clipBehavior: Clip.hardEdge means overflow: none
If no clip, filter will overflow upward (in widget tree) until they meet clip.