How to get offset of canvas in CustomPainter's paint function?

Question

lets say that we have a background image:

I want to render few views with shared background:

I think that I can use CustomPainter and draw my background image translated by canvas offset, but I don't know how to get that property inside paint function:

class PanelBackgroundPainter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    var rect = Offset.zero & size;
    canvas.clipRect(rect);

    canvas.drawImage(image, new Offset(-canvasOffsetX, -canvasOffsetY), new Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

}

How can I calculate canvasOffsetX and canvasOffsetY?

I am using rows and columns to lay out my panels:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Column(
        children: <Widget>[
          new Expanded(
            child: new Container(
              color: new Color.fromARGB(255, 128, 128, 128),
            ),
            flex: 100,
          ),
          new Container(height: 10.0),
          new Container(
            color: new Color.fromARGB(255, 128, 128, 128),
            height: 120.0,
          ),
          new Container(height: 10.0),
          new Expanded(
            child: new Container(
              child: new Row(
                children: <Widget>[
                  new Expanded(
                    child: new Container(
                      color: new Color.fromARGB(255, 128, 128, 128),
                    ),
                    flex: 50,
                  ),
                  new Container(width: 10.0),
                  new Expanded(
                    child: new Container(
                      color: new Color.fromARGB(255, 128, 128, 128),
                    ),
                    flex: 50,
                  ),
                ],
              ),
            ),
            flex: 200,
          ),
        ],
      ),
    );
  }
}

Answer 1

I know this is an old question, and that it already has an answer, but I just had the same issue, and wanted to share my solution.

If we create a custom RenderObject, this can be solved quite easily:

import 'package:flutter/widgets.dart';

/// An image with a slight pattern.
///
/// The pattern is always the same on a certain part of the screen, even if the
/// widget itself doesn't cover the whole screen.
class Background extends LeafRenderObjectWidget {
  const Background({super.key});

  @override
  RenderObject createRenderObject(BuildContext context) {
    return BackgroundRenderObject(MediaQuery.of(context).size);
  }

  @override
  void updateRenderObject(BuildContext context, BackgroundRenderObject renderObject) {
    renderObject.screenSize = MediaQuery.of(context).size;
  }
}

class BackgroundRenderObject extends RenderBox {
  BackgroundRenderObject(this._screenSize);

  Size _screenSize;

  set screenSize(Size value) {
    if (_screenSize == value) {
      return;
    }

    _screenSize = value;
    markNeedsLayout();
  }

  @override
  void performLayout() {
    size = constraints.biggest;
  }
  @override
  void paint(PaintingContext context, Offset offset) {
    final canvas = context.canvas;

    // The rect where the background should be painted.
    final drawRect = offset & size;

    // A rect covering the entire screen.
    // This ensures that the painted shader is the same no matter the offset
    // and size of the rect where the background is painted.
    final fullScreenRect = Offset.zero & _screenSize;


    const gradient = LinearGradient(
      colors: [
        Color(0xFF000824),
        Color(0xFF00283F),
        Color(0xFF001134),
      ],
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
    );

    final paint = Paint()..shader = gradient.createShader(fullScreenRect);

    canvas.drawRect(drawRect, paint);
  }

Answer 2

While I don't know that it is necessarily a great idea, it is possible. The best explanation is probably just to look at this code:

import 'dart:ui' as ui;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

class SharedBackgroundPainter extends CustomPainter {
  final ui.Image image;
  final RenderBox renderBox;
  final RenderBox parentRender;

  SharedBackgroundPainter({@required this.image, @required this.renderBox, @required this.parentRender});

  @override
  void paint(Canvas canvas, Size size) {
    var rect = ui.Offset.zero & size;

    var globalThisTopLeft = renderBox.localToGlobal(new ui.Offset(0.0, 0.0), ancestor: parentRender);

    canvas.clipRect(rect);
    canvas.drawImage(image, new Offset(-globalThisTopLeft.dx, -globalThisTopLeft.dy), new Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

class BackgroundBuilder extends StatelessWidget {
  final Size size;
  final ui.Image image;
  final RenderBox parentRender;

  const BackgroundBuilder({Key key, @required this.size, @required this.image, @required this.parentRender})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
      RenderBox box = context.findRenderObject();
      assert(box != null);

      return new CustomPaint(
        size: new Size(constraints.maxWidth, constraints.maxHeight),
        painter: new SharedBackgroundPainter(image: image, renderBox: box, parentRender: parentRender),
      );
    });
  }
}

class SharedBackgroundBuilder extends StatelessWidget {
  final ui.Image toDraw;
  final Size size;
  final RenderBox parentRender;

