How to make/draw dots using flame in flutter?

Question

I want to make series of dots in my app using flame. So far I know about Custom paint and all but what I am using here is SpriteComponent and want to use it only to make draw dots

This is what I tried:

*****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');
}

When I am running, I am getting a blank screen and my console output is below:

Expectation: The image below is what I need to draw

What am I doing wrong here?

Answer 1

You cannot directly use a CustomPainter as a widget. A custom painter is intended to paint inside a CustomPaint widget. So your code should be something like this

CustomPaint(
  painter: ShapesPainter(),
)

Answer 2

flame image assets need to be in folder assets/images. Also assets/images/ must be in your pubspec,yaml.