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:

https://github.com/Usama455/play-with-me

Creating Object

This class will create a circle at the center of your screen.

Now let’s start interacting

1 ) Tapping on the object

2) Long press on the object

onLongPress: (){setState(() {});},

you can opt to show any behavior depending on your application on long press

3–4) Dragging the object Up and Down

Search Results
Calculator result
40 * .3 =

5) Making two objects interact with each other

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

7) A switch

8) Slider

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

Concluding

I am a tech enthusiast working with Javascript, flutter, aws, IoT and web development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store