A Practical Example of Painting in Flutter
By: Constantin Stan
Tags: Painting, Dart, Flutter, Logo

A Practical Example of Painting in Flutter

How I painted the logo of my business

Constanting’s logo

The tools of the trade

Flutter puts four tools on the table for painting it possible:

CustomPaint — the space we paint in

— the space we paint in CustomPainter — paints the things we want

— paints the things we want Paint — the paint style we use (strokes, fills, filters)

— the paint style we use (strokes, fills, filters) Canvas — the surface we paint on

CustomPaint provides the Canvas and delegates the painting process to the CustomPainter. Without CustomPaint we can’t paint.

CustomPainter paints things we want on the Canvas.

Paint allows us to define the style we’ll use when painting (strokes, fills, filters).

Canvas provides us with a surface on which the CustomPainter can paint using some Paint.

The logo

Constanting is my business, a one-man business settled in The Netherlands, that provides IT consultancy and software development services.

I’m still on the lookout for products to build from ground-up and dedicate 100% to. Unfortunately, I haven’t found those, yet. So I offer consultancy and build products for different clients.

I created and drawn my business logo on my own, almost 1 year ago. If you’re interested, I’ve written the story of the logo itself.

The trade

Flutter doesn’t have the SVG vectorial format as 1st class citizen and that means that SVG is not supported out of the box. For using SVG we’d have to add the flutter_svg package to our project.

If that is not supported or we want to skip that, then we can either embed the vectors we want in a custom font and use that font in our application or manually paint the image. We’ll do the latter.

This example starts from my existing logo that we’ll replicate within a CustomPaint using a CustomPainer. Usually, you’d start from an image or from something you’ve drawn on paper.

Constanting’s logo

My goal is to re-create Constanting’s logo as a CustomPainter extension that paints the above image in a square centered within the space available.

There are plenty of ways for doing this and it is debatable which one to use.

I started with the SVG file of the logo. There are some attributes and elements in the SVG that make life easy when it comes to reproducing a painting.

There is the viewBox which is a rectangle and gives us info about what we see when the SVG data is rendered.

Then, there are the shapes that will be rendered. In our case, they’re all paths.

Although SVG does a better job when it comes to readability, the drawing API in Flutter is also quite straight forward.

For example, the domino’s path looks like this in SVG:

<path fill=”#CB4438" stroke=”none” d=”

M 481.85 777.15

L 0 777.15 0 1000 481.85 1000 481.85 777.15 Z”/>

If you’re not familiar with SVG, the above will read, in plain English, like this: draw a path , fill it with a sort of red color ( #FF0000 would be red), with no stroke by M oving to these coordinates and then drawing L ines to the following pair of coordinates.

The more verbose equivalent in Flutter is:

List<Point> points = <Point>[Point(481.85, 777.15), Point(481.85, 1000), Point(0, 1000), Point(0, 777.15)];

Point start = points[0]; Path path = Path();

path.moveTo(start.x, start.y);

for(int i=1; i<points.length; i++) {

path.lineTo(points[i].x, points[i].y) ;

}

path.lineTo(start.x, start.y); Paint paint = Paint();

paint

..color = const Color(0xFFCB4438)

..style = PaintingStyle.fill; canvas.drawPath(path, paint);

It’s a clear example of declarative (SVG) vs. imperative (Dart). We can see already the Canvas and Paint tools in action.

So we’ll extract the points of each piece. I prefer to have them clockwise starting with the top-left point of each graphic.