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

Question

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.

Solution

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

Comments

[Csisanyi]

check out api.flutter.dev/flutter/rendering/CustomPainter-class.html

[Csisanyi]

This is also a pretty nice article about the topic blog.codemagic.io/flutter-custom-painter