ssbg04/TIS_RMS
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): smooth out sharp edges of top and bottom blur overlays on dashboard using ShaderMask

Browse Source
This commit is contained in:
ssbg04 committed 2026-08-05 18:34:17 +08:00
1 parent e443f8d338
commit be2f223439
2 files changed
+103 -82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/AGENTS.md
+2 -3
View File
@@ -92,9 +92,8 @@ Files backup/restore - mirror mode or zip -->
- make the navigation bar and screen header dark color theme lighter than the backdrop
# DASHBOARD SCREEN
- section of search icon, notification icon, profile icon
- remove the underline color in border, make the blur effect at top weak bottom half the top half is stronger
- add blur effect too in bottom, weak top half stronger bottom half
- section of search icon, notification icon, profile icon blur effect top and bottom
- fix that blur effect sharp edges of border
---
frontend/lib/ui/screens/dashboard/dashboard_screen.dart
+101 -79
View File
@@ -369,23 +369,34 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
left: 0,
right: 0,
height: 60,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: isDark
? [
AppColors.darkPageBackground.withValues(alpha: 0.0),
AppColors.darkPageBackground.withValues(alpha: 0.85),
]
: [
Colors.white.withOpacity(0.0),
Colors.white.withOpacity(0.85),
],
child: ShaderMask(
shaderCallback: (rect) {
return const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.transparent, Colors.black],
stops: [0.0, 0.4],
).createShader(rect);
},
blendMode: BlendMode.dstIn,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: isDark
? [
AppColors.darkPageBackground.withValues(alpha: 0.0),
AppColors.darkPageBackground.withValues(alpha: 0.85),
]
: [
Colors.white.withOpacity(0.0),
Colors.white.withOpacity(0.85),
],
),
),
),
),
@@ -734,73 +745,84 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
final isDark = Theme.of(context).brightness == Brightness.dark;
return ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: isDark
? [
AppColors.darkPageBackground.withValues(alpha: 0.85),
AppColors.darkPageBackground.withValues(alpha: 0.15),
]
: [
Colors.white.withOpacity(0.85),
Colors.white.withOpacity(0.15),
],
return ShaderMask(
shaderCallback: (rect) {
return const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.black, Colors.transparent],
stops: [0.6, 1.0],
).createShader(rect);
},
blendMode: BlendMode.dstIn,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: isDark
? [
AppColors.darkPageBackground.withValues(alpha: 0.85),
AppColors.darkPageBackground.withValues(alpha: 0.15),
]
: [
Colors.white.withOpacity(0.85),
Colors.white.withOpacity(0.15),
],
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Spacer(),
Row(
children: [
IconButton(
icon: const Icon(Icons.search, size: 32),
tooltip: 'Search Students',
onPressed: () => _showSearchDialog(context),
),
const SizedBox(width: 8),
Builder(
builder: (ctx) => Stack(
children: [
IconButton(
icon: const Icon(Icons.notifications, size: 32),
onPressed: () => _showNotifications(ctx),
),
if (unreadCount > 0)
Positioned(
right: 8,
top: 8,
child: Container(
padding: const EdgeInsets.all(4),
decoration: const BoxDecoration(
color: Colors.redAccent,
shape: BoxShape.circle,
),
child: Text(
unreadCount.toString(),
style: const TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.bold,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Spacer(),
Row(
children: [
IconButton(
icon: const Icon(Icons.search, size: 32),
tooltip: 'Search Students',
onPressed: () => _showSearchDialog(context),
),
const SizedBox(width: 8),
Builder(
builder: (ctx) => Stack(
children: [
IconButton(
icon: const Icon(Icons.notifications, size: 32),
onPressed: () => _showNotifications(ctx),
),
if (unreadCount > 0)
Positioned(
right: 8,
top: 8,
child: Container(
padding: const EdgeInsets.all(4),
decoration: const BoxDecoration(
color: Colors.redAccent,
shape: BoxShape.circle,
),
child: Text(
unreadCount.toString(),
style: const TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
],
),
),
),
const SizedBox(width: 16),
ProfileDropdownMenu(user: user, onRefresh: _handleRefresh),
],
),
],
const SizedBox(width: 16),
ProfileDropdownMenu(user: user, onRefresh: _handleRefresh),
],
),
],
),
),
),
),