Search code examples
flutterdartwidgetstackflutter-custompainter

Is it ok to stack multiple CustomPainter in Flutter?

Is it ok to stack multiple CustomPainter in a Stack widget?

For example:

Stack(
  children: [
    RepaintBoundary(
        child: CustomPaint(
      size: Size(imgSource.width.toDouble(), imgSource.height.toDouble()),
      painter: BackgroundImagePainter(imgSource),
    )),
    RepaintBoundary(
        child: CustomPaint(
      isComplex: true,
      willChange: true,
      size: Size(imgSource.width.toDouble(), imgSource.height.toDouble()),
      painter: GpsMarkerPainter(lMarkerDisplay, scale: _currentScale),
    )),
  ],
),

In this example i use one painter (BackgroundImagePainter) to draw the background image one time and another CustomPainter (GpsMarkerPainter) to draw updated marker positions.

What is the best practice if i would like to display a compass that redraws every second. Can i just add a CustomPainter for that as well or would it be better to put them together in one CustomPainter even they would have different triggers for redraw?

Solution

  • It is completely OK to stack CustomPaint widgets.

    The same way you organise custom Stateless or Stateful widgets, you can organize your CustomPaint the way you want and split them the way you want. Usually, you split them by feature so they aren't 500 lines each.