feat(chart): interactive zoom/pan controls, pattern overlays, predictions, individual pattern filtering and landscape fullscreen mode

2026-08-15 01:03:57 +02:00
parent 1ccb6b613f
commit 5a6a50a609
12 changed files with 1501 additions and 1165 deletions
@@ -0,0 +1,177 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import '../../../core/theme/app_theme.dart';
+import '../bloc/technical/asset_technical_bloc.dart';
+import '../bloc/technical/asset_technical_event.dart';
+import '../bloc/technical/asset_technical_state.dart';
+import '../widgets/chart/candlestick_chart.dart';
+import '../widgets/technical/indicator_ribbon_bar.dart';
+
+class FullscreenChartScreen extends StatefulWidget {
+  final String isin;
+  final String? symbol;
+  final AssetTechnicalBloc technicalBloc;
+
+  const FullscreenChartScreen({
+    super.key,
+    required this.isin,
+    this.symbol,
+    required this.technicalBloc,
+  });
+
+  static Future<void> open(BuildContext context, {required String isin, String? symbol}) {
+    final bloc = context.read<AssetTechnicalBloc>();
+    return Navigator.of(context).push(
+      PageRouteBuilder(
+        opaque: true,
+        pageBuilder: (ctx, anim, secAnim) => FullscreenChartScreen(
+          isin: isin,
+          symbol: symbol,
+          technicalBloc: bloc,
+        ),
+        transitionsBuilder: (ctx, anim, secAnim, child) {
+          return FadeTransition(opacity: anim, child: child);
+        },
+      ),
+    );
+  }
+
+  @override
+  State<FullscreenChartScreen> createState() => _FullscreenChartScreenState();
+}
+
+class _FullscreenChartScreenState extends State<FullscreenChartScreen> {
+  @override
+  void initState() {
+    super.initState();
+    // Rotate to landscape on mobile devices
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.landscapeLeft,
+      DeviceOrientation.landscapeRight,
+    ]);
+    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
+  }
+
+  @override
+  void dispose() {
+    // Restore orientation back to default portrait/auto
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.portraitUp,
+      DeviceOrientation.portraitDown,
+      DeviceOrientation.landscapeLeft,
+      DeviceOrientation.landscapeRight,
+    ]);
+    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = AppTheme.activePreset;
+
+    return BlocProvider.value(
+      value: widget.technicalBloc,
+      child: Scaffold(
+        backgroundColor: theme.darkBackground,
+        body: SafeArea(
+          child: BlocBuilder<AssetTechnicalBloc, AssetTechnicalState>(
+            builder: (context, state) {
+              if (state is AssetTechnicalLoading) {
+                return const Center(child: CircularProgressIndicator());
+              }
+
+              if (state is AssetTechnicalLoaded && state.data != null) {
+                final data = state.data!;
+                final activePatterns = <ChartPatternModel>[];
+                for (int i = 0; i < data.patterns.length; i++) {
+                  if (!state.disabledPatternIndices.contains(i)) {
+                    activePatterns.add(data.patterns[i]);
+                  }
+                }
+
+                return Column(
+                  children: [
+                    _buildHeader(context, theme, state),
+                    Expanded(
+                      child: LayoutBuilder(
+                        builder: (ctx, constraints) {
+                          return CandlestickChart(
+                            candles: data.candles,
+                            indicators: data.indicators,
+                            patterns: activePatterns,
+                            signals: data.signals,
+                            showSma50: state.showSma50,
+                            showSma200: state.showSma200,
+                            showEma: state.showEma,
+                            showPatterns: state.showPatterns,
+                            showSignals: state.showSignals,
+                            showSupertrend: state.showSupertrend,
+                            height: constraints.maxHeight,
+                            isFullscreen: true,
+                            onToggleFullscreen: () => Navigator.of(context).pop(),
+                          );
+                        },
+                      ),
+                    ),
+                  ],
+                );
+              }
+
+              return Center(
+                child: Text('Keine Chartdaten verfügbar', style: TextStyle(color: theme.textMuted)),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildHeader(BuildContext context, ThemePreset theme, AssetTechnicalLoaded state) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+      decoration: BoxDecoration(
+        color: theme.cardSurface,
+        border: Border(bottom: BorderSide(color: theme.glassBorder)),
+      ),
+      child: Row(
+        children: [
+          IconButton(
+            icon: const Icon(Icons.arrow_back, size: 20, color: Colors.white70),
+            tooltip: 'Zurück',
+            onPressed: () => Navigator.of(context).pop(),
+          ),
+          const SizedBox(width: 4),
+          Text(
+            widget.symbol ?? widget.isin,
+            style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 14),
+          ),
+          const SizedBox(width: 12),
+          Expanded(
+            child: IndicatorRibbonBar(
+              showSma50: state.showSma50,
+              showSma200: state.showSma200,
+              showEma: state.showEma,
+              showSupertrend: state.showSupertrend,
+              showPatterns: state.showPatterns,
+              showSignals: state.showSignals,
+              onToggleSma50: (v) => context.read<AssetTechnicalBloc>().add(ToggleIndicatorFilter(showSma50: v)),
+              onToggleSma200: (v) => context.read<AssetTechnicalBloc>().add(ToggleIndicatorFilter(showSma200: v)),
+              onToggleEma: (v) => context.read<AssetTechnicalBloc>().add(ToggleIndicatorFilter(showEma: v)),
+              onToggleSupertrend: (v) => context.read<AssetTechnicalBloc>().add(ToggleIndicatorFilter(showSupertrend: v)),
+              onTogglePatterns: (v) => context.read<AssetTechnicalBloc>().add(ToggleIndicatorFilter(showPatterns: v)),
+              onToggleSignals: (v) => context.read<AssetTechnicalBloc>().add(ToggleIndicatorFilter(showSignals: v)),
+            ),
+          ),
+          const SizedBox(width: 8),
+          IconButton(
+            icon: const Icon(Icons.fullscreen_exit, size: 22, color: Colors.white70),
+            tooltip: 'Vollbild beenden',
+            onPressed: () => Navigator.of(context).pop(),
+          ),
+        ],
+      ),
+    );
+  }
+}