我试图应用模糊效果使用BackdropFilter只在抽屉上,并离开其他屏幕区域(Scafold,不太确定的名称)作为它的。
我想消除黄色区域的模糊效果,我已经花了很多时间,但仍然卡住了。
这是我的抽屉密码:
@override
Widget build(BuildContext context) {
return Drawer(
child: Stack(
// colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.dstATop)
children: <Widget>[
Image.network(
userPicUrl,
height: MediaQuery.of(context).size.height,
fit: BoxFit.cover,
),
Container(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16.0, sigmaY: 16.0),
child: Container(
decoration: BoxDecoration(
color: Colors.lightBlueAccent.withOpacity(0.5)),
),
),
),
Positioned(
left: 150,
top: 100,
height: 100.0,
width: 100.0,
child: InkWell(
onTap: () async {
imageFile =
await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {});
},
splashColor: Colors.lightGreenAccent,
highlightColor: Colors.pinkAccent.withOpacity(0.5),
child: Icon(
Icons.image,
size: 24,
color: Colors.transparent,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 12.0),
child: SafeArea(
child: ClipRRect(
child: Container(
height: 120,
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(64),
border: Border(
right: BorderSide(width: 2, color: Colors.white),
left: BorderSide(width: 2, color: Colors.white),
top: BorderSide(width: 2, color: Colors.white),
bottom: BorderSide(width: 2, color: Colors.white)),
image: DecorationImage(
image: NetworkImage(userPicUrl),
fit: BoxFit.fitHeight),
),
),
),
),
),
Text(
"ژینەر حەیدەر تەها",
textAlign: TextAlign.center,
maxLines: 2,
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w600),
),
Text(
"C6-1",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w900),
),
Spacer(),
Column(
children: drawerItems.map((item) {
return ListTile(
leading: Icon(
item.icon,
size: 28,
color: Colors.white,
),
title: Text(
item.title,
style: TextStyle(fontSize: 16, color: Colors.white),
),
);
}).toList(),
),
Spacer(),
ListTile(
leading: Icon(
Icons.exit_to_app,
size: 28,
color: Colors.white,
),
title: Text(
"Sign Out",
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w400),
),
)
],
),
],
),
);}
唯一的解决办法是为抽屉做一个自定义控制器吗?我只是不想这么做
3条答案
按热度按时间6vl6ewon1#
所以,以防万一有人遇到这种情况,我解决了我的 Package 与ClipPath小部件的菜单堆栈,蓝色消失了,这是怎么可能的,我不知道,但它做的工作:)。
oxcyiej72#
你可以复制粘贴运行下面的完整代码
您可以使用
SizedBox
在我的测试中,如果
width
〉= 250,仍然模糊整个屏幕。所以在我的演示width
是249。您可以在自己的情况下测试
width
代码片段
工作演示
全码
5ssjco0h3#
演示[1]:https://i.stack.imgur.com/nJx0B.png