9 ways to interact with custom painter in Flutter
Flutter is becoming a very popular tool for cross platform application development. It makes development very precise and simple as compared to native.
In this post, we will learn how to make a custom paint object in flutter and how can we interact with it. Our goal here to interact with the object using 9 different ways. This will help you understand different options you can use in your flutter application for user input.
You can set various responses as a result of these interactions. This article is mainly about the options you can give user to interact within the app.
Let’s Start
Here is the project link if you want to skip directly to the code:
Creating Object
Let’s start with a simple circle at the center of the screen:
This class will create a circle at the center of your screen.
Now let’s start interacting
1 ) Tapping on the object
The first option to interact with the object is obviously by tapping or clicking on the object created. We will change the object color by tapping on it. To detect the tapping on the object precisely, we use gesture recognition as a child of the container which is calling object class. and passing an array of colors which will change the color on each tap in order.
2) Long press on the object
The second option for the user is to long press on the object. For this, we will use the GestureDetector class again and below on tapping, we will add onLongPress option.
onLongPress: (){setState(() {});},
you can opt to show any behavior depending on your application on long press
3–4) Dragging the object Up and Down
GestureDetector can detect the vertical and horizontal drag on the container. We have found the object location and calculate the difference between the location and dragging position. So if we tap on the object now and drag down, the object size will reduce and vice versa. To make this work we pass the size argument as well to the custom paint class along with the color string.
Calculator result
40 * .3 =
5) Making two objects interact with each other
We can create another object using custom paint and make changes or interact with the existing object by detecting interaction with the new object. Here we will create a brick object and kill the first object my moving brick towards the circle.
Making brick object:
Moving brick towards circle and killing circle upon hitting:
Here you can see we are mainly playing with changing statefull widget values and classes and object which is the backbone of Dart and Flutter.
6) Finally, A button
We can duplicate the circle with the same properties and we can do that using a button. You can do whatever you want as a response of the reaction as I already mentioned. This post is mainly about giving users options to interact with the object in different ways. We will create a variable based on its value, we will duplicate the circle with same dimensions but different positions.
7) A switch
A toggle switch can be added to change the shape. We will change the status of a Boolean on toggle and based on that we will remove the circle and create a square instead.
8) Slider
A slider can be added using package FLUTTER_XLIDER . We can make changes in the object based on slider value. Slider has many uses and there are a lot of customization that you can do. A simple implementation is as :
We have also added an image as the back ground image of the app using:
decoration: BoxDecoration(image: DecorationImage(image: AssetImage(‘PATH TO YOUR IMAGE’),fit: BoxFit.cover,),),
9) List Picker
The final option that we implemented here was a list picker. There are several ways to implement a list picker in flutter. We have used CupertinoPicker package of flutter. It has predefined date and time pick functions as :
Concluding
This article intended to show you some of the ways you can use to interact with custom paint object in flutter. There are many more options which we can use to make our flutter based applications interactive and appealing for the users. I hope you can get started with all of the options discussed here from this article. Happy Coding :)
