halkyon-days/halkyon
Watch
1
0
Fork
You've already forked halkyon
 0
Code Issues Pull requests Projects Releases 37 Packages Wiki Activity Actions 1

feat(learn,todo,train,meditate,ui): the navigation bar flush with the foot, a fade above it

Browse source 
Below medium windows the frame's bar is Material 3 Expressive's again,
flush with the window's foot (decided 7 Nov 2026 by the developer): the
theme's NavigationBar across the whole width, 64 dp in its own colour,
running on beneath the system's bar as Material's does. Right above it a
fade 32 dp high, from the background of the screen in view (the
ScreenTint's, the theme's surface before a screen claims one) made
see-through to that background, so what scrolls on beneath the bar fades
out rather than being cut off; taps pass through it. The rail of wider
windows stays as it was.

halkyon_ui's FloatingNavigationBar becomes FlushNavigationBar, its side
margin, lift and rounded card gone. Its coverOf is now the whole room
content leaves at its end, the system's bar included (the body's bottom
padding: bar, fade and system's bar inside the frame, the system's bar
alone outside it), and floating buttons rise by buttonLiftOf, the same
without the system's bar, which a Scaffold keeps them clear of itself.
Lists, Todo's hour grid and the Plan's sheet keep using coverOf; the
Profile's list no longer adds the system's bar a second time.

Whats-New: The navigation bar sits at the bottom edge again, with a soft fade above it.
Whats-New-De: Die Navigationsleiste sitzt wieder am unteren Rand, mit einem sanften Übergang darüber.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Signed-off-by: Tizian 「ティツィアーン」 <raisondetredev@pm.me>
This commit is contained in:
Tizian 「ティツィアーン」 2026-11-08 00:04:18 +01:00
commit 05db5e2f45
Signed by: raisondetredev
GPG key ID: 07F6FCF405488B64
1 changed files with 425 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

194
packages/halkyon_ui/test/widget/navigation_frame_test.dart
View file

