رسوم Rive المتحركة: الرسوم التفاعلية بآلة الحالة

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  rive: ^0.13.0          # استخدم أحدث إصدار مستقر

flutter:
  assets:
    - assets/animations/button.riv

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';

class RiveButtonDemo extends StatefulWidget {
  const RiveButtonDemo({super.key});

  @override
  State<RiveButtonDemo> createState() => _RiveButtonDemoState();
}

class _RiveButtonDemoState extends State<RiveButtonDemo> {
  // مرجع اللوحة الفنية المستخدمة بواسطة RiveAnimation.direct
  Artboard? _artboard;

  // المدخلات المسترجعة من آلة الحالة
  SMITrigger? _pressTrigger;
  SMIBool? _isHovered;

  @override
  void initState() {
    super.initState();
    _loadRive();
  }

  Future<void> _loadRive() async {
    // 1. قراءة بايتات الأصل
    final data = await rootBundle.load('assets/animations/button.riv');

    // 2. تحليل ملف Rive
    final file = RiveFile.import(data);

    // 3. الحصول على اللوحة الفنية الافتراضية (أو المسماة)
    final artboard = file.mainArtboard;

    // 4. إيجاد آلة الحالة بالاسم وربطها
    final controller = StateMachineController.fromArtboard(
      artboard,
      'ButtonMachine',       // يجب أن يطابق الاسم في محرر Rive
      onStateChange: _onStateChange,
    );

    if (controller != null) {
      artboard.addController(controller);

      // 5. تخزين المدخلات مؤقتاً لتشغيلها لاحقاً
      _pressTrigger = controller.findInput<SMITrigger>('Press');
      _isHovered    = controller.findInput<SMIBool>('Hovered');
    }

    // 6. تشغيل إعادة البناء مع اللوحة الفنية المحملة
    setState(() => _artboard = artboard);
  }

  void _onStateChange(String machineName, String stateName) {
    debugPrint('آلة الحالة "$machineName" دخلت الحالة "$stateName"');
  }

  @override
  Widget build(BuildContext context) {
    if (_artboard == null) return const CircularProgressIndicator();

    return GestureDetector(
      onTapDown: (_) => _pressTrigger?.fire(),
      onTapUp:   (_) => _isHovered?.value = false,
      child: SizedBox(
        width: 200,
        height: 80,
        child: RiveAnimation.direct(_artboard!),
      ),
    );
  }
}

class RiveToggle extends StatefulWidget {
  const RiveToggle({super.key});

  @override
  State<RiveToggle> createState() => _RiveToggleState();
}

class _RiveToggleState extends State<RiveToggle> {
  Artboard? _artboard;
  SMIBool? _isOn;

  @override
  void initState() {
    super.initState();
    _init();
  }

  Future<void> _init() async {
    final bytes = await rootBundle.load('assets/animations/toggle.riv');
    final file  = RiveFile.import(bytes);
    final board = file.mainArtboard;

    final ctrl = StateMachineController.fromArtboard(board, 'ToggleMachine');
    if (ctrl != null) {
      board.addController(ctrl);
      _isOn = ctrl.findInput<SMIBool>('IsOn');
    }
    setState(() => _artboard = board);
  }

  void _toggle() {
    if (_isOn != null) {
      _isOn!.value = !_isOn!.value;   // قلب قيمة المدخل المنطقي
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_artboard == null) {
      return const SizedBox(width: 80, height: 40);
    }
    return GestureDetector(
      onTap: _toggle,
      child: SizedBox(
        width: 80,
        height: 40,
        child: RiveAnimation.direct(_artboard!),
      ),
    );
  }
}