如何在火焰中使用火焰制作/绘制点？

Question

我想使用火焰在我的应用程序中制作一系列的点。 到目前为止，我对自定义绘画一无所知，但我在这里使用的只是SpriteComponent，并且只想使用它来绘制绘图点

这是我尝试过的：

***** main *******

var game;
const ComponentSize = 40.0;

void main() async {
  await Flame.util.fullScreen();
  await Flame.images.loadAll([
    'dotbg1.jpg',
    'dot-line1.png',
    'dot-ball.png',
  ]);
  runApp(MaterialApp(
      home: Scaffold(
          body: Container(
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage("assets/dotbg1.jpg"),
        fit: BoxFit.cover,
      ),
    ),
    child: (MyGame().widget),
  ))));
}

class MyGame extends BaseGame {
  @override
  void render(Canvas canvas) {}

  @override
  void update(double t) {}
}

***** dot.dart ********

class Component extends SpriteComponent {
  Size dimensions;
  int position;
  int yposition;

  Component(this.dimensions,this.position, this.yposition) : super.square(ComponentSize, 'dot-ball.png');
}

我在跑步时出现黑屏，控制台输出如下：

期望：下图是我需要绘制的图像

我在这里做什么错了？

Answer 1

您不能直接使用CustomPainter作为窗口小部件。定制绘画器旨在在CustomPaint小部件内绘画。所以你的代码应该是这样的

CustomPaint(
  painter: ShapesPainter(),
)

Answer 2

火焰图像资产必须位于文件夹std::string mystr = "\";中。资产/图片/也必须在您的pubspec中，yaml。