optimizing footer optics by unifying icon and text size

This commit is contained in:
Constantin Leue
2026-08-04 16:08:45 +02:00
parent 1a17fe5b36
commit 75736793f2
+51 -23
View File
@@ -27,6 +27,17 @@ const _footerElementHeight = 36.0;
/// Drohnen-Pille), an anderen Stellen war er fest auf 6px verdrahtet. /// Drohnen-Pille), an anderen Stellen war er fest auf 6px verdrahtet.
const _footerElementSpacing = 8.0; const _footerElementSpacing = 8.0;
/// Einheitliche Icon-/Textgroesse und Schriftgewicht fuer alle Pillen und
/// Knoepfe der Fusszeile (Doku: "text und symbol hoehe in allen pillen und
/// buttons der fusszeile genau so machen wie in der neuen drone pille.
/// einheitliche schriftart und gewicht verwenden") - uebernommen von der
/// zuvor eigens dafuer eingefuehrten Drohnen-Status-Pille. Eine eigene
/// Schriftart wird nicht gesetzt, alle Texte hier verwenden bereits ohne
/// explizites fontFamily das App-Theme, sind also schon einheitlich.
const _footerIconSize = 20.0;
const _footerFontSize = 14.0;
const _footerFontWeight = FontWeight.w600;
/// Statuszeile am unteren Bildschirmrand (HTML-Demonstrator: #bottomBar/ /// Statuszeile am unteren Bildschirmrand (HTML-Demonstrator: #bottomBar/
/// #statsRow). Details-Pille bleibt mittig und oeffnet die Wegpunktliste; /// #statsRow). Details-Pille bleibt mittig und oeffnet die Wegpunktliste;
/// Mission-Chip links und Drohnen-Chip rechts oeffnen das Verwaltungsmenue /// Mission-Chip links und Drohnen-Chip rechts oeffnen das Verwaltungsmenue
@@ -225,25 +236,37 @@ class BottomStatsBar extends ConsumerWidget {
'Details:', 'Details:',
style: TextStyle( style: TextStyle(
color: Colors.white70, color: Colors.white70,
fontWeight: FontWeight.w600, fontWeight: _footerFontWeight,
fontSize: 14, fontSize: _footerFontSize,
), ),
), ),
const SizedBox(width: 10), const SizedBox(width: 10),
const Icon(Icons.flag, size: 14, color: Colors.white), const Icon(Icons.flag, size: _footerIconSize, color: Colors.white),
const SizedBox(width: 4), const SizedBox(width: 4),
Text(waypointText, Text(waypointText,
style: const TextStyle(color: Colors.white, fontSize: 14)), style: const TextStyle(
color: Colors.white,
fontSize: _footerFontSize,
fontWeight: _footerFontWeight,
)),
const SizedBox(width: 14), const SizedBox(width: 14),
const Icon(Icons.straighten, size: 14, color: Colors.white), const Icon(Icons.straighten, size: _footerIconSize, color: Colors.white),
const SizedBox(width: 4), const SizedBox(width: 4),
Text(distanceText, Text(distanceText,
style: const TextStyle(color: Colors.white, fontSize: 14)), style: const TextStyle(
color: Colors.white,
fontSize: _footerFontSize,
fontWeight: _footerFontWeight,
)),
const SizedBox(width: 14), const SizedBox(width: 14),
const Icon(Icons.access_time, size: 14, color: Colors.white), const Icon(Icons.access_time, size: _footerIconSize, color: Colors.white),
const SizedBox(width: 4), const SizedBox(width: 4),
Text(durationText, Text(durationText,
style: const TextStyle(color: Colors.white, fontSize: 14)), style: const TextStyle(
color: Colors.white,
fontSize: _footerFontSize,
fontWeight: _footerFontWeight,
)),
], ],
), ),
), ),
@@ -285,7 +308,7 @@ class _AltitudeProfileToggleButton extends StatelessWidget {
), ),
child: Center( child: Center(
child: MountainPeakIcon( child: MountainPeakIcon(
size: 16, size: _footerIconSize,
color: Colors.white, color: Colors.white,
upsideDown: isExpanded, upsideDown: isExpanded,
), ),
@@ -314,7 +337,7 @@ class _WarningButton extends StatelessWidget {
color: const Color(0xFFE2574A).withValues(alpha: 0.18), color: const Color(0xFFE2574A).withValues(alpha: 0.18),
border: Border.all(color: const Color(0xFFE2574A).withValues(alpha: 0.5)), border: Border.all(color: const Color(0xFFE2574A).withValues(alpha: 0.5)),
), ),
child: const Icon(Icons.warning_amber_rounded, color: Color(0xFFFFB3A8), size: 18), child: const Icon(Icons.warning_amber_rounded, color: Color(0xFFFFB3A8), size: _footerIconSize),
), ),
); );
} }
@@ -338,7 +361,7 @@ class _SettingsButton extends StatelessWidget {
shape: BoxShape.circle, shape: BoxShape.circle,
color: Colors.white.withValues(alpha: 0.12), color: Colors.white.withValues(alpha: 0.12),
), ),
child: const Icon(Icons.settings, color: Colors.white, size: 18), child: const Icon(Icons.settings, color: Colors.white, size: _footerIconSize),
), ),
); );
} }
@@ -414,22 +437,27 @@ class _DroneStatusPill extends StatelessWidget {
// anordnen") - unsere Standardform (dieselben Koordinaten // anordnen") - unsere Standardform (dieselben Koordinaten
// wie DroneMarkerIcon/DroneFollowIcon), hier einfarbig nach // wie DroneMarkerIcon/DroneFollowIcon), hier einfarbig nach
// Zustand statt der zweifarbigen/pinken Kartenmarker-Variante. // Zustand statt der zweifarbigen/pinken Kartenmarker-Variante.
PaperPlaneIcon(size: 15, color: stateColor), // Zustandstext folgt erst ganz am Ende hinter den beiden
const SizedBox(width: 4), // Qualitaets-Symbolen (Doku: "text fuer drone state als
// letztes hinter den symbolen anzeigen"). Icon-/Textgroessen
// an die Pillenhoehe angeglichen (Doku: "hoehe der pille
// besser ausnutzen") statt der vorher recht kleinen 12-15px.
PaperPlaneIcon(size: _footerIconSize, color: stateColor),
const SizedBox(width: 8),
Icon(Icons.signal_cellular_alt,
size: _footerIconSize, color: _signalColors[status.connectionQuality]),
const SizedBox(width: 8),
Icon(Icons.satellite_alt,
size: _footerIconSize, color: _signalColors[status.positionQuality]),
const SizedBox(width: 10),
Text( Text(
_stateLabels[status.state]!, _stateLabels[status.state]!,
style: TextStyle( style: TextStyle(
color: stateColor, color: stateColor,
fontWeight: FontWeight.w600, fontWeight: _footerFontWeight,
fontSize: 12, fontSize: _footerFontSize,
), ),
), ),
const SizedBox(width: 10),
Icon(Icons.signal_cellular_alt,
size: 15, color: _signalColors[status.connectionQuality]),
const SizedBox(width: 8),
Icon(Icons.satellite_alt,
size: 14, color: _signalColors[status.positionQuality]),
], ],
), ),
), ),
@@ -472,8 +500,8 @@ class _NameChip extends StatelessWidget {
maxLines: 1, maxLines: 1,
style: TextStyle( style: TextStyle(
color: textColor, color: textColor,
fontWeight: FontWeight.w600, fontWeight: _footerFontWeight,
fontSize: 12, fontSize: _footerFontSize,
), ),
), ),
), ),