Custom Painting: Draw Gradient Border in Flutter — Part 1

Md Didarul
3 min readFeb 4, 2023

--

Hi Flutter Enthusiast! 😄

We all like gradients, don’t we? Gradients make simple things look vibrant.

Firstly, let’s see how to add a regular single color border around an image. We first display an image inside a container.

Container(
height: 100,
width: 100,
child: const FlutterDashImage(),
),

Let’s add a green border with the help of container decoration :

Container(
height: 100,
width: 100,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
border: Border.all(color: Colors.greenAccent, width: 4),
),
child: const FlutterDashImage(),
),

What happens here is, FlutterDashImage widget takes an image from asset and displays it with the help of image.asset() method. We are creating the border around the child with the border property of container.

Output Looks like this:

Container gives us the ability to draw background as gradient but not border. So, we need to use a Custom Painter to draw. Let’s create a Gradient Painter class named GradientBorderPainter which extends CustomPainter class and overrides paint() and shouldRepaint() method.

class GradientBorderPainter extends CustomPainter {
final double height;
final double width;
final double strokeWidth;
final Gradient gradient;
final _paint = Paint()..style = PaintingStyle.stroke;

GradientBorderPainter({
required this.height,
required this.width,
required this.strokeWidth,
required this.gradient,
});

@override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
final rect = Rect.fromCenter(
center: center,
width: width,
height: height,
);
_paint
..strokeWidth = strokeWidth
..shader = gradient.createShader(rect);
canvas.drawRect(rect, _paint);
}

@override
bool shouldRepaint(GradientBorderPainter oldDelegate) {
// In Production, this painting might not be needed to redraw every time.
// Compare the propertise between oldDelegate and current object and only
// return true if there is any change.
return true;
}
}

All the painting happens inside the paint() method.

Firstly, we are calculating the center position of given canvas. Then creating a Rect . After that, we give our Paint object a shader , which is created from the given gradient. Whenever we use this instance of Paint to draw on canvas, the drawing will be happened using the Shader of the Gradient. Lastly, we need to set the painting style of the _painter to PaintingStyle.stroke

It is very important to set the painting style to stroke because we are trying to draw a border using stroke .

To display a Custom Paint , we need to use Custom Painter widget. The naming seems to be confusing at first but don’t worry, you will get used to it with time.

CustomPaint(
size: const Size(double.infinity, double.infinity),
painter: GradientBorderPainter(
height: 100,
width: 100,
strokeWidth: 4,
gradient: const LinearGradient(
colors: [Colors.yellowAccent, Colors.redAccent, Colors.greenAccent],
),
),
)

Then we display the border and the image using a stack.

import 'package:flutter/material.dart';
import 'flutter_dash_image.dart';
import 'gradient_border_paint.dart';

class HomePage extends StatelessWidget {
const HomePage({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Gradient Progressbar"),
),
body: Center(
child: SizedBox(
height: 100,
width: 100,
child: Stack(
children: [
const FlutterDashImage(),
const GradientBorderPaint(),
],
),
),
),
);
}
}

The final output looks like below:

So, That’s it for today. We have learned, how to draw a gradient border around a widget. In next part, we will learn how to animate the gradient.

If this article helped you in some way, don’t forget to clap 👏 .

Follow me on:

Twitter: https://twitter.com/islamdidarmd

LinkedIn: https://www.linkedin.com/in/islamdidarmd/

--

--

Md Didarul

I am a Mobile Application Developer. I love to build cool things with Flutter. I have prior experience in Android App Development with Kotlin and Java