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(),
)
);
Related
I have a design as you can see below and the question is how can I apply this notch effect on Arrow ? Is there any easy way to do it just like in Floating Action Button ? Thanks in advance.
I have created Dartpad, please look into this and do let me know if you need any help.
Dartpad Link : https://dartpad.dev/flutter?9bd55396e067e71a839851e18905f478
Code:
Padding(
padding: const EdgeInsets.all(16.0),
child: SizedBox(
height: 70,
child: Stack(alignment: Alignment.centerRight, children: [
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Container(
height: 70,
decoration: BoxDecoration(
color: Colors.cyan, borderRadius: BorderRadius.circular(8)),
),
),
Container(
width: 40,
height: 65,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 5)),
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.cyan,
child: const Icon(Icons.chevron_right),
),
)
]),
),
);
Output:
Hey you can achieve it in 2 way
1st one and simple - Create a box decoration widget and a circle shape widget with white border and put these together with Stack and fit as per your requirements.
2nd use Custom Clipper or Custom Paint and draw your shape.
I am trying to apply the blur effect in all background space except in the center square. How I can do it?
child: Stack(
children: <Widget>[
Positioned.fill(
child: QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShapeTeste(
overlayColor: Colors.transparent.withOpacity(0.85),
borderColor: Colors.white,
borderRadius: 8,
borderLength: 30,
borderWidth: 2,
cutOutSize: 200,
borderRadiusBackground: BorderRadius.only(
topLeft: const Radius.circular(12),
topRight: const Radius.circular(12),
),
),
),
),
Positioned.fill(
child: BackdropFilter(
filter: ui.ImageFilter.blur(
sigmaX: 5.0,
sigmaY: 5.0,
), //this is dependent on the import statment above
child: Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.8),
)
),
),
),
])
In this picture above, the blur effect is in all my background. The center square does shouldn't have the blur effect :(
Someone can help me?
I will thank you very much.
The children of your Stack are backwards. The QRView should be below the BackdropFilter in the list of children.
However, an easier approach would be to make the QRView the child of the BackdropFilter altogether. If this causes the filter to not take up the entire available space, you could always throw in an intermediary SizedBox.exand().
Here I'm taking two widgets one is textfield widget and another one is Icon widget both are placed in seperate container. I'm very new to flutter, I dont know how to place two widgets parallely each other with different size. But somehow designed for my mobile but when i run my app on different mobile its widgets are overflowing.Can anybody help me out from this issue. Thanks in advance!!! For More reference see the image given.
Here is my code
Padding(
padding: const EdgeInsets.only(
top: 10.0, bottom: 4.0, right: 20.0, left: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
child: Material(
color: Colors.white,
elevation: 3.0,
// CONTAINER BACKSIDE SHADOW DEPTH
borderRadius: BorderRadius.circular(5.0),
shadowColor: Color(0xFF90A4AE),
//CONTAINER BACKSIDE SHADOW COLOR
child: Expanded(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: IconButton(
icon: Icon(
Icons.search,
color: Colors.pink,
),
onPressed: () {},
),
hintText: "Search for restaurant",
hintStyle: TextStyle(fontSize: 15),
),
onChanged: (input) {
print(input);
},
),
),
),
height: 55.0,
width: MediaQuery
.of(context)
.size
.width - 120,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 1.0,
style: BorderStyle.solid),
borderRadius: BorderRadius.circular(5.0),
),
),
Container(
child: Material(
color: Colors.white,
elevation: 3.0,
// CONTAINER BACKSIDE SHADOW DEPTH
borderRadius: BorderRadius.circular(5.0),
shadowColor: Color(
0xFF90A4AE),
child: IconButton(
icon: Icon(Icons.tune),
color: Colors.pink,
onPressed: () {
[enter image description here][1]
},
), //CONTAINER BACKSIDE SHADOW COLOR
),
height: 55.0,
width: MediaQuery
.of(context)
.size
.width - 300,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 1.0,
style: BorderStyle.solid),
borderRadius: BorderRadius.circular(5.0)),
)
],
),
),
From the screenshot and the code, I see there are two widgets in a row and the screen is overflown as it couldn't accommodate and show both of them.
There are two solutions:
To show the row children in the next line automatically if overflown.
To make the row children scrollable row-wise.
NOTE: SMLink is my custom widget. Just used here for demonstration purposes.
SOLUTION-1
The simple workaround would be to use the Wrap widget instead of the Row widget.
The Wrap widget simply takes the children who are prone to screen overflow and places them on the next line. You can set the direction, spacing etc, in addition to the options that Row widget can offer. Try it & let me know.
// By default, it behaves as Row, you can set the direction attribute to Axi.vertical to mimic the Column widget.
Wrap(
spacing: 8.0,
runAlignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.center,
children:
[
SMLink(logo: 'Medium', link: Constants.LINK_MEDIUM),
SMLink(logo: 'linkedin', link: Constants.LINK_LINKEDIN),
SMLink(logo: 'facebook', link: Constants.LINK_FAEBOOK),
SMLink(logo: 'Qwiklabs', link: Constants.LINK_QWIKLABS),
],
)
SOLUTION-2
From the screenshot, the other way to fix would be by making the row scrollable. This makes UI look consistent in your case. We can use ListView widget for this.
ListView(
scrollDirection: Axis.horizontal,
children:
[
SMLink(logo: 'Medium', link: Constants.LINK_MEDIUM),
SMLink(logo: 'linkedin', link: Constants.LINK_LINKEDIN),
SMLink(logo: 'facebook', link: Constants.LINK_FAEBOOK),
SMLink(logo: 'Qwiklabs', link: Constants.LINK_QWIKLABS),
],
)
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,
),
),
),
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.