Scrolling not working as expected on iOS devices

[LukasBrits]

Description

On apple devices, scrolling does not work as expected when there is a target area with a listener in the Rive animation. Scrolling does not work when the swipe gesture starts on the target area, otherwise it works as expected. The same behaviour does not seem to occur on android devices.

Steps To Reproduce

• Launch the app on a mobile emulator or physical iOS device.
• Attempt to scroll by clicking and swiping from the rive animation click target area (indicated by text "Swipe Here" in the demo).

Source

scroll_test.zip

Expected behavior

Scrolling should work normally when a swipe gesture starts on a Rive animation's target area.

Device & Versions

• Devices: iOS Simulator (iPhone 16 Pro), Iphone 15 Pro (physical device)
• OS: iOS 18.1.1
• Flutter Version:

Flutter 3.24.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision dec2ee5c1f (12 days ago) • 2024-11-13 11:13:06 -0800
Engine • revision a18df97ca5
Tools • Dart 3.5.4 • DevTools 2.37.3

Additional context

Demo flutter app main.dart file:

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

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late StateMachineController _controller;

  onInit(Artboard artboard) {
    _controller =
        StateMachineController.fromArtboard(artboard, 'State Machine 1')!;
    _controller.isActive = true;
    artboard.addController(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              ...List.generate(
                5,
                (index) => Center(
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 10.0),
                    child: Container(
                      color: Colors.green,
                      width: 200.0,
                      height: 100.0,
                    ),
                  ),
                ),
              ),
              SizedBox(
                width: 200.0,
                height: 200.0,
                child: RiveAnimation.asset(
                  'assets/scroll_test.riv',
                  onInit: onInit,
                ),
              ),
              const SizedBox(
                height: 10.0,
              ),
              ...List.generate(
                5,
                (index) => Center(
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 10.0),
                    child: Container(
                      color: Colors.blue,
                      width: 200.0,
                      height: 100.0,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}