Add per-waypoint wind markers on the map

Vervollstaendigt den in der letzten Session zurueckgestellten Teil des
Wind-Features (Doku 3.8): die Kopfleisten-Pille toggelt jetzt tatsaechlich
sichtbare Wind-Marker an jedem Wegpunkt, statt nur ihren eigenen Zustand
zu halten (HTML-Demonstrator: showPerWaypointWind steuerte im Original
direkt die divIcon-Marker in redrawMapLayers()).

WindMarkerPill (neuer Widget) zeigt Richtungspfeil + Geschwindigkeit in
einer kleinen dunklen Pille. MissionMap bekommt dafuer einen eigenen
windMarkers-Parameter (flutter_map MarkerLayer, gesondert von den
bestehenden CircleMarker-Wegpunkten, da MarkerLayer echte Widgets statt
nur CustomPaint-Kreise rendert). PlanScreen baut die Liste aus
ref.watch(headerWindProvider).showPerWaypoint plus den bereits per
"Fetch wind" geladenen Wegpunkt-Winddaten.

Zwei Dinge beim Verifizieren gefunden und gefixt:
- Marker-Groesse (width/height) war zu knapp bemessen und liess die
  Pille per RenderFlex-Overflow abschneiden - vergroessert und die
  Verankerung entsprechend angepasst.
- Der neue Widget-Test placierte den Test-Wegpunkt zunaechst ausserhalb
  des sichtbaren Kartenausschnitts: anders als CircleLayer rendert
  flutter_map's MarkerLayer nur Marker innerhalb der aktuellen Viewport-
  Bounds. Wegpunkt jetzt am Kartenzentrum (MissionMap._initialCenter)
  platziert.

