CODEWITHSUNDEEP
androidfluttercanvasflutter-layoutdrawing
Sandesh Pargaonkar
Sandesh Pargaonkar

Reputation: 21

How can i create a drawing app in flutter where i can draw lines shapes in flutter

I have been trying to create a app where end user can draw or create a design of his farm and show direction of pipes on his land. First i tried to search in flutter because my app is in flutter then python and html canvas also. In flutter, free hand drawing app can be created using gesture ditector, paint widget. But i was not able to find proper option to crate simple line or rectangle.

Upvotes: 2

Views: 476

Answers (1)

Mayur Agarwal
Mayur Agarwal

Reputation: 1814

You can do something like this to draw a line,

NOTE: We simply are storing the starting and ending positions of the pointer.

 onPanStart:
                                          (DragStartDetails details) {
                                        setState(
                                          () {
                                            RenderBox object =
                                                context.findRenderObject();
                                            Offset _localPosition =
                                                object.globalToLocal(
                                                    details.globalPosition);
                                            List.from(linePoints)
                                              ..add(_localPosition);
                                          },
                                        );
                                      },

This way you'll store the starting position of the line that you want to draw. Then keep updating another variable called endPosition in onPanUpdate the same way and in onPanEnd add the endPosition variable to the linePoints list.

onPanUpdate:
                                          (DragUpdateDetails details) {
                                        RenderBox object =
                                            context.findRenderObject();
                                        _endPosition =
                                            object.globalToLocal(
                                                details.globalPosition);
                                      },

onPanEnd:(details){List.from(linePoints)..add(_Position);}

Upvotes: 1

Related Questions