Dialog Animation Migration Guide¶

Übersicht¶

Alle Dialoge im Projekt nutzen jetzt eine zentrale Animation (Scale + Fade Effekt) für ein einheitliches, professionelles Benutzererlebnis.

✅ Zentrale Lösung implementiert¶

Die Animation ist in packages/shared/lib/helpers/dialog_helper.dart zentral implementiert mit 3 Verwendungsmöglichkeiten:

1. `showAnimatedDialog()` - Drop-in Replacement (Empfohlen)¶

Ersetze einfach showDialog durch showAnimatedDialog:

// Vorher:
import 'package:flutter/material.dart';

showDialog(
  context: context,
  builder: (context) => MyDialog(),
);

// Nachher:
import 'package:shared/helpers/dialog_helper.dart';

showAnimatedDialog(
  context: context,
  builder: (context) => MyDialog(),
);

Vorteile: - Minimale Code-Änderung - Gleiche API wie showDialog - Automatische Animation

2. `context.showAnimatedDialog()` - Extension Method¶

Nutze die Extension für kürzere Syntax:

import 'package:shared/helpers/dialog_helper.dart';

context.showAnimatedDialog(
  builder: (context) => MyDialog(),
);

Vorteile: - Kürzeste Syntax - Kein context Parameter nötig - Automatische Animation

3. `showLocalizedDialog()` - Mit Lokalisierung¶

Für Dialoge mit Lokalisierungskontexten:

import 'package:shared/helpers/dialog_helper.dart';

showLocalizedDialog(
  context: context,
  builder: (context) => MyDialog(),
);

🎬 Animation Details¶

Die Animation verwendet: - Scale: Von 0.92 → 1.0 (leichter Zoom-Effekt) - Fade: Von 0.0 → 1.0 (Opacity-Übergang) - Duration: 250ms - Curve: easeOutCubic für Scale, easeOut für Fade

📦 Migrierte Dialoge (Beispiele)¶

Bereits migriert: - ✅ order_editor_dialog.dart - ✅ warning_dialog.dart - ✅ success_dialog.dart - ✅ create_article_dialog.dart - ✅ customer_feed_entry_editor_dialog.dart - ✅ question_dialog.dart

🔄 Migration für bestehende Dialoge¶

Schritt 1: Import hinzufügen¶

import 'package:shared/helpers/dialog_helper.dart';

Schritt 2: showDialog ersetzen¶

// Alter Code:
static Future<void> show(BuildContext context) {
  return showDialog(
    context: context,
    builder: (context) => MyDialog(),
  );
}

// Neuer Code:
static Future<void> show(BuildContext context) {
  return showAnimatedDialog(
    context: context,
    builder: (context) => MyDialog(),
  );
}

Schritt 3: Testen¶

Die Animation sollte automatisch funktionieren - keine weiteren Änderungen nötig!

🎯 Best Practices¶

Konsistenz: Nutze showAnimatedDialog für alle neuen Dialoge
Migration: Migriere alte Dialoge schrittweise
Extension: Nutze context.showAnimatedDialog() für neue Dialoge (kürzere Syntax)
Lokalisierung: Nutze showLocalizedDialog() wenn Lokalisierungskontext wichtig ist

📝 Alle Parameter von showAnimatedDialog¶

showAnimatedDialog<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  bool barrierDismissible = true,        // Dialog mit Tap außerhalb schließbar
  Color? barrierColor,                    // Background-Farbe (default: black54)
  String? barrierLabel,                   // Accessibility Label
  bool useSafeArea = true,                // SafeArea um Dialog
  bool useRootNavigator = true,           // Root Navigator nutzen
  RouteSettings? routeSettings,           // Route Settings
  Offset? anchorPoint,                    // Anchor Point für Animation
})

🔍 Dialoge finden die noch migriert werden müssen¶

# Suche nach direkten showDialog Aufrufen:
grep -r "showDialog(" apps/erp_system/lib/pages/

💡 Beispiel: Kompletter Dialog¶

import 'package:flutter/material.dart';
import 'package:shared/helpers/dialog_helper.dart';

class MyDialog extends StatelessWidget {
  const MyDialog({super.key});

  static Future<void> show(BuildContext context) {
    return showAnimatedDialog(
      context: context,
      builder: (context) => const MyDialog(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      child: Container(
        padding: const EdgeInsets.all(24),
        child: const Text('Hallo Welt!'),
      ),
    );
  }
}

🚀 Ergebnis¶

Alle Dialoge haben jetzt: - ✨ Professionelle Scale+Fade Animation - ⚡ Konsistentes Verhalten - 🎨 Einheitliches Look & Feel - 🔧 Zentral wartbar in dialog_helper.dart