Verifiziert: flutter analyze (0 issues), flutter test (45/45, ein neuer
Test fuer Marker-Sichtbarkeit vor/nach Antippen der Pille), manuell auf
Pixel_10a-Emulator - drei Wegpunkte mit geladenem Wind zeigen nach
Antippen der Pille je eine Wind-Anzeige, verschwinden beim erneuten
Antippen wieder.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Constantin Leue
2026-07-28 13:45:15 +02:00
co-authored by Claude Sonnet 5
parent 1b13c45cac
commit ed333229c1
4 changed files with 106 additions and 0 deletions
+17
View File
@@ -19,6 +19,7 @@ import '../../widgets/mission_map.dart';
import '../../widgets/reticle_button.dart'; import '../../widgets/reticle_button.dart';
import '../../widgets/value_wheel.dart'; import '../../widgets/value_wheel.dart';
import '../../widgets/waypoint_list_panel.dart'; import '../../widgets/waypoint_list_panel.dart';
import '../../widgets/wind_marker_pill.dart';
/// Reticle-Zustand (HTML-Demonstrator: Variable `mode`). /// Reticle-Zustand (HTML-Demonstrator: Variable `mode`).
/// idle: kein Wegpunkt in der Naehe, Tap legt einen neuen an. /// idle: kein Wegpunkt in der Naehe, Tap legt einen neuen an.
@@ -323,6 +324,7 @@ class _PlanScreenState extends ConsumerState<PlanScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final waypoints = ref.watch(currentMissionProvider); final waypoints = ref.watch(currentMissionProvider);
final showPerWaypointWind = ref.watch(headerWindProvider).showPerWaypoint;
final routeGeometry = buildRouteGeometry( final routeGeometry = buildRouteGeometry(
waypoints, waypoints,
@@ -376,6 +378,21 @@ class _PlanScreenState extends ConsumerState<PlanScreen> {
routeGeometry.vertexBad[i], routeGeometry.vertexBad[i],
), ),
], ],
windMarkers: [
if (showPerWaypointWind)
for (final wp in waypoints)
if (wp.windSpeedMs != null && wp.windDirFromDeg != null)
Marker(
point: LatLng(wp.lat, wp.lon),
width: 100,
height: 26,
alignment: const Alignment(1.0, -1.4),
child: WindMarkerPill(
speedMs: wp.windSpeedMs!,
dirFromDeg: wp.windDirFromDeg!,
),
),
],
), ),
if (_mode == _ReticleMode.editing && targetWaypoint != null) if (_mode == _ReticleMode.editing && targetWaypoint != null)
Align( Align(
+7
View File
@@ -12,6 +12,7 @@ class MissionMap extends StatelessWidget {
super.key, super.key,
this.mapController, this.mapController,
this.waypointMarkers = const [], this.waypointMarkers = const [],
this.windMarkers = const [],
this.routeSegments = const [], this.routeSegments = const [],
this.rubberBandLine, this.rubberBandLine,
this.onMapReady, this.onMapReady,
@@ -22,6 +23,11 @@ class MissionMap extends StatelessWidget {
/// Kreis-Marker fuer die Wegpunkte der aktuellen Mission (Doku 3.7). /// Kreis-Marker fuer die Wegpunkte der aktuellen Mission (Doku 3.7).
final List<CircleMarker> waypointMarkers; final List<CircleMarker> waypointMarkers;
/// Wind-Anzeigen je Wegpunkt (Doku 3.8), nur befuellt wenn die
/// Kopfleisten-Pille aktiv ist und fuer den jeweiligen Wegpunkt Wind
/// geladen wurde (HTML-Demonstrator: showPerWaypointWind).
final List<Marker> windMarkers;
/// Geraden + Kreisbogen-Segmente des Flugpfads (Doku 3.7/4.6); rot /// Geraden + Kreisbogen-Segmente des Flugpfads (Doku 3.7/4.6); rot
/// markierte Segmente ueberschreiten Steig-/Sinkrate oder Kurvenradius. /// markierte Segmente ueberschreiten Steig-/Sinkrate oder Kurvenradius.
final List<RouteSegment> routeSegments; final List<RouteSegment> routeSegments;
@@ -72,6 +78,7 @@ class MissionMap extends StatelessWidget {
], ],
), ),
CircleLayer(circles: waypointMarkers), CircleLayer(circles: waypointMarkers),
MarkerLayer(markers: windMarkers),
const _CompactAttribution(), const _CompactAttribution(),
], ],
); );
+40
View File
@@ -0,0 +1,40 @@
import 'package:flutter/material.dart';
import 'wind_arrow_icon.dart';
/// Kleine Wind-Anzeige direkt an einem Wegpunkt auf der Karte (HTML-
/// Demonstrator: divIcon in redrawMapLayers(), sichtbar wenn
/// showPerWaypointWind aktiv ist und fuer den Wegpunkt Wind geladen wurde).
class WindMarkerPill extends StatelessWidget {
const WindMarkerPill({
super.key,
required this.speedMs,
required this.dirFromDeg,
});
final double speedMs;
final double dirFromDeg;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 2),
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.82),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.white.withValues(alpha: 0.4)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
WindArrowIcon(dirFromDeg: dirFromDeg, size: 15),
const SizedBox(width: 4),
Text(
'${speedMs.round()} m/s',
style: const TextStyle(color: Colors.white, fontSize: 11),
),
],
),
);
}
}
+42
View File
@@ -10,11 +10,13 @@ import 'package:dmc_app/ui/app_shell.dart';
import 'package:dmc_app/ui/providers/current_mission_provider.dart'; import 'package:dmc_app/ui/providers/current_mission_provider.dart';
import 'package:dmc_app/ui/widgets/full_value_chart.dart'; import 'package:dmc_app/ui/widgets/full_value_chart.dart';
import 'package:dmc_app/ui/widgets/halo_menu.dart'; import 'package:dmc_app/ui/widgets/halo_menu.dart';
import 'package:dmc_app/ui/widgets/header_wind_pill.dart';
import 'package:dmc_app/ui/widgets/map_search_controls.dart'; import 'package:dmc_app/ui/widgets/map_search_controls.dart';
import 'package:dmc_app/ui/providers/map_controller_provider.dart'; import 'package:dmc_app/ui/providers/map_controller_provider.dart';
import 'package:dmc_app/ui/widgets/reticle_button.dart'; import 'package:dmc_app/ui/widgets/reticle_button.dart';
import 'package:dmc_app/ui/widgets/waypoint_chip.dart'; import 'package:dmc_app/ui/widgets/waypoint_chip.dart';
import 'package:dmc_app/ui/widgets/waypoint_list_panel.dart'; import 'package:dmc_app/ui/widgets/waypoint_list_panel.dart';
import 'package:dmc_app/ui/widgets/wind_marker_pill.dart';
import 'package:latlong2/latlong.dart'; import 'package:latlong2/latlong.dart';
Widget _wrap(Widget child) => ProviderScope( Widget _wrap(Widget child) => ProviderScope(
@@ -470,4 +472,44 @@ void main() {
final listView = tester.widget<ListView>(find.byType(ListView)); final listView = tester.widget<ListView>(find.byType(ListView));
expect(listView.controller!.offset, greaterThan(0)); expect(listView.controller!.offset, greaterThan(0));
}); });
testWidgets(
'Wind-Marker an Wegpunkten erscheinen erst nach Antippen der Kopfleisten-Pille',
(tester) async {
final container = ProviderContainer();
addTearDown(container.dispose);
// Am Kartenzentrum platziert (siehe MissionMap._initialCenter), damit
// der Marker nicht ausserhalb des sichtbaren Kartenausschnitts liegt -
// flutter_map's MarkerLayer rendert (anders als CircleLayer) nur
// Marker innerhalb der aktuellen Viewport-Bounds.
container.read(currentMissionProvider.notifier).addWaypoint(const Waypoint(
lat: 52.3676,
lon: 4.9041,
altitudeM: 60,
speedMs: 15,
catchRadiusM: 60,
windSpeedMs: 5,
windDirFromDeg: 300,
windElevationM: 2,
));
await tester.pumpWidget(
UncontrolledProviderScope(
container: container,
child: BlocProvider(
create: (_) => AppModeCubit(),
child: const MaterialApp(home: AppShell()),
),
),
);
await tester.pump();
expect(find.byType(WindMarkerPill), findsNothing);
await tester.tap(find.byType(HeaderWindPill));
await tester.pump();
expect(find.byType(WindMarkerPill), findsOneWidget);
});
} }