145 lines
4.4 KiB
Dart
145 lines
4.4 KiB
Dart
import 'dart:ui';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'outlined_text.dart';
|
|
|
|
class GlassAppBar extends StatelessWidget implements PreferredSizeWidget {
|
|
final String title;
|
|
final String? subtitle;
|
|
final List<Widget>? actions;
|
|
final Widget? leading;
|
|
final double height;
|
|
final Color glassColor;
|
|
final double blurSigma;
|
|
final double borderOpacity;
|
|
|
|
const GlassAppBar({
|
|
super.key,
|
|
required this.title,
|
|
this.subtitle,
|
|
this.actions,
|
|
this.leading,
|
|
this.height = 80,
|
|
this.glassColor = const Color(0x22FFFFFF),
|
|
this.blurSigma = 18,
|
|
this.borderOpacity = 0.25,
|
|
});
|
|
|
|
@override
|
|
Size get preferredSize => Size.fromHeight(height);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final theme = Theme.of(context);
|
|
|
|
return ClipRect(
|
|
child: BackdropFilter(
|
|
filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
|
|
child: Container(
|
|
height: height,
|
|
decoration: BoxDecoration(
|
|
color: glassColor,
|
|
border: Border(
|
|
bottom: BorderSide(
|
|
color: Colors.white.withValues(alpha: borderOpacity),
|
|
width: 1,
|
|
),
|
|
),
|
|
),
|
|
child: SafeArea(
|
|
bottom: false,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
if (leading != null) ...[leading!, const SizedBox(width: 12)],
|
|
Expanded(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
OutlinedText(
|
|
title,
|
|
style: theme.textTheme.headlineSmall!.copyWith(
|
|
fontWeight: FontWeight.w900,
|
|
letterSpacing: 0.8,
|
|
fontSize: 26,
|
|
),
|
|
fillColor: Colors.white,
|
|
strokeColor: Colors.black,
|
|
strokeWidth: 2.5,
|
|
),
|
|
if (subtitle != null) ...[
|
|
const SizedBox(height: 3),
|
|
OutlinedText(
|
|
subtitle!,
|
|
style: theme.textTheme.bodyMedium!.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
letterSpacing: 0.4,
|
|
),
|
|
fillColor: Colors.white.withValues(alpha: 0.95),
|
|
strokeColor: Colors.black,
|
|
strokeWidth: 1.5,
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
if (actions != null)
|
|
Row(mainAxisSize: MainAxisSize.min, children: actions!),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Ein Icon-Button im Glas-Stil, passend zur GlassAppBar.
|
|
class GlassIconButton extends StatelessWidget {
|
|
final IconData icon;
|
|
final VoidCallback? onPressed;
|
|
final String? tooltip;
|
|
final Color? color;
|
|
|
|
const GlassIconButton({
|
|
super.key,
|
|
required this.icon,
|
|
this.onPressed,
|
|
this.tooltip,
|
|
this.color,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final iconColor =
|
|
color ??
|
|
Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.85);
|
|
return Tooltip(
|
|
message: tooltip ?? '',
|
|
child: InkWell(
|
|
onTap: onPressed,
|
|
borderRadius: BorderRadius.circular(50),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(50),
|
|
child: BackdropFilter(
|
|
filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withValues(alpha: 0.12),
|
|
shape: BoxShape.circle,
|
|
border: Border.all(color: Colors.white.withValues(alpha: 0.25)),
|
|
),
|
|
child: Icon(icon, color: iconColor, size: 22),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|