我应该如何在边界处获得这个图层模糊？
问题描述 投票：0回答：1
我正在Flutter中创建一个自定义卡片，我希望底部区域具有圆角的模糊效果。然而，我正在努力实现所需的边界外观。这是我实现的小部件：
Container(
height: widget.height.h,
width: 100.w,
decoration: BoxDecoration(
//color: Colors.blue, // You can change this color
borderRadius: BorderRadius.circular(20),
),
child: Stack(
children: [
SizedBox(
height: 65.h,
width: 100.w,
child: PageView.builder(
itemCount: widget.event.assets.length,
onPageChanged: (value) {
setState(() {
pageIndex = value;
});
if (videoPlayerController != null) {
togglePlayPause(isPlay: false);
}
if (widget.event.assets[value].type ==
MediaEnum.video.name) {
initPlayer = true;
initVideoPlayer(
videoUrl: widget.event.assets[value].url,
isAutoPlay: true,
);
}
},
itemBuilder: (context, index) {
return AspectRatio(
aspectRatio: 2 / 3,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: widget.event.assets[index].type ==
MediaEnum.video.name
? _buildVideoContent(index)
: _buildImageContent(index),
),
),
);
},
),
),
Positioned(
bottom: 0,
child: Stack(
children: [
// Shadow container
Container(
height: 11.5.h, // 12.h,//110,
width: 96.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 10, // Increase blur for more fade
spreadRadius: 10, // Increase spread for wider fade
offset: Offset(0, -1), // Center the shadow
),
],
),
),
// Main content with blur
ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
child: BackdropFilter(
blendMode: BlendMode.src,
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
height: 11.5.h, //110
width: 100.w,
padding: EdgeInsets.symmetric(horizontal: 3.w),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent.withOpacity(0.1),
Colors.black.withOpacity(0.0),
Colors.black.withOpacity(0.1),
Colors.black.withOpacity(0.15),
Colors.black.withOpacity(0.2),
],
stops: [0.0, 0.1, 0.3, 0.7, 1.0],
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(50),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 1.5.h,
),
Row(
children: [
SizedBox(
width: 89.w,
child: Text(
widget.event.name,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 19.5.sp,
fontWeight: FontWeight.w700,
color: colorScheme.background,
),
),
)
],
),
Text(
StringExtension.formatDateForNewEventCard(
widget.event.startDate),
style: TextStyle(
fontSize: 15.sp,
fontWeight: FontWeight.w700,
color:
colorScheme.background.withOpacity(0.8),
),
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Row(children: [
Text(
"${widget.event.priceRangeStart.toIndianRupeeString()}",
style: TextStyle(
color: colorScheme.background,
fontSize: 16.sp,
fontWeight: FontWeight.bold,
),
),
SizedBox(
width: 55.w,
child: Text(
" onwards, (${widget.event.coverChargeEnabled ? 'Cover Charge Applicable' : 'Free'})",
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 15.5.sp,
fontWeight: FontWeight.w500,
color: colorScheme.background
.withOpacity(0.8),
),
),
),
]),
if (widget.isInListing)
Padding(
padding: EdgeInsets.only(right: 2.h),
child: SvgPicture.asset(
AssetConstants.longArrowRight,
width: 30,
))
],
)
],
),
),
),
),
],
),
),
Positioned(
bottom: 110,
right: 10,
child: widget.event.assets[pageIndex].type ==
MediaEnum.video.name &&
isPlaying
? ValueListenableBuilder(
valueListenable: widget.isMutedNotifier,
builder: (context, isMuted, child) {
return GestureDetector(
onTap: () {
if (widget.isInListing) {
toggleMuteUnmuteForValueListener(isMute);
} else {
// print("is mute ${isMute}");
toggleMuteUnmute();
}
},
child: Container(
color: Colors.transparent,
height: 12.5.h,
width: 12.5.h,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SvgPicture.asset(
widget.isInListing
? (isMuted
? AssetConstants.muteFillIcon
: AssetConstants.unmuteFillIcon)
: (isMute
? AssetConstants.muteFillIcon
: AssetConstants.unmuteFillIcon),
color: Colors.white,
),
],
),
),
);
})
: SizedBox(
width: 4.5.w,
height: 3.h,
),
),
Positioned(
bottom: 100,
left: 0,
right: 0,
child: Container(
// height: 4.h,
padding: EdgeInsets.only(
left: 1.5.h,
right: widget.isInListing ? 1.8.h : 0,
bottom: 2.h),
width: 95.w,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
//play pause button
widget.isInListing
? SizedBox()
: widget.event.assets[pageIndex].type ==
MediaEnum.video.name &&
widget.isInListing
? GestureDetector(
onTap: () {
print("is playingMain ${isPlaying}");
togglePlayPause(isPlay: !isPlaying);
},
child: Center(
child: CircleAvatar(
radius: 3.5.w,
backgroundColor:
Theme.of(context).colorScheme.shadow,
child: Icon(
isPlaying
? Icons.pause_rounded
: Icons.play_arrow_rounded,
color: Colors.white,
size: 4.5.w,
),
),
),
)
: SizedBox(
width: 4.5.w,
height: 3.h,
),
//page indicator
widget.event.assets.length <= 1
? const SizedBox()
: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...List.generate(
widget.event.assets.length,
(dotIndex) => Padding(
padding: dotIndex ==
widget.event.assets.length -
1
? EdgeInsets.zero
: EdgeInsets.only(right: 2.0.w),
child: Container(
height: 1.9.w,
width: 1.9.w,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: pageIndex == dotIndex
? Theme.of(context)
.colorScheme
.background
: Theme.of(context)
.colorScheme
.secondaryContainer),
),
)),
],
),
),
// mute button
],
),
),
),
if (widget.isInListing)
Positioned(
top: 0,
child: SizedBox(
height: 105.w,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (widget.event.pub != null)
Padding(
padding: EdgeInsets.symmetric(
horizontal: 3.w, vertical: 2.h),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 80.w,
child: Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
GestureDetector(
onTap: () {
AnalyticsService().logEvent(
eventName: 'view_club',
paras: {
'club_id': widget
.event.pub!.id
.toString(),
});
navigator<NavigationService>()
.navigateTo(
UserRoutes.clubProfileRoute,
queryParams: {
'id': widget.event.pub!.id
.toString()
});
},
child: CircleAvatar(
radius: 4.5.w,
backgroundImage: CachedNetworkImageProvider(
CustomImageProvider.getImageUrl(
widget.event.pub?.logo ??
"",
// widget.event.pub?.coverImageUrl ?? '',
ImageType.profile)),
),
),
SizedBox(
width: 2.w,
),
Expanded(
child: InkWell(
onTap: () {
navigator<NavigationService>()
.navigateTo(
UserRoutes
.clubProfileRoute,
queryParams: {
'id': widget.event.pub!.id
.toString()
});
},
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.end,
children: [
GestureDetector(
onTap: () {
AnalyticsService().logEvent(
eventName: 'view_club',
paras: {
'club_id': widget
.event.pub!.id
.toString(),
});
navigator<
NavigationService>()
.navigateTo(
UserRoutes
.clubProfileRoute,
queryParams: {
'id': widget
.event.pub!.id
.toString()
});
},
child: Text(
widget.event.pub!.fullName,
overflow:
TextOverflow.ellipsis,
maxLines: 1,
style: themeData
.textTheme.bodyMedium!
.copyWith(
color: themeData
.colorScheme
.background,
fontWeight:
FontWeight.w600,
fontSize: 16.5.sp),
),
),
Text(
widget.event.address
?.vicinity ??
'',
maxLines: 1,
overflow:
TextOverflow.ellipsis,
style: themeData
.textTheme.bodySmall!
.copyWith(
fontWeight: FontWeight.w400,
fontSize: 14.sp,
color: themeData
.colorScheme.background,
),
),
],
),
),
),
],
),
),
]),
)
],
),
),
)
],
),
)
我得到的结果：
我想要的结果：
我尝试过的： 使用 BackdropFilter 和 ClipRRect 来应用模糊效果。 添加渐变和阴影以增强外观。
1个回答
0
投票
投票
我已经用 LinearGradient 尝试过了。希望有帮助
Column(
children: [
Stack(alignment: Alignment.bottomCenter, children: [
Image.network(
'image_url',
fit: BoxFit.fill,
),
Container(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text("One More Light",style: TextStyle(fontSize: 30,color: Colors.white),),
Text("Starts from...",style: TextStyle(fontSize: 30,color: Colors.white),),
],
),
width: MediaQuery.of(context).size.width,
height: 100,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent, // Start with transparent
Colors.black.withOpacity(0.7), // Light black color with transparency
],
stops: [0.0, 1.0],
),
),
),
]),
],
),
根据您的要求调整容器的高度。
最新问题
- 如何在Android Kotlin中每5秒致电API？
- Sci-kit学习：研究错误分类的数据
- 如何从C＃中的QueryPerformancecount
- 不能将ApplicationSights的度量添加到Azure
- 我如何禁用，在键入点（。）视觉工作室后会自动打印fileStyleUriparSer？ 不要误会我的意思，我想要这些建议，但我不希望Visual Studio自动
- 我有一个vba excel模型，我将其分为两个单独的工作簿： 包含模型的所有输入的InputswB， RunnerWB，其中包含大部分VBA代码（以及所有
- 在bash中``读''的目的是什么？您如何使用它？
- 如何在C＃中为帐户中创建持久字典？
- 如何从另一个数组的值中生成一个随机数组，其值的总和在预定的范围内？ 我有一系列正整数，例如[10,25,40,55,80,110]。 我想能够指定一个范围，例如100-150，并从此预先存在的数组中生成一个新数组，其中新的
- 如何支持更改登录电子邮件与Auth0
- 我正在尝试将JS文件保存在Chrome覆盖文件的指定文件夹中，并且每当我按右键单击然后单击“保存为覆盖”时，该文件就不会保存在文件夹中。 \
- 以下反应组件之间有什么区别？ [重复]
- 我们如何在角度测试httpresource？ 我喜欢Angular的新httpresource，它做了很多我很久以来一直想要的事情。它确实可以使生活更轻松。 但是，我在用茉莉花测试httpresource时遇到麻烦...
- 如何在.NET应用程序中访问GCP Secret Manager，并配置了代理？ 我在Google Cloud Run上托管了一个.NET应用程序，需要访问GCP Secret Manager。我的应用程序可以正常工作，但是当我使用环境变量设置代理时（http ...
- 每个子图旁边的传说，python
- 将GhostPCL与图像转换为PDF
- 我有一个IoT中心和用Python编写的Azure函数应用程序。我希望Azure功能能够触发Hub收到的消息。
- 在运行Django测试之前，加载SQL转储
- 如何在我的React节点项目中添加自定义HLS依赖关系的正确方法？ 我想从https://github.com/video-dev/hls.js修改来源，然后将其添加到我的项目中。 我下载了https://github.com/video-dev/hls.js消息来源，进行了一些更改，并运行了NPM Run Build。 t ...
- 有人可以在MaxScript中解释struct定义内部的结构定义。
© www.soinside.com 2019 - 2025. All rights reserved.