Exception caught by widgets library Null check operator used on a null value

Question

════════ Exception caught by widgets library ═══════════════════════════════════
Null check operator used on a null value

I'm performing an animation with River and it's giving this error specifically on Waving and Flyng

Animation link: https://rive.app/community/4304-8873-flutter-dash/

Here is the complete code

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';
import '../../configs/assets/assets_path.dart';
import '../../widgets/cs_app_bar.dart';
import '../../widgets/cs_button_home.dart';

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

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  Artboard? artboard;
  SMIBool? isWaving;
  SMIBool? isWiking;
  SMIBool? isFlyng;

  @override
  void initState() {
    super.initState();
    rootBundle.load('assets/flutter-dash.riv').then(
      (data) async {
        try {
          final file = RiveFile.import(data);
          final art = file.mainArtboard;
          var controller = StateMachineController.fromArtboard(art, 'State Machine 1');
          if (controller != null) {
            art.addController(controller);
            isWaving = controller.findSMI('isWaving');
            isWiking = controller.findSMI('isWiking');
            isFlyng = controller.findSMI('isFlyng');
          }
          setState(() => artboard = art);
        } catch (e) {}
      },
    );
  }

  void toggleWaving(bool newValue) {
    setState(
      () => isWaving!.value = newValue,
    );
  }

  void toggleWiking(bool novoValue) {
    setState(
      () => isWiking!.value = novoValue,
    );
  }

  void toggleFlyng(bool newValue) {
    setState(
      () => isFlyng!.value = newValue,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CsAppBar(
        title: 'Testes',
      ),
      body: ListView(
        children: [
          SizedBox(
            height: 300,
            width: 400,
            child: Rive(
              artboard: artboard!,
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text('Waving'),
              Switch(
                value: isWaving!.value,
                onChanged: (value) => toggleWaving(value),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text('Wiking'),
              Switch(
                value: isWiking!.value,
                onChanged: (value) => toggleWiking(value),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text('Flyng'),
              Switch(
                value: isFlyng!.value,
                onChanged: (value) => toggleFlyng(value),
              ),
            ],
          ),
          const SizedBox(height: 12),
        ],
      ),
    );
  }
}

Answer 1

this error is likely coming from the usage of null check operators (!) on the isWaving, isWiking, and isFlyng variables. Check null value

if (controller != null) {
  // Rest of your code
} else {
  print('Controller is null');
}

Handle Null Values

void toggleWaving(bool newValue) {
  if (isWaving != null) {
    setState(() => isWaving!.value = newValue);
  }
}

// Repeat same for the toggleWiking and toggleFlyng methods