Art with Dart 🎯
Painting is a form of art where you showcase your creativity on canvas. And if you are a coder and also a painter, it becomes a deadly combination 🔥. Painters create art by playing with brushes and colors. Similarly, coders play with some keyboard keys and create magical art and this is what I am going to show in this blog. So, let’s do it…
What we will create?
In this blog, I will guide you to create the Dash bird which is the official mascot of Flutter (Because I am a Flutter fan). The art we are going to create is already displayed in the header of the blog. It looks amazing, right 😍?
Ingredients to create the magic…
We will be using the Flutter framework to create this beautiful piece of art. We don’t need to install any framework or IDE for this blog. We will be using Codepen online IDE where we will write code in Dart language. You can also do this using any IDE in your local machine by installing the Flutter framework.
Let’s start 🚀🚀🚀
Open the Codepen IDE and create a new Flutter pen from the menu on left. Once the pen is created you’ll see some boilerplate code in Flutter with output displayed on the right side. It will look like the below image.
Now, create a new class named DashBird which will extend the CustomPainter. CustomerPainter is a dart API used to create various types of shapes and components which can’t be created using Flutter’s predefined UI widgets.
After that, we need to override two methods void paint and bool shouldRepaint() inside DashBird class. In MyWidget class remove the Center widget inside the Scaffold body and add CustomPaint widget in place of it. In the painter property, call DashBird() constructor and pass an empty container to the child.
...
body: CustomPaint(
painter:DashBird(),
child: Container(),
),
...Ok, now the setup is ready. let’s start painting…
First, we will get the dimensions of the canvas inside paint() method with the help of Size object and create a Paint object to specify the style of our brush.
...
final width=size.width;
final height=size.height;
Paint paint=Paint();
...Now, we will start with making the claws of Dash. To make the claws we need to draw some oval shapes. To draw a shape, we will create a Path object.
...
Path oval=Path();
paint.color=Color.fromRGBO(139, 94, 60,1); // Color of legs
...Draw an oval shape with the help of addOval() method of Path object. Inside addOval method, provide the coordinates for oval shape in form of Rectangle (corners). To provide coordinates, use Offset() class. To fill this oval with color will use drawPath() method of canvas object. In the drawpath() method, we have to provide the path and paint object as arguments.
To create the left claw of dash, we will need 3 ovals.
...
//left claw
oval.addOval(Rect.fromPoints(Offset(width*0.28,height*0.885),Offset(width*0.32,height*0.98)));
canvas.drawPath(oval,paint);
oval.addOval(Rect.fromPoints(Offset(width*0.31,height*0.885),Offset(width*0.35,height*0.98)));
canvas.drawPath(oval,paint);
oval.addOval(Rect.fromPoints(Offset(width*0.34,height*0.885),Offset(width*0.38,height*0.98)));
canvas.drawPath(oval,paint);
...To create the right claw, we need 3 more ovals of the same color.
...//right claw
oval.addOval(Rect.fromPoints(Offset(width*0.64,height*0.885),Offset(width*0.6,height*0.98)));
canvas.drawPath(oval,paint);
oval.addOval(Rect.fromPoints(Offset(width*0.67,height*0.885),Offset(width*0.63,height*0.98)));
canvas.drawPath(oval,paint);
oval.addOval(Rect.fromPoints(Offset(width*0.7,height*0.885),Offset(width*0.66,height*0.98)));
canvas.drawPath(oval,paint);
...
The standing support is ready for Dash. Now we’ll create the body part. For that, we’ll first create oval with blue color and then the white part using another oval.
...
Path bigOval=Path();
paint.color=Color.fromRGBO(89, 170, 255,1);
bigOval.addOval(Rect.fromPoints(Offset(width*0.05,height*0.15),Offset(width*0.95,height*0.95)));
canvas.drawPath(bigOval,paint);//white curve
Path whiteCurve=Path();
whiteCurve.moveTo(width*0.18,height*0.68);
whiteCurve.quadraticBezierTo(width*0.2,height*0.94,width*0.5,height*0.94);
whiteCurve.moveTo(width*0.5,height*0.94);
whiteCurve.quadraticBezierTo(width*0.8,height*0.94,width*0.82,height*0.68);
whiteCurve.lineTo(width*0.18,height*0.68);
whiteCurve.close();
paint.color=Color.fromRGBO(242, 242, 242,1);
canvas.drawPath(whiteCurve,paint);
//blue curve just above white curve
Path smallBlueCurve=Path();
smallBlueCurve.moveTo(width*0.18,height*0.6799);
smallBlueCurve.quadraticBezierTo(width*0.5,height*0.8,width*0.82,height*0.6799);
paint.color=Color.fromRGBO(89, 170, 255,1);
canvas.drawPath(smallBlueCurve,paint);
...
Now we will create eyes for the Dash. For that, we will use drawCircle() method of canvas object. Provide the offset for the center as the first argument, radius as the second argument and paint object as the third argument.
...
//big blue circles for eyes
paint.color=Color.fromRGBO(61, 145, 255,1);
canvas.drawCircle(Offset(width*0.37,height*0.5),width*0.2,paint);
canvas.drawCircle(Offset(width*0.63,height*0.5),width*0.2,paint);//black circles
paint.color=Color.fromRGBO(0,0,0,1);
canvas.drawCircle(Offset(width*0.35,height*0.47),width*0.07,paint);
canvas.drawCircle(Offset(width*0.65,height*0.47),width*0.07,paint);
This will create the outer part of the eyes. It is looking scary without eyeballs 😂. So, let’s create eyeballs.
//eye border
Paint paintBorder=Paint()..color=Color.fromRGBO(32, 170, 140,1)
..style=PaintingStyle.stroke
..strokeWidth=6.0;
canvas.drawCircle(Offset(width*0.35,height*0.47),width*0.07,paintBorder); canvas.drawCircle(Offset(width*0.65,height*0.47),width*0.07,paintBorder);
//big white circles
paint.color=Colors.white;
canvas.drawCircle(Offset(width*0.35,height*0.47),width*0.02,paint);
canvas.drawCircle(Offset(width*0.65,height*0.47),width*0.02,paint);//tiny white circle canvas.drawCircle(Offset(width*0.40,height*0.47),width*0.005,paint);
canvas.drawCircle(Offset(width*0.69,height*0.45),width*0.005,paint);
Our Dash has got its eyes and can see this beautiful world… Now let’s make it fly. To create wings we again create two ovals and rotate them according the position we want.
//left wing
Path wing1=Path();
paint.color=Color.fromRGBO(61, 145, 255,1);
wing1.addOval(Rect.fromPoints(Offset(width*0.035,height*0.45),Offset(width*0.165,height*0.78)));
canvas.translate(width*0.1,height*0.6);
canvas.rotate(-38);
canvas.translate(-width*0.1,-height*0.6);
canvas.drawPath(wing1,paint);//right wing
Path wing2=Path();
paint.color=Color.fromRGBO(61, 145, 255,1);
wing2.addOval(Rect.fromPoints(Offset(width*0.805,height*0.53),Offset(width*0.935,height*0.87)));
canvas.translate(width*0.6,height*0.75);
canvas.rotate(32);
canvas.translate(-width*0.6,-height*0.75);
canvas.drawPath(wing2,paint);
Dash is ready to fly now. But wait how can it breathe, we forgot the nose😬. Let’s add it…
To create a cone kind of shape, put the pointer to a particular point using moveTo() method of the Path object. Draw an arc using quadraticBezierTo() method. Provide endpoints of arc as arguments. Then draw a line using lineTo() method. close() method will put the pointer to the point we started drawing nose so that we get a closed path to color.
//nose
Path nose=Path();
nose.moveTo(width*0.465,height*0.5);
nose.quadraticBezierTo(width*0.5,height*0.45,width*0.54,height*0.5);
nose.lineTo(width*0.5,height*0.65);
nose.close();
paint.color=Color.fromRGBO(139, 94, 60,1);
canvas.drawPath(nose,paint);Dash is almost ready. A small cherry on top is needed now. Let’s add it…
//head fur
Path head=Path();
paint.color=Color.fromRGBO(89, 170, 255,1);
head.addOval(Rect.fromPoints(Offset(width*0.435,height*0.085),Offset(width*0.475,height*0.175)));
canvas.drawPath(head,paint);
head.addOval(Rect.fromPoints(Offset(width*0.465,height*0.085),Offset(width*0.505,height*0.175)));
canvas.drawPath(head,paint);
head.addOval(Rect.fromPoints(Offset(width*0.495,height*0.085),Offset(width*0.535,height*0.175)));
canvas.drawPath(head,paint);
Finally, the Dash is ready. Though it is not responsive to every screen size, it looks pretty 😍😍 . In this way, we can create plenty of art pieces by writing few lines of code.
Find the full source code over here.
If you liked the dash then shower some love with claps…
