Issue drawing a grid on the canvas

[dipanshparmar]

What happened?

So I'm trying to create a grid on the canvas and for some reason it is not rendering properly. When I render just a single row with the code provided, it works fine, but not for multiple rows.

What do you expect?

I was expecting a grid to be rendered on the canvas.

How can we reproduce this?

import 'dart:async';

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

void main() {
  runApp(GameWidget(game: MyGame()));
}

class MyGame extends FlameGame {
  @override
  FutureOr<void> onLoad() {
    super.onLoad();
    debugMode = true;

    world.add(GameBoard());
  }
}

class GameBoard extends PositionComponent with HasGameRef<MyGame> {
  @override
  FutureOr<void> onLoad() {
    super.onLoad();

    // game size
    final gameSize = gameRef.size;
    const cellSize = 40.0;
    const cellSpacing = 10.0;

    // starting position
    final startingPosition = Vector2(
      -(gameSize.x / 2) + (cellSize / 2) + cellSpacing,
      0,
    );

    for (int i = 0; i < 5; i++) {
      for (int j = 0; j < 5; j++) {
        add(
          Cell(
            position: startingPosition +
                Vector2(
                  (cellSize + cellSpacing) * j,
                  i * (cellSize + cellSpacing),
                ),
            size: Vector2.all(cellSize),
          ),
        );
      }
    }
  }
}

class Cell extends RectangleComponent {
  Cell({
    required super.position,
    required super.size,
  }) : super(anchor: Anchor.center);

  @override
  void render(Canvas canvas) {
    super.render(canvas);

    canvas.drawRect(
      Rect.fromCenter(
        center: Offset.zero,
        width: position.y,
        height: position.x,
      ),
      paint..color = Colors.white,
    );
  }
}

What steps should take to fix this?

No response

Do have an example of where the bug occurs?

No response

Relevant log output

No response

Execute in a terminal and put output into the code block below

[✓] Flutter (Channel stable, 3.16.9, on Pop!_OS 22.04 LTS 6.9.3-76060903-generic, locale en_US.UTF-8)
    • Flutter version 3.16.9 on channel stable at /home/dipansh/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 41456452f2 (9 months ago), 2024-01-25 10:06:23 -0800
    • Engine revision f40e976bed
    • Dart version 3.2.6
    • DevTools version 2.28.5

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /home/dipansh/Android/Sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /home/dipansh/Programs/dev/android-studio/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1

[✓] Android Studio (version 2023.1)
    • Android Studio at /home/dipansh/Programs/dev/android-studio
    • 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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Community Edition (version 2023.3)
    • IntelliJ at /home/dipansh/Programs/dev/idea
    • 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

[✓] VS Code (version 1.94.0)
    • VS Code at /usr/share/code
    • Flutter extension version 3.98.0

[✓] Connected device (3 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 12 (API 31) (emulator)
    • Linux (desktop)              • linux         • linux-x64      • Pop!_OS 22.04 LTS 6.9.3-76060903-generic
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 129.0.6668.89

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Affected platforms

• Android

I didn't test on other platforms.

Other information

I don't even know if it a bug in the framework itself or just my code. I felt the code is correct so I though I would create a bug and get the confirmation. Sorry if it is just an issue on my end. This is the output of the code:

Are you interested in working on a PR for this?

• [ ] I want to work on this

[spydon]

When you're using a RectangleComponent you don't have to override the render method, just set the position, size, paint and potentially anchor (if you don't want top left to be where the position is defined) and it'll render the rectangle for you.

[dipanshparmar]

Thank you so much. That works just fine.