user-interfaceflutterdartcustom-painting

flutter: Placing regular widgets on top of CustomPaint canvas

My app is mainly made up of CustomPainted pages. But I'd love to place one or two buttons such as PopupMenuButton or IconButton on top of the canvas.

Is this possible? If yes, how?

Solution

  • Yes, this is possible. CustomPaint accepts a child property which can be used to place widgets on top of it, for example:

    CustomPaint(
  painter: _RadialPainter(
    color: Theme.of(context).primaryColor,
    completedPercentage: progress.completed,
  ),
  child: Center(
    child: Text(
      '${progress.left}',
       style: Theme.of(context).textTheme.headline4,
     ),
  ),
);

    Take a note that the _RadialPainter extends the CustomPainter.