  const SharedBackgroundBuilder({Key key, @required this.toDraw, @required this.size, @required this.parentRender})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Expanded(
          child: new BackgroundBuilder(
            image: toDraw,
            size: size,
            parentRender: parentRender,
          ),
          flex: 100,
        ),
        new SizedBox(height: 10.0),
        new SizedBox(
          height: 120.0,
          child: new BackgroundBuilder(
            image: toDraw,
            size: size,
            parentRender: parentRender,
          ),
        ),
        new SizedBox(height: 10.0),
        new Expanded(
          child: new Container(
            child: new Row(
              children: <Widget>[
                new Expanded(
                  child: new BackgroundBuilder(
                    image: toDraw,
                    size: size,
                    parentRender: parentRender,
                  ),
                  flex: 50,
                ),
                new Container(width: 10.0),
                new Expanded(
                  child: new BackgroundBuilder(
                    image: toDraw,
                    size: size,
                    parentRender: parentRender,
                  ),
                  flex: 50,
                ),
              ],
            ),
          ),
          flex: 200,
        ),
      ],
    );
  }
}

/// This is to resize an image to the size of the overall structure. Note that this will
/// only work in an environment where LayoutBuilder can find constraints.

class ImageResizingPainter extends CustomPainter {
  final ui.Image image;
  final BoxFit boxfit;

  ImageResizingPainter(this.image, this.boxfit);

  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    final ui.Rect rect = ui.Offset.zero & size;
    final Size imageSize = new Size(image.width.toDouble(), image.height.toDouble());

    FittedSizes sizes = applyBoxFit(boxfit, imageSize, size);

    // if you don't want it centered for some reason change this.
    final Rect inputSubrect = Alignment.center.inscribe(sizes.source, Offset.zero & imageSize);
    final Rect outputSubrect = Alignment.center.inscribe(sizes.destination, rect);
    canvas.drawImageRect(image, inputSubrect, outputSubrect, new Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class ImageResizer extends StatelessWidget {
  final ui.Image image;
  final BoxFit boxFit;

  // if you want a different boxfit you can set it. See BoxFit documentation.
  const ImageResizer({Key key, @required this.image, this.boxFit = BoxFit.cover}) : super(key: key);

  ui.Image getResizedImage(Size size) {
    var pictureRecorder = new ui.PictureRecorder();
    Canvas canvas = new Canvas(pictureRecorder);
    CustomPainter painter = new ImageResizingPainter(image, boxFit);
    painter.paint(canvas, size);
    return pictureRecorder.endRecording().toImage(size.width.floor(), size.height.floor());
  }

  Widget build(BuildContext context) {
    return new LayoutBuilder(builder: (context, constraints) {
      RenderBox box = context.findRenderObject();
      var size = new Size(constraints.maxWidth, constraints.maxHeight);
      // This might not be a good idea to do in the build function, but we're going to ignore that
      // and do it anyways.
      ui.Image resizedImage = getResizedImage(size);
      return new SharedBackgroundBuilder(toDraw: resizedImage, size: size, parentRender: box);
    });
  }
}

class ImageDrawer extends CustomPainter {
  final ui.Image image;

  ImageDrawer(this.image);

  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    canvas.drawImage(image, ui.Offset.zero, new Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

/// This is just to build an image to display. I'm too lazy to load one =D

class GradientPainter extends CustomPainter {
  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    Rect rect = ui.Offset.zero & size;
    var linearGradient = new LinearGradient(
      colors: [Colors.red, Colors.green],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    );

    var shader = linearGradient.createShader(rect);
    canvas.drawRect(rect, new Paint()..shader = shader);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class GradientGetter extends StatelessWidget {
  // I'm too lazy to create an image so I'm just drawing a gradient
  ui.Image getGradientImage(Size size) {
    var pictureRecorder = new ui.PictureRecorder();
    Canvas canvas = new Canvas(pictureRecorder);
    GradientPainter painter = new GradientPainter();
    painter.paint(canvas, size);
    return pictureRecorder.endRecording().toImage(size.width.floor(), size.height.floor());
  }

  @override
  Widget build(BuildContext context) {
    return new LayoutBuilder(builder: (context, constraints) {
      var size = new Size(constraints.maxWidth, constraints.maxHeight);
      // remove the / 20 to get it smooth again, it's just there to test
      // out the scaling.
      var changedSize = size / 20.0;
      ui.Image gradientImage = getGradientImage(changedSize);
      assert(gradientImage != null);
      return new ImageResizer(
        image: gradientImage,
      );
    });
  }
}

/// This is just so that you can copy/paste this and have it run.
void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new Padding(
          padding: const EdgeInsets.all(30.0),
          child: new GradientGetter(),
        ));
  }
}

As I went through it I realized that it needs to be more complex than I originally thought - you have to deal with scaling the image to the size of the container etc. This does all that now, although I haven't tested it super extensively.

Also note that this gives no consideration to performance - it's almost for sure bad performance-wise.