web_flutter_tank_appwrite_app/GETX_GEOLOCATION_README.md

4.8 KiB

GetX Geolocation Implementation

Diese Implementation zeigt, wie die Geolocation-Funktionalität mit GetX State Management umgesetzt wird.

📂 Struktur

lib/
├── controllers/
│   ├── geolocation_controller.dart           # Basis Controller
│   └── geolocation_advanced_controller.dart  # Erweiterte Controller mit Statistiken
├── bindings/
│   └── geolocation_binding.dart              # Dependency Injection
├── routes/
│   └── app_routes.dart                       # Navigation & Routen
├── pages/examples/
│   └── geolocation_example.dart              # GetX View (UI)
├── services/
│   └── geolocation.dart                      # Static Service Layer
└── utils/
    └── geo_utils.dart                        # Geo Utility Funktionen

🎯 Features

GeolocationController (Basis)

  • Reactive State Management mit GetX
  • Einmalige Positionsabfrage
  • Kontinuierliches Position Tracking
  • Permission Management
  • Automatische Snackbar Notifications
  • Loading States
  • Error Handling

GeolocationAdvancedController (Erweitert)

  • Alle Basis-Features
  • Tracking-Statistiken (Distanz, Geschwindigkeit)
  • Position History
  • Track Duration Timer
  • Data Export Funktionalität
  • Track Center & Bounds Berechnung

🔧 Verwendung

1. Basis Controller verwenden

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = Get.put(GeolocationController());
    
    return Scaffold(
      body: Obx(() => Column(
        children: [
          Text(controller.statusText),
          if (controller.hasPosition)
            Text('Lat: ${controller.currentPosition!.latitude}'),
          ElevatedButton(
            onPressed: controller.getCurrentPosition,
            child: Text('Position abrufen'),
          ),
        ],
      )),
    );
  }
}

2. Mit Bindings (Empfohlen)

// In app_routes.dart
GetPage(
  name: '/geolocation',
  page: () => GeolocationExample(),
  binding: GeolocationBinding(),
),

// Navigation
Get.toNamed('/geolocation');

3. Controller Methoden

final controller = Get.find<GeolocationController>();

// Position abrufen
await controller.getCurrentPosition();

// Tracking starten/stoppen
await controller.toggleTracking();

// Permissions prüfen
await controller.checkPermissions();

// Einstellungen öffnen
await controller.openLocationSettings();
await controller.openAppSettings();

// Reset
controller.reset();

📱 UI Features

Reactive UI Components

  • Status Card mit Loading-Indikator
  • Position Details Card (nur wenn Position verfügbar)
  • Tracking Badge
  • Icon-basierte Action Buttons
  • Responsive Layout

Beispiel Obx() Usage

Obx(() => controller.isLoading
  ? CircularProgressIndicator()
  : Text(controller.statusText)
)

🎨 GetX Pattern

Controller Pattern

class GeolocationController extends GetxController {
  // Reactive Variables
  final _isTracking = false.obs;
  
  // Getter
  bool get isTracking => _isTracking.value;
  
  // Methods
  void startTracking() {
    _isTracking.value = true;
  }
}

View Pattern

class GeolocationView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = Get.put(GeolocationController());
    
    return Obx(() => 
      // Reactive UI hier
    );
  }
}

🚀 Migration von StatefulWidget

Vorher (StatefulWidget)

class _MyPageState extends State<MyPage> {
  bool _isTracking = false;
  
  void _startTracking() {
    setState(() {
      _isTracking = true;
    });
  }
}

Nachher (GetX)

class MyController extends GetxController {
  final _isTracking = false.obs;
  bool get isTracking => _isTracking.value;
  
  void startTracking() {
    _isTracking.value = true; // Automatisches UI Update
  }
}

📋 Vorteile der GetX Implementation

  1. Weniger Boilerplate: Kein setState() nötig
  2. Automatische Lifecycle: Controller wird automatisch disposed
  3. Reactive UI: Obx() updated automatisch bei Änderungen
  4. Dependency Injection: Saubere Trennung von Logic und UI
  5. Navigation: Einfache Navigation mit Get.to()
  6. Snackbars: Integrierte Notification System
  7. Performance: Nur betroffene Widgets werden rebuilt

🔄 Lifecycle

onInit()  onReady()  onClose()
  • onInit(): Initialisierung
  • onReady(): Nach dem ersten build
  • onClose(): Cleanup (automatisch)

📝 Beispiel Integration

// main.dart
void main() {
  runApp(GetMaterialApp(
    home: GeolocationExample(),
    initialBinding: GeolocationBinding(),
  ));
}

Die GetX Implementation bietet eine moderne, reaktive und performante Lösung für Geolocation State Management in Flutter!