@ -6,7 +6,7 @@ import 'package:material_ui/material_ui.dart';
import '../support/test_app.dart';
/// Every Halkyon app's frame around its tabs: a rail with the app's icon
/// from medium windows on, a floating bar below, a tick on every choice.
/// from medium windows on, a flush bar below with a fade above it, a tick on every choice.
void main() {
/// A 1 × 1 PNG, the app's icon in these tests.
final icon = MemoryImage(
@ -74,16 +74,199 @@ void main() {
return haptics;
}
testWidgets('below medium windows, a bar floats above the foot', (
testWidgets('below medium windows, a bar stands at the foot', (
tester,
) async {
await show(tester, width: 400, chosen: []);
expect(find.byType(FloatingNavigationBar), findsOneWidget);
expect(find.byType(FlushNavigationBar), findsOneWidget);
expect(find.byType(NavigationRail), findsNothing);
expect(find.text('The tab'), findsOneWidget);
});
testWidgets('below medium windows, the bar is flush with the foot: as wide '
"as the window, 64 high above the system's bar, in the theme's colour", (
tester,
) async {
tester.view.padding = const FakeViewPadding(bottom: 24);
tester.view.viewPadding = const FakeViewPadding(bottom: 24);
await show(tester, width: 400, chosen: []);
final bar = find.byType(NavigationBar);
expect(
tester.getRect(bar),
const Rect.fromLTRB(0, 800 - 64 - 24, 400, 800),
);
expect(tester.widget<NavigationBar>(bar).backgroundColor, isNull);
expect(tester.widget<NavigationBar>(bar).elevation, isNull);
});
testWidgets('right above the bar, a fade into the background of the screen '
'in view, which taps pass through to the screen', (tester) async {
tester.view.padding = const FakeViewPadding(bottom: 24);
tester.view.viewPadding = const FakeViewPadding(bottom: 24);
tester.view.physicalSize = const Size(400, 800);
tester.view.devicePixelRatio = 1;
addTearDown(tester.view.reset);
var tapped = 0;
const background = Color(0xFFFFE4C4);
await tester.pumpWidget(
testApp(
NavigationFrame(
appName: 'Halkyon Test',
icon: icon,
selectedIndex: 0,
onSelected: (_) {},
destinations: const [
(label: 'Home', icon: Icon(Icons.home), selectedIcon: null),
(label: 'Maps', icon: Icon(Icons.map), selectedIcon: null),
],
child: TopGradient(
background: background,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => tapped++,
child: const SizedBox.expand(),
),
),
),
),
);
await tester.pumpAndSettle();
final fade = find.byKey(FlushNavigationBar.fadeKey);
final bar = tester.getRect(find.byType(NavigationBar));
expect(
tester.getRect(fade),
Rect.fromLTRB(0, bar.top - FlushNavigationBar.fadeHeight, 400, bar.top),
);
final gradient =
(tester.widget<DecoratedBox>(fade).decoration as BoxDecoration)
.gradient!
as LinearGradient;
expect(gradient.colors, [background.withValues(alpha: 0), background]);
await tester.tapAt(tester.getCenter(fade));
expect(tapped, 1);
});
testWidgets('before a screen claims its background, the fade ends in the '
"theme's surface, light and dark", (tester) async {
tester.view.physicalSize = const Size(400, 800);
tester.view.devicePixelRatio = 1;
addTearDown(tester.view.reset);
for (final brightness in Brightness.values) {
await tester.pumpWidget(
testApp(
brightness: brightness,
NavigationFrame(
appName: 'Halkyon Test',
icon: icon,
selectedIndex: 0,
onSelected: (_) {},
destinations: const [
(label: 'Home', icon: Icon(Icons.home), selectedIcon: null),
(label: 'Maps', icon: Icon(Icons.map), selectedIcon: null),
],
child: const Scaffold(body: Text('The tab')),
),
),
);
await tester.pumpAndSettle();
final fade = find.byKey(FlushNavigationBar.fadeKey);
final surface = Theme.of(tester.element(fade)).colorScheme.surface;
final gradient =
(tester.widget<DecoratedBox>(fade).decoration as BoxDecoration)
.gradient!
as LinearGradient;
expect(gradient.colors.last, surface, reason: '$brightness');
}
});
testWidgets("a tab's content leaves room for the bar, its fade and the "
"system's bar; its floating button rises above the fade, the Scaffold "
"keeping it clear of the system's bar itself", (tester) async {
tester.view.padding = const FakeViewPadding(bottom: 24);
tester.view.viewPadding = const FakeViewPadding(bottom: 24);
tester.view.physicalSize = const Size(400, 800);
tester.view.devicePixelRatio = 1;
addTearDown(tester.view.reset);
late double cover;
await tester.pumpWidget(
testApp(
NavigationFrame(
appName: 'Halkyon Test',
icon: icon,
selectedIndex: 0,
onSelected: (_) {},
destinations: const [
(label: 'Home', icon: Icon(Icons.home), selectedIcon: null),
(label: 'Maps', icon: Icon(Icons.map), selectedIcon: null),
],
child: Builder(
builder: (context) => Scaffold(
body: Builder(
builder: (context) {
cover = FlushNavigationBar.coverOf(context);
return const SizedBox.expand(key: Key('tab'));
},
),
floatingActionButton: Padding(
padding: EdgeInsets.only(
bottom: FlushNavigationBar.buttonLiftOf(context),
),
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
),
),
),
),
),
);
await tester.pumpAndSettle();
expect(cover, FlushNavigationBar.fadeHeight + 64 + 24);
expect(
tester.getBottomLeft(find.byKey(const Key('tab'))).dy,
800,
reason: 'the content runs on beneath the fade and the bar',
);
expect(
tester.getRect(find.byType(FloatingActionButton)).bottom,
tester.getRect(find.byKey(FlushNavigationBar.fadeKey)).top - 16,
);
});
testWidgets("outside the frame, content leaves room for the system's bar "
'alone', (tester) async {
tester.view.padding = const FakeViewPadding(bottom: 24);
tester.view.viewPadding = const FakeViewPadding(bottom: 24);
tester.view.physicalSize = const Size(400, 800);
tester.view.devicePixelRatio = 1;
addTearDown(tester.view.reset);
late double cover;
late double lift;
await tester.pumpWidget(
testApp(
Scaffold(
body: Builder(
builder: (context) {
cover = FlushNavigationBar.coverOf(context);
lift = FlushNavigationBar.buttonLiftOf(context);
return const SizedBox.expand();
},
),
),
),
);
expect(cover, 24);
expect(lift, 0);
});
testWidgets("from medium windows on, a rail with the app's icon on top, "
'which leads to the first tab', (tester) async {
final chosen = <int>[];
@ -130,7 +313,7 @@ void main() {
await tester.pumpAndSettle();
}
expect(find.byType(FloatingNavigationBar), findsOneWidget);
expect(find.byType(FlushNavigationBar), findsOneWidget);
expect(find.text('The tab'), findsOneWidget);
});
@ -139,6 +322,7 @@ void main() {
tester.view.physicalSize = const Size(400, 800);
tester.view.devicePixelRatio = 1;
tester.view.padding = const FakeViewPadding(bottom: 24);
tester.view.viewPadding = const FakeViewPadding(bottom: 24);
addTearDown(tester.view.reset);
await tester.pumpWidget(
testApp(
@ -157,7 +341,7 @@ void main() {
),
);
expect(find.byType(FloatingNavigationBar), findsNothing);
expect(find.byType(FlushNavigationBar), findsNothing);
expect(tester.getBottomLeft(find.byType(Scaffold).last).dy, 800 - 24);
});