Unify header pill/button height to 38px, matching the HTML prototype

Measured the prototype screenshot pixel-for-pixel: content pills take
up ~79% of the header's total height, matching its own CSS
(height:38px, topBarWrap padding:5px 10px -> 48px total). The Flutter
port had drifted to 34px for HeaderWindPill, MapSearchControls, and
NavIconButton, while FlightModePill was left at the original 38px -
so Fly mode looked inconsistent against itself, and both modes wasted
more header height as margin than the prototype does. Bringing all
four back to a shared 38px fixes both.
This commit is contained in:
Constantin Leue
2026-08-07 22:06:23 +02:00
parent 893429c548
commit 0d3dba2482
4 changed files with 18 additions and 7 deletions
+1 -1
View File
@@ -13,7 +13,7 @@ class DroneFollowIcon extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// NavIconButton zwingt seinem Kind straffe 34x34-Constraints auf - ohne // NavIconButton zwingt seinem Kind straffe 38x38-Constraints auf - ohne
// Center/SizedBox wuerde CustomPaint sein size-Argument ignorieren und // Center/SizedBox wuerde CustomPaint sein size-Argument ignorieren und
// auf die volle Knopfgroesse aufgeblasen (RenderCustomPaint hat anders // auf die volle Knopfgroesse aufgeblasen (RenderCustomPaint hat anders
// als Icon kein eingebautes Center, das die Constraints fuer sein Kind // als Icon kein eingebautes Center, das die Constraints fuer sein Kind
+6 -2
View File
@@ -19,13 +19,17 @@ class HeaderWindPill extends ConsumerWidget {
return GestureDetector( return GestureDetector(
onTap: () => ref.read(headerWindProvider.notifier).toggleShowPerWaypoint(), onTap: () => ref.read(headerWindProvider.notifier).toggleShowPerWaypoint(),
child: Container( child: Container(
height: 34, // 38 statt vorher 34 (Nutzerwunsch: Kopfleisten-Pillen/-Buttons
// einheitlich auf die im HTML-Demonstrator vermessene Hoehe bringen,
// siehe TopModeBar-Klassendoku) - deckungsgleich mit FlightModePill,
// das schon immer 38 nutzte.
height: 38,
padding: const EdgeInsets.symmetric(horizontal: 10), padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration( decoration: BoxDecoration(
color: active color: active
? const Color(0xFF4D9DFF).withValues(alpha: 0.32) ? const Color(0xFF4D9DFF).withValues(alpha: 0.32)
: Colors.black.withValues(alpha: 0.55), : Colors.black.withValues(alpha: 0.55),
borderRadius: BorderRadius.circular(17), borderRadius: BorderRadius.circular(19),
border: Border.all( border: Border.all(
color: active color: active
? const Color(0xFF4D9DFF) ? const Color(0xFF4D9DFF)
+5 -2
View File
@@ -89,11 +89,14 @@ class _MapSearchControlsState extends ConsumerState<MapSearchControls> {
children: [ children: [
Expanded( Expanded(
child: Container( child: Container(
height: 34, // 38 statt vorher 34, deckungsgleich mit HeaderWindPill/
// FlightModePill/NavIconButton (Nutzerwunsch: einheitliche
// Kopfleisten-Hoehe wie im HTML-Demonstrator vermessen).
height: 38,
padding: const EdgeInsets.only(left: 12, right: 4), padding: const EdgeInsets.only(left: 12, right: 4),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.55), color: Colors.black.withValues(alpha: 0.55),
borderRadius: BorderRadius.circular(17), borderRadius: BorderRadius.circular(19),
), ),
child: Row( child: Row(
children: [ children: [
+6 -2
View File
@@ -28,8 +28,12 @@ class NavIconButton extends StatelessWidget {
return GestureDetector( return GestureDetector(
onTap: onTap, onTap: onTap,
child: Container( child: Container(
width: 34, // 38 statt vorher 34, deckungsgleich mit HeaderWindPill/
height: 34, // MapSearchControls/FlightModePill (Nutzerwunsch: einheitliche
// Kopfleisten-Hoehe wie im HTML-Demonstrator vermessen: #homeBtn/
// #fitBtn nutzen dort ebenfalls width/height:38px).
width: 38,
height: 38,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
color: Colors.black.withValues(alpha: 0.55), color: Colors.black.withValues(alpha: 0.55),