implement draft blur navbar
This commit is contained in:
@@ -73,14 +73,59 @@ class _CustomNavigationBarState extends State<CustomNavigationBar>
|
|||||||
backgroundColor: CustomTheme.backgroundColor,
|
backgroundColor: CustomTheme.backgroundColor,
|
||||||
body: tabs[currentIndex],
|
body: tabs[currentIndex],
|
||||||
extendBody: true,
|
extendBody: true,
|
||||||
bottomNavigationBar: ClipRRect(
|
bottomNavigationBar: SizedBox(
|
||||||
child: BackdropFilter(
|
height: 70 + MediaQuery.of(context).padding.bottom,
|
||||||
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
|
child: Stack(
|
||||||
child: Container(
|
children: [
|
||||||
decoration: BoxDecoration(
|
// Dynamisch generierte Blur-Layer für ultra-smooth Übergang
|
||||||
color: CustomTheme.boxColor.withValues(alpha: 0.8),
|
...List.generate(35, (index) {
|
||||||
|
// Verwende kubische Kurve für noch natürlicheren, weicheren Übergang
|
||||||
|
final progress = index / 34.0; // 0.0 bis 1.0
|
||||||
|
final cubic = progress * progress * progress; // Kubische Kurve
|
||||||
|
final blurStrength = 0.5 + (cubic * 50.0); // Sehr sanft von 0.5 bis 50.5
|
||||||
|
|
||||||
|
// Höhe geht jetzt komplett von 100% bis 0% (ganz nach unten)
|
||||||
|
// Mit extra Dichte am unteren Ende für weicheren Übergang
|
||||||
|
final heightFactor = index < 25
|
||||||
|
? 1.0 - (progress * 0.7) // Erste 25 Layer: 100% bis 30%
|
||||||
|
: 0.3 - ((index - 25) / 34.0); // Letzte 10 Layer: 30% bis 0% (dichter)
|
||||||
|
|
||||||
|
return Positioned(
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
height: (70 + MediaQuery.of(context).padding.bottom) * heightFactor.clamp(0.05, 1.0),
|
||||||
|
child: ClipRect(
|
||||||
|
child: BackdropFilter(
|
||||||
|
filter: ImageFilter.blur(
|
||||||
|
sigmaX: blurStrength,
|
||||||
|
sigmaY: blurStrength,
|
||||||
|
),
|
||||||
|
child: Container(
|
||||||
|
color: Colors.transparent,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
// Gradient-Overlay
|
||||||
|
Positioned.fill(
|
||||||
|
child: Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
gradient: LinearGradient(
|
||||||
|
begin: Alignment.bottomCenter,
|
||||||
|
end: Alignment.topCenter,
|
||||||
|
colors: [
|
||||||
|
CustomTheme.boxColor.withValues(alpha: 1),
|
||||||
|
CustomTheme.boxColor.withValues(alpha: 0.0),
|
||||||
|
],
|
||||||
|
stops: const [0.4, 1],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
child: SafeArea(
|
// Navbar-Inhalt
|
||||||
|
SafeArea(
|
||||||
child: SizedBox(
|
child: SizedBox(
|
||||||
height: 70,
|
height: 70,
|
||||||
child: Row(
|
child: Row(
|
||||||
@@ -118,7 +163,7 @@ class _CustomNavigationBarState extends State<CustomNavigationBar>
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user