Drawing in Flutter using CustomPainter

<h1>Introduction :</h1> In Flutter everything revolves around the term Widget. Flutter gives you the flexibility to write one code, create some beautiful UI widgets and the app is ready for both iOS and Android.So what actually happens is these widgets that you create are drawn on to your mobile screen Or we can call it as drawn on to the Canvas. Using the same concept we can draw on it and use it as a drawing board. <img alt="" src="https://miro.medium.com/v2/resize:fit:294/1*Qodd3kD22dbhfazsgd0nJw.png" style="height:584px; width:294px" /> We will be using custom painter for drawing on the canvas, we will have options to change size, opacity and color of the marker. The code is available at <a href="https://github.com/sharansingh00002/draw" rel="noopener ugc nofollow" target="_blank">https://github.com/sharansingh00002/draw</a> You can also checkout my video with extra code :p to take image for image drawn also : <a href="https://www.youtube.com/watch?v=xHWAE8BNJ1E" rel="noopener ugc nofollow" target="_blank">https://www.youtube.com/watch?v=xHWAE8BNJ1E</a> Now lets have a look at how this is done :) CODE TIME So the first information we need to have is the coordinates of the point on the canvas where the user has interacted with, which we can get simply by using Gesture Detector. We will be using onPanUpdate, onPanStart and onPanEnd properties of gesture detector. onPanStart is used when a user just clicks the screen, that way we can draw a single point but if user drags then the continuous points are obtained using the onPanUpdate and OnPanEnd is to notify user has stopped drawing. We will be storing the points in a list where each element will have the coordinates as well as paint properties associated with that point. <a href="https://medium.com/flutter-community/drawing-in-flutter-using-custompainter-307a9f1c21f8">Click Here</a>