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

user_16978854 0
Viewed 247

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.

flutter-layout flutter drawing canvas android
1 Answers

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);}
user_138292910
Related