Instance CircleComponent cannot be added to Instance of HudButtonComponent

[silvinhodev]

Current bug behaviour

This error happens when I press the button several times, it can occur at any time and app crash. Instance of 'CircleComponent' cannot be added to Instance of 'HudButtonComponent' because it already has a parent.

Expected behaviour

That it works normally

Steps to reproduce

final shapeButton = HudButtonComponent(
      button: CircleComponent(radius: 35),
      buttonDown: CircleComponent(
        radius: 35,
        paint: BasicPalette.blue.paint(),
      ),
      margin: const EdgeInsets.only(
        right: 85,
        bottom: 150,
      ),
      onPressed: () => player.add(
        RotateEffect.by(
          8 * rng.nextDouble(),
          EffectController(
            duration: 1,
            reverseDuration: 1,
            curve: Curves.bounceOut,
          ),
        ),
      ),
    );
    add(shapeButton);

Flutter doctor output

[✓] Flutter (Channel stable, 3.0.0, on macOS 12.1 21C52 darwin-x64, locale
    pt-BR)
    • Flutter version 3.0.0 at /Users/preto/Documents/FlutterSDK/flutter3
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ee4e09cce0 (11 days ago), 2022-05-09 16:45:18 -0700
    • Engine revision d1b9a6938a
    • Dart version 2.17.0
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version
    32.1.0-rc1)
    • Android SDK at /Users/preto/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
    • All Android licenses accepted.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (3 available)
    • Moto G 5 (mobile) • 0033077190 • android-arm    • Android 8.1.0 (API 27)
    • macOS (desktop)   • macos      • darwin-x64     • macOS 12.1 21C52
      darwin-x64
    • Chrome (web)      • chrome     • web-javascript • Google Chrome
      100.0.4896.127

[✓] HTTP Host Availability
    • All required HTTP hosts are available

More environment information

Log information

════════ Exception caught by scheduler library ═════════════════════════════════
'package:flame/src/components/component.dart': Failed assertion: line 501 pos 12: '_state == LifecycleState.loaded || _state == LifecycleState.removed': is not true.
package:flame/…/components/component.dart:501
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by gesture ═══════════════════════════════════════════
Instance of 'CircleComponent' cannot be added to Instance of 'HudButtonComponent' because it already has a parent: Instance of 'HudButtonComponent'
'package:flame/src/components/component.dart':
package:flame/…/components/component.dart:1
Failed assertion: line 433 pos 7: '_parent == null'

════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by gesture ═══════════════════════════════════════════
Instance of 'CircleComponent' cannot be added to Instance of 'HudButtonComponent' because it already has a parent: Instance of 'HudButtonComponent'
'package:flame/src/components/component.dart':
package:flame/…/components/component.dart:1
Failed assertion: line 433 pos 7: '_parent == null'

More information

[spydon]

This seems to be solved in main already and will be released in v1.2

[silvinhodev]

This seems to be solved in main already and will be released in v1.2

Updated, but same error and got other error: Instance of 'CircleComponent' cannot be added to Instance of 'HudButtonComponent' because it already has a parent: Instance of 'HudButtonComponent' 'package:flame/src/components/component.dart': package:flame/…/components/component.dart:1 Failed assertion: line 527 pos 7: '_parent == null'

_AssertionError ('package:flame/src/components/component.dart': Failed assertion: line 550 pos 7: 'component._parent != null': Trying to remove a component that doesn't belong to any parent)

[spydon]

Can you try to depend on the latest main now? I just merged the PR, but I couldn't replicate this before either.

[silvinhodev]

Can you try to depend on the latest main now? I just merged the PR, but I couldn't replicate this before either.

Got other error when press a button: Null check operator used on a null value

https://github.com/flame-engine/flame/blob/30d84b7caea128c7dc579dce170129e462bc03bf/packages/flame/lib/src/components/component.dart#L812

void _remove() {
    _parent!.children.remove(this);
    propagateToChildren(
      (Component component) {
        component.onRemove();
        component._clearMountedBit();
        component._clearRemovingBit();
        component._parent = null;
        return true;
      },
      includeSelf: true,
    );
  }

[silvinhodev]

After update 1.2.0 i got same error above. "Null check operator used on a null value" when call update override method. I'll have to downgrade.

[spydon]

I can't reproduce this on 1.2.0, can you send minimal reproducible example?

[figengungor]

It happens with version 1.0.4, too. You can run this example(increase the flame version first) and see: https://github.com/codetricity/flame_2022_visual_novel_tutorial/ When dialog button is added after first scene in the example, you can see the error in console.

[spydon]

If this can't be reproduced on the latest Flame version I'll close this. If anyone can reproduce this on 1.4.0 we can re-open it, but I don't think that is the case.