Today we’ll be making a really simple yet fun application on Flutter.

Flutter is a cross-platform framework that allows you to build apps for both iOS and Android with a single code base. I genuinely love Flutter and cannot get enough of it. I hope this tutorial gives you a new perspective towards this wonderful piece of technology and motivates you to build your own projects on it. Enough chit chat let’s get right into it.

Getting Started

I assume you have installed Flutter on your device. If you haven’t check out this link(https://flutter.dev/docs/get-started/install) for step by step guidance.

Create a new flutter project from your terminal using the command :

flutter create <your-project-name>

Once created move to the project directory and open it in your IDE (VS code, Android Studio etc.). I use VS Code and it looks something like this initially:

Remove the all comments and the code present in MyHomePage widget.

I have added the theme parameter as well, it is completely OK if you want to skip the dark theme. Now let’s actually build what we had in mind.

Coding the sketching part

If you are not familiar with it, Flutter has an abstract class called CustomPainter. As the name suggests it is basically used to paint something on the screen and for our project this is exactly what we need. In our _MyHomePageState class we need to declare a list of Offset points. These points would actually be like dots which will connect the paint on screen. You can declare them by using the following line of code :

List<Offset> points = <Offset>[];

Now let’s build the area in which we can detect user input and sketch accordingly. We define a Container() as follows:

We have defined this within our class _MyHomePageState inside of our build function. Feel free to change the color property of the box. I didn’t have time for good UI decisions. Do not be afraid of the CustomPaint function and the Sketcher class, we have to implement them in the next step itself. This code is self explanatory now, we have a box whose child is a paint and the paint would depend on the offsets we provide to it. Ez Pz.

Now let us focus on the CustomPaint class.

Declare a new class in the same file as follows

You will see an error when you put this code in your file which basically says that there are overrides that are missing from this class. In Flutter, CustomPainter class has an override function that checks if the existing paint should be repainted. Add the missing overrides from the Editor itself and let it be as it is for now. We now have two new functions in the class, void paint() and bool shouldRepaint().

Now for our painting part we require only one variable and that is our list of Offset. So we declare a list of Offset and add it to the constructor of this class.

In the paint function add the following lines of code:

That might be very new for some of you so allow me to explain. We first declare a Paint object that will be responsible for painting on the screen. Consider it the brush of our app. Using ‘..’ operator in Dart we set the properties of the paint. We set the color to blue, strokeCap to round and strokeWidth to 4.0. We can obviously play around with these values but for now let’s leave them as they are. We then iterate over all the points using the for loop and check if the current point and the next point are not equal to null. If they are not then we draw a line on the canvas using our paint.

Now in the second function we check if the previously drawn points are same as the currently drawn points. If they are equal then we return false and we will not update the screen, however, if they are unequal we return true and actually repaint the screen as the function suggests. I hope you understand that the points we are talking about are actually from the list of Offset that we have previously declared. Our class would finally look as follows:

Cool right? This small little class will allow us to draw stuff on our canvas. Moving on to the next section.

Canvas and Clear Button

We have our brush ready, we just need a canvas. We now move to the build function of our _MyHomePageState class.

Add the following lines of code to your build method(ignoring the sketch area which is already there):

Allow me to explain again. We create the sketch area as before and return a Scaffold from our build function. Ez Pz. Now in the body of the Scaffold we add an Appbar() and specify it’s text. For the body we use a GestureDetector() since we need to update the state of our app based on user inputs, specifically drag. We use the onPanUpdate method to check panning or drag on screen. Inside the setState method we see that we have the core of our application. I’ll explain each and every line of it :

1. RenderBox box = context.findRenderObject();

This line tells the application to find the object that has to be rendered from this context. In our case the object would be our paint from the Sketcher class.In simple words you can imagine a box that encapsulates our sketch area and that would be used to render our paint.

2. Offset point = box.globalToLocal(details.globalPosition);

This line of code converts our worldly movements on screen to local screen coordinates so that an Offset or coordinate can be obtained to start with. This point is the point on this box where it all began or from where it will all continue.

3. point = point.translate(0.0, -(AppBar().preferredSize.height));

This line translates/moves that point to our specified point. This is done in order to ensure that our line that we draw does not go over the Appbar and stays in the sketch area we have specified. This line of code is basically a check that makes sure that our app renders the paint where and as we want it to.

Lastly we add this point to our list of Offset so that our Sketcher can process it and paint accordingly.

In our onPanEnd function we just add a null value to our List so that we have nothing to paint.

We then add our sketch area as a child to this GestureDetector().

To clear the screen we have a floatingActionButton that removes each point from the list when it is pressed. When the list is empty we would have nothing to see and hence we achieve clarity along with some peace of mind.We specify how our button looks with the remaining properties.

For the lazy people like myself, the final code is available at:

AadumKhor/sketch-music

Copy paste it in your editor.

Now the fun part. From your project directory, type flutter run to test this project on a connected device.

Voilà

So in this tutorial we learnt about the CustomPainter class and implemented it beautifully in an application.

I know I should have added GitHub gists but there was some issue with them. Will add them in the next one for sure.

I hope you all enjoyed my debut blog. Stay tuned for more and keep learning.

You can check out my GitHub profile at :

AadumKhor - Overview

Also checkout these new blog from our publication techspace :

• Flutter Quick Start Guide!
• Swish: A self-gated Activation Function
• The Secret step-by-step Guide to learn Hacking — Spoonfed Edition!
• How to create Interactive Maps in React.js
• How Python’s List works so dynamically and efficiently: Amortized Analysis

Constructive feedback accepted xD.

Sketching app- Flutter was originally published in Techspace on Medium, where people are continuing the conversation by highlighting and responding to this story.