Flutterexperts

Flutter has been Quintessential choice among the Developers Fraternity as a reason of the Language’s Ability to Develop Wonderful User Interfaces designs at the Desired frame per second. In this Blog, we’ll try to give you a quick Overview of Flutter and Instruct you to build your flutter app with Custom Paint Design which basically enhance the User Interface of the Application.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

For Getting Accustomed with the Flutter basics , You can always go through the video made by google about its Magnificent Framework:

What is the Dire Need to use Custom Paint in Flutter:

Custom Paint basically ensure the UI designing of those components that cannot be derived from the regular shapes provided by Flutter . This widget shows the customizability of flutter from its peers .Custom Painter is :

A widget that provides a canvas on which to draw during the paint phase.

:To paint in Flutter you can use the CustomPaint widget which basically takes size of its parent if not given the child .

• The CustomPainter subclass overrides two methods: paint() and shouldRepaint().

How to Install Flutter :

Installing Flutter SDK into your device is easily done through with the help of going through the official flutter doc and following the steps provided for your respective windows , Linux, macOS at flutter.dev.

Create a new flutter app

1. Firstly, Create a new project and then clear all the code in the main.dart file. Type below command in your terminal:-

flutter create yourProjectName

Code Implementation:

First, create a class that will be landing page of the module a.k.a CustomPaintExample class.

So, let me walk you through the code to give better understanding of whats happening here. As you can see the UI we’re going to achieve so accordingly, I created a class CustomPaintExample which contains the code for the UI. There are two main elements, the shape and the button animation. The button when pressed increases the value of percentValue by 10 and accordingly the progress on the button border can be seen increasing. The widget is also broken down into two elements CustomPainterExample.buildShape() and CustomPainterExample.buildButtonAnimation() which I created in different class CustomPainterExampleWidgets.

In the Class CustomPainterExampleWidgets, The element CustomPainterExample.buildShape() returns a ClipPath which consists of clipper CustomShapeClass and the other element CustomPainterExample.buildButtonAnimation() consist of a Container with Custom Paint as its child displayed at the Centre of screen .The CustomPaint first asks its painter to paint on the current canvas, then it paints its child, and then, after painting its child, it asks its foregroundPainter to paint. The Percentage increase is shown by the onPressed method at the Raised Button.Let’s understand what foregroundPainter implies. This also illustrate that on choosing painter instead of the foregroundPainter will do the exact opposite.

import 'package:flutter/material.dart';

class CustomShapeClass extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    // TODO: implement getClip
    var path = new Path();
    path.lineTo(0, size.height / 4.25);
    var firstControlPoint = new Offset(size.width / 4, size.height / 3);
    var firstEndPoint = new Offset(size.width / 2, size.height / 3 - 60);
    var secondControlPoint =
    new Offset(size.width - (size.width / 4), size.height / 4 - 65);
    var secondEndPoint = new Offset(size.width, size.height / 3 - 40);

    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);

    path.lineTo(size.width, size.height / 3);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper)
  {
    return true;
  }
}

The CustomShapeClass extending CustomClipper is illustrated above .In this control points and end points are defined in which the quadratic bezier curve is drawn .Now let’s declare the core of the App, ButtonPainter class.

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ButtonPainter extends CustomPainter
{
  Color buttonBorderColor;
  Color progressColor;
  double percentage;
  double width;
  ButtonPainter({this.buttonBorderColor,this.progressColor,this.percentage,this.width});
  @override
  void paint(Canvas canvas, Size size) {
    Paint line = Paint()
      ..color = buttonBorderColor
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = width;
    Paint complete =  Paint()
      ..color = progressColor
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = width;
    Offset center  = Offset(size.width/2, size.height/2);
    double radius  = min(size.width/2,size.height/2);
    canvas.drawCircle(
        center,
        radius,
        line
    );
    double arcAngle = 2*pi* (percentage/100);
    canvas.drawArc(
        Rect.fromCircle(center: center,radius: radius),
        -pi/2,
        arcAngle,
        false,
        complete
    );
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Here we get the different properties lineColor, which means the color for the track, on which the progress would be drawn, completeColor for the progress finished,completePercent for the level of the progress finished. From its parent widget, we send down this property, here we simply draw.

ButtonPainter extends the class CustomPainter and we need to override its paint method to draw the graphics. To draw, from the start, we need to announce something called Paint, it typifies all the properties that are expected to draw something on the screen. So we have two Paint objects; the first one is a line that speaks to the track line on which the progress would be drawn. We give it a color, that is provided as a property, the strokeCap is round, and we tell the style to be PaintingStyle.stroke as, we don’t need a filled circle we simply need a stroke, at that point set the width to the provided one. So additionally, we announce the complete Paint object for the progress finished.

Thus, from the start, we have to draw a full circle and afterward an arc on it, that is finished.

Offset center  = Offset(size.width/2, size.height/2);
double radius  = min(size.width/2,size.height/2);

In these two lines, we calculate the directions for the center of the circle and the radius, its basic, the center is width, and the height of the container divided by 2. We need the center of the circles exactly in the middle. size Is what we get as a parameter in the paint function, which is the size of the container. radius It is the minimum of the half of the width and the height, and now we are taking a minimum of both as the container might not be a square always.

canvas.drawCircle(center,radius,line);

Now we just draw with the drawCircle function called on the provided canvas object, where we go in the center, the radius, and the Paint object.

canvas.drawArc(Rect.fromCircle(center: center,radius: radius),
    -pi/2,arcAngle,false,complete);

Now, we figure the angle for the completed arc, which it appeared. I am not going into the geometric calculation. To call drawArc, we need to specify a Rect, which is the bounding box of the arc, we get the Rect encompassing the circle parameters we drew earlier. At that point, we give a beginning angle, which is -pi/2 radians, remember its not 0. The top is -pi/2, 0 is the right-most purpose of the circle. We supply the arcAngle at that point, which is how much the arc should extend as well. We pass in false after that to tell that we don’t want the finish of the arc to be connected back to the center and at last we send in the Paintobject, complete. That’s all we expected to draw using CustomPaint.

Now, let add the animations.

percentageAnimationController = new AnimationController(vsync: this,
    duration: new Duration(milliseconds: 1000))
  ..addListener((){setState(() {
      percentage=lerpDouble(percentage,newPercentage,
      percentageAnimationController.value);});});

We add the animation on HomePagescreen in initState() method. Then, we have added a listener on the AnimationController which is called at each step of the animation, and we change the percentage. To change the percentage, we get an inserted value with the help of lerpDoublefunction, the value is within percentage and newPercentage which is ten more than the original value, we interpolate it based on the AnimationController’svalue.

We add this line in the onPressed of the button to kick off the animation.

percentageAnimationController.forward(from: 0.0);

You will see a full code on a GitHub, and this is a small circular progress example to integrate with custom paint, and this below video shows how Custom Paint will work.

Hope this blog will provide you with sufficient information in Trying up Custom Paint in your flutter projects .Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Click the GitHub link below to find the source code of the Custom Paint Demo.

flutter-devs/Custum_Paint_Demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---