CODEWITHSUNDEEP
flutterdartwidget
TwoGirls
TwoGirls

Reputation: 49

How can I draw a widget on top of a widget in flutter?

I want to draw a yellow arrow over the 9 blue squares as shown in the picture below.

Question Image

But I don't know which widget to use to draw arrows freely on each rectangle. I want to draw an arrow like a screen lock pattern. I would like to know the different ways in which this arrow can be implemented.

Upvotes: 0

Views: 1775

Answers (1)

Amir
Amir

Reputation: 373

You can put the whole Containers inside a Stack widget and then paint the line by using the CustomPaint widget shown in this question Draw lines with flutter.

Stack(
      children: [
        Arrow(child: Container()),
        ContainerWidgets(),
      ],
    )

And for the painter:

class Arrow extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Add your paint logic here
  }
}

Upvotes: 1

Related Questions