Hướng dẫn sử dụng file Rive (.riv) trong Flutter cho người mới bắt đầu

flutter pub add rive

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

void main() async {
  // Bắt buộc phải có 2 dòng này
  WidgetsFlutterBinding.ensureInitialized();
  await RiveNative.init();

  runApp(const MyApp());
}

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

  @override
  State<SimpleRiveView> createState() => _SimpleRiveViewState();
}

class _SimpleRiveViewState extends State<SimpleRiveView> {
  late final FileLoader _fileLoader;

  @override
  void initState() {
    super.initState();
    // Tạo bộ nạp file từ asset
    _fileLoader = FileLoader.fromAsset(
      'assets/rive.riv',
      riveFactory: Factory.rive, // Dùng Rive GPU Renderer
    );
  }

  @override
  void dispose() {
    _fileLoader.dispose(); // Luôn giải phóng tài nguyên khi widget bị hủy
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 300,
      child: RiveWidgetBuilder(
        fileLoader: _fileLoader,
        builder: (context, state) => switch (state) {
          RiveLoading() => const Center(child: CircularProgressIndicator()),
          RiveFailed() => Center(child: Text('Lỗi: ${state.error}')),
          RiveLoaded() => RiveWidget(
              controller: state.controller,
              fit: Fit.contain,
            ),
        },
      ),
    );
  }
}

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await RiveNative.init();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const RiveControlPage(),
    );
  }
}

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

  @override
  State<RiveControlPage> createState() => _RiveControlPageState();
}

class _RiveControlPageState extends State<RiveControlPage> {
  File? _riveFile;
  RiveWidgetController? _controller;
  BooleanInput? _lidInput;
  bool _isLoading = true;
  bool _lidState = false; // Mặc định mở mắt

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

  Future<void> _loadAnimation() async {
    try {
      // 1. Tải file Rive từ asset
      final file = await File.asset(
        'assets/rive.riv',
        riveFactory: Factory.rive,
      );
      if (file == null) throw Exception('Không tìm thấy file asset');

      // 2. Tạo controller và lấy Boolean Input
      final controller = RiveWidgetController(file);
      // ignore: deprecated_member_use
      final lid = controller.stateMachine.boolean('lid');

      setState(() {
        _riveFile = file;
        _controller = controller;
        _lidInput = lid;
        _lidState = lid?.value ?? false;
        _isLoading = false;
      });
    } catch (e) {
      debugPrint('Lỗi: $e');
    }
  }

  void _updateLid(bool newValue) {
    if (_lidInput != null) {
      _lidInput!.value = newValue;
      setState(() {
        _lidState = newValue;
      });
    }
  }

  @override
  void dispose() {
    _lidInput?.dispose();
    _controller?.dispose();
    _riveFile?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final bool canOpen = _lidState; // Nếu đang nhắm (true) thì cho phép mở
    final bool canClose = !_lidState; // Nếu đang mở (false) thì cho phép đóng

    return Scaffold(
      appBar: AppBar(title: const Text('Rive Animation Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Khung hiển thị animation
            SizedBox(
              width: 300,
              height: 300,
              child: _isLoading
                  ? const CircularProgressIndicator()
                  : RiveWidget(
                      controller: _controller!,
                      fit: Fit.contain,
                    ),
            ),
            const SizedBox(height: 20),
            // Trạng thái hiện tại
            Text(
              _lidState ? 'Mắt đang: Nhắm (true)' : 'Mắt đang: Mở (false)',
              style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            // Các nút điều khiển
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FilledButton(
                  onPressed: canOpen ? () => _updateLid(false) : null,
                  style: FilledButton.styleFrom(
                    backgroundColor: canOpen ? Colors.purple : Colors.grey,
                  ),
                  child: const Text('Open (false)'),
                ),
                const SizedBox(width: 16),
                FilledButton(
                  onPressed: canClose ? () => _updateLid(true) : null,
                  style: FilledButton.styleFrom(
                    backgroundColor: canClose ? Colors.deepOrange : Colors.grey,
                  ),
                  child: const Text('Close (true)'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}