How can I paint a Widget on a Canvas in Flutter?

Magnus W

Is there any way to paint a Widget at a given position on a Canvas?

More specifically, I want to paint the child widgets of Marker's related to a FlutterMap on a separate Canvas in front of the actual FlutterMap widget. Here's an attempt at creating a CustomPainter that would do that, but I can't figure out how to actually paint the widgets on the canvas. Using the RenderObject requires a PaintingContext, which I don't know how to create/retrieve:

class MarkerPainter extends CustomPainter {
  MapController mc;
  BuildContext context;
  List<Marker> markers;

  MarkerPainter(this.context, this.mc, this.markers);

  @override
  void paint(Canvas canvas, Size size) {
    if( markers != null && markers.isNotEmpty ){
      for(int i=0; i<markers.length; i++){
        Marker marker = markers[i];
        Offset o = myCalculateOffsetFromLatLng(marker.point, mc, context);

        // Won't work, this needs a PaintingContext...
        marker.builder(context).createElement().renderObject.paint(context, o); 
      }
    }
  }

  @override
  bool shouldRepaint(MarkerPainter oldDelegate) => oldDelegate.markers != markers;
}
Rémi Rousselet

You cannot do this with a CustomPainter.

This class is only a simplification of the real deal: RenderObject, which has access to everything related to painter (and layout+more).

What you should do is, instead of a CustomPainter, create a RenderBox (a 2d RenderObject)

In your case, what you want is to draw a list of widgets. In that situation, you will need to create:

Wrapping up, a widget used this way:

MyExample(
  children: [
    Text('foo'),
    Text('bar'),
  ],
),

would be written this way:

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

class MyExample extends MultiChildRenderObjectWidget {
  MyExample({
    Key key,
    @required List<Widget> children,
  }) : super(key: key, children: children);

  @override
  RenderMyExample createRenderObject(BuildContext context) {
    return RenderMyExample();
  }
}

class MyExampleParentData extends ContainerBoxParentData<RenderBox> {}

class RenderMyExample extends RenderBox
    with ContainerRenderObjectMixin<RenderBox, MyExampleParentData> {
  @override
  void setupParentData(RenderObject child) {
    if (child.parentData is! MyExampleParentData) {
      child.parentData = MyExampleParentData();
    }
  }

  @override
  void performLayout() {
    size = constraints.biggest;

    for (var child = firstChild; child != null; child = childAfter(child)) {
      child.layout(
        // limit children to a max height of 50
        constraints.copyWith(maxHeight: 50),
      );
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // Paints all children in order vertically, separated by 50px

    var verticalOffset = .0;
    for (var child = firstChild; child != null; child = childAfter(child)) {
      context.paintChild(child, offset + Offset(0, verticalOffset));

      verticalOffset += 50;
    }
  }
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

How can I define a widget using javascript

분류에서Dev

How can I divide a drawing into a unequal size blocks using Paint.NET?

분류에서Dev

Flutter Canvas에서 Paint 개체에 그라디언트 사용

분류에서Dev

My Paint method is running twice and I have no idea why. How can I fix this, and does anyone know why this is happening?

분류에서Dev

How can I remove onEvent from button widget in Corona?

분류에서Dev

How can I create a table widget using Qt

분류에서Dev

How to access Stateful widget animation controller from another widget in Flutter?

분류에서Dev

How to navigate in flutter during widget build?

분류에서Dev

How can I make a rectangle be on top of all other rectangles in javascript canvas?

분류에서Dev

How can I wrap this text so it doesn't overflow past the widget container?

분류에서Dev

How to paint permanently on JComponent

분류에서Dev

How can we pass values to dialog widget?

분류에서Dev

How do I draw with the screen coordinates on canvas?

분류에서Dev

Can Windows 7 Paint (aka Microsoft Paint) handle transparency?

분류에서Dev

How can I program two simultaneous key press events in tkinter to move a canvas item diagonally using a dictionary of keypress events?

분류에서Dev

how can I redraw a circle on an HTML5 canvas in this specific case? (method call versus directly using context object)

분류에서Dev

How to create Ext js widget with Ext.draw.engine.Canvas as an item?

분류에서Dev

How do I pass data from a widget config class to a widget provider class via intents?

분류에서Dev

How to move canvas objects each time I click the button?

분류에서Dev

How Do I use plasma-widget-wifi

분류에서Dev

`Paint` 및`Canvas`로 곡선 그라디언트 만들기

분류에서Dev

How to change the default editor for PNG files from MS Paint to paint.net in Windows 10?

분류에서Dev

How can I perform an OR with ScalaTest

분류에서Dev

How can I run owncloud?

분류에서Dev

How can I organize this array

분류에서Dev

How can I rewrite this a generic?

분류에서Dev

How can I get a RejectedExecutionException

분류에서Dev

How can i manage this request?

분류에서Dev

How can I rotate a Rectangle?

Related 관련 기사

  1. 1

    How can I define a widget using javascript

  2. 2

    How can I divide a drawing into a unequal size blocks using Paint.NET?

  3. 3

    Flutter Canvas에서 Paint 개체에 그라디언트 사용

  4. 4

    My Paint method is running twice and I have no idea why. How can I fix this, and does anyone know why this is happening?

  5. 5

    How can I remove onEvent from button widget in Corona?

  6. 6

    How can I create a table widget using Qt

  7. 7

    How to access Stateful widget animation controller from another widget in Flutter?

  8. 8

    How to navigate in flutter during widget build?

  9. 9

    How can I make a rectangle be on top of all other rectangles in javascript canvas?

  10. 10

    How can I wrap this text so it doesn't overflow past the widget container?

  11. 11

    How to paint permanently on JComponent

  12. 12

    How can we pass values to dialog widget?

  13. 13

    How do I draw with the screen coordinates on canvas?

  14. 14

    Can Windows 7 Paint (aka Microsoft Paint) handle transparency?

  15. 15

    How can I program two simultaneous key press events in tkinter to move a canvas item diagonally using a dictionary of keypress events?

  16. 16

    how can I redraw a circle on an HTML5 canvas in this specific case? (method call versus directly using context object)

  17. 17

    How to create Ext js widget with Ext.draw.engine.Canvas as an item?

  18. 18

    How do I pass data from a widget config class to a widget provider class via intents?

  19. 19

    How to move canvas objects each time I click the button?

  20. 20

    How Do I use plasma-widget-wifi

  21. 21

    `Paint` 및`Canvas`로 곡선 그라디언트 만들기

  22. 22

    How to change the default editor for PNG files from MS Paint to paint.net in Windows 10?

  23. 23

    How can I perform an OR with ScalaTest

  24. 24

    How can I run owncloud?

  25. 25

    How can I organize this array

  26. 26

    How can I rewrite this a generic?

  27. 27

    How can I get a RejectedExecutionException

  28. 28

    How can i manage this request?

  29. 29

    How can I rotate a Rectangle?

뜨겁다태그

보관