Unable to updat the child size

[rddewan]

Hi,
I am creating a life bar using a RectangleComponent and in update method i am trying to update the x value but it's not updating the UI but the value is updated.

Current bug behavior

when X value is update the component UI is not updated

Expected behavior

when X value is update the component UI should update

Steps to reproduce

Downgraded the Flame version form 1.4.0 to 1.0.0

LifeBar:

import 'package:flame/components.dart';
import 'package:flutter/material.dart';

class LifeBar extends PositionComponent {

  final Vector2 lifeBarSize;
  final Vector2 lifeBarPosition;

  final int maxLife = 100;
  final int _warningThreshold = 50;
  int currentLife = 100;
  
  // background color of the bar when the health element is missing
  final Paint _backgroundFillColor = Paint()
    ..color = Colors.grey.withOpacity(0.35)
    ..style = PaintingStyle.fill;

  // the outline of the bar color and style
  final Paint _outlineColor = Paint()
    ..color = Colors.white
    ..style = PaintingStyle.stroke
    ..strokeWidth = 5;

  // the outline of the bar color and style
  Paint _lifeBarColor = Paint()
    ..color = Colors.green
    ..style = PaintingStyle.fill;
  
  final Paint _warningColorStyled = Paint()
  ..color = Colors.red
  ..style = PaintingStyle.fill;


  // the 3 rectangles that comprise the bar's rectangles
  List<RectangleComponent> lifeBarElements = List<RectangleComponent>.filled(
      3, RectangleComponent(size: Vector2(1, 1)),
      growable: false);

  LifeBar({required this.lifeBarSize, required this.lifeBarPosition});    

  @override
  Future<void>? onLoad() {
    // All positions here are in relation to the parent's position
    lifeBarElements = [
      //
      // The outline of the life bar
      RectangleComponent(
        position: lifeBarPosition,
        size: lifeBarSize,
        angle: 0,
        paint: _outlineColor,
      ),
      //
      // The fill portion of the bar. The semi-transparent portion
      RectangleComponent(
        position: lifeBarPosition,
        size: lifeBarSize,
        angle: 0,
        paint: _backgroundFillColor,
      ),
      //
      // The actual life percentage as a fill of red or green
      RectangleComponent(
        position: lifeBarPosition,
        size: lifeBarSize,
        angle: 0,
        paint: _lifeBarColor,
      ),
    ];

    addAll(lifeBarElements);

    return super.onLoad();
  }

  @override  
  void update(double dt) {  
    super.update(dt);    
    lifeBarElements[2].paint = _lifeBarColor;    
    lifeBarElements[2].size.x = (lifeBarSize.x / maxLife) * currentLife;
   
    _updateCurrentColor();
   
    debugPrint("Life: ${lifeBarElements[2].size.x}}");
       
  }

  void _updateCurrentColor() {   
    if (currentLife <= _warningThreshold) {
      _lifeBarColor = _warningColorStyled;
    } 
  }

}

Parent Component :

import 'package:chicken_war_poc/common/position_out_of_bound.dart';
import 'package:chicken_war_poc/component/bullet/shooter_bullet_component.dart';
import 'package:chicken_war_poc/component/life_bar.dart';
import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/foundation.dart';

class DinoRunningComponent<T extends FlameGame> extends SpriteComponent 
  with PositionOutOfBound, CollisionCallbacks, HasGameRef<T> {
    
    final double dinoSize;  
    final Vector2 dinoPosition;
    final double dinoSpeed = 30;
    late LifeBar lifeBar;

    DinoRunningComponent({required this.dinoSize, required this.dinoPosition});


    @override
    Future<void>? onLoad() async {
      sprite = await gameRef.loadSprite("sprints/dino_idle.png");
      anchor = Anchor.center;
      size.setValues(dinoSize, dinoSize);
      position = dinoPosition;
      // Add a hit box with custom size
      add(RectangleHitbox(size: Vector2(20, size.y)));
      //add(ScreenHitbox());
      
      createLifeBar();

      return super.onLoad();
    }

    @override
    void update(double dt) {    
      super.update(dt);  
      // increase the size when it comes nearer to shooter  
      //size.setValues(size.x + 0.1, size.y + 0.1);

      // update the current position with the given direction and speed
      position.add(Vector2(-1, 0)* dt * dinoSpeed);
      // if the bullet goes out of the screen , remove it from parent
      if (isPositionOutOfBounds(gameRef.size, position)) {
        removeFromParent();
      }

    }

  @override
  void onCollision(Set<Vector2> points, PositionComponent other) {
    super.onCollision(points, other);
    
   if (other is ShooterBulletComponent) {
      debugPrint("onCollision: ShooterBulletComponent");
      lifeBar.currentLife -= 10;
      if (lifeBar.currentLife == 0) {
        removeFromParent();
      }
    }
  }

  void createLifeBar() {
    //add life bar  
    final lifeBarSize =  Vector2(width, 10); 
    lifeBar = LifeBar(
      lifeBarSize: lifeBarSize, 
      lifeBarPosition: Vector2(size.x - lifeBarSize.x , -10),
    );

    add(lifeBar);
  }

}

Flutter doctor output

[✓] Flutter (Channel stable, 3.3.8, on macOS 13.0.1 22A400 darwin-arm, locale en-TH)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.1)
[✓] Connected device (4 available)
[✓] HTTP Host Availability

More environment information

• Flame version: 1.4.0
• Platform affected: android, ios, web

[ufrshubham]

@rddewan can you test this by depending on the main branch? Probably #2167 already fixes this.

[rddewan]

@ufrshubham I am unable to add a dependency with below .

flame:
   git:
     url: https://github.com/flame-engine/flame/tree/main/packages/flame```

[spydon]

dependencies:
  flame:
    git:
      url: https://github.com/flame-engine/flame.git
      ref: main
      path: packages/flame

This is how you depend on main. ☝️
We'll most likely release v1.5.0 tomorrow which includes the fix to RectangleComponent.

[rddewan]

@ufrshubham @sam3ha2 wow cool this fixed the issue , I was banging my head for weeks