Custom Painting: Draw Gradient Border in Flutter — Part 1
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