Custom Paint with Flutter
In this article, we will explore the Custom Paint with Flutter. We perceive how to execute a demo program. We will tell you the best way to create modified shapes, and sizes of the widgets using custom paint, and how to use it in your Flutter applications.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
CustomPaint is a widget that gives a material on which to draw during the paint stage. It essentially guarantees the UI planning of those parts that can’t be gotten from the ordinary shapes given by Flutter. This widget shows the adaptability of Flutter to its peers.
This demo ui shows how to create a customized shape in Flutter and how shapes will work using the custom paint widget in your Flutter applications. We will show you a two-draw shape of is circle and line on your device.
Demo Ui Module::
Constructor:
To utilize CustomPaint, you need to call the constructor underneath:
CustomPaint({
super.key,
this.painter,
this.foregroundPainter,
this.size = Size.zero,
this.isComplex = false,
this.willChange = false,
super.child,
})Properties:
There are some properties of CustomPaint:
- > child: This property is used to the child holds whatever widget is needed to create the CustomPaint.
- > foregroundPainter: This property is utilized by the painter who paints after the children. Likewise, it takes a class that extends the class CustomPaint.
- > key: This property is used to control how one widget replaces another widget in the tree.
- > painter: This property is utilized by the painter who paints before the child. Here you would have to make a class that extends the class CustomPaint.
- > size: This property is used by the size of this CustomPaint, at first size is equivalent to Size.zero which implies if you don’t characterize a size or child, then the CustomPaint won’t show.
- > willChange: This property is utilized to the whether the raster reserve ought to be informed that this painting is probably going to change in the following frame.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called custom_circle.dart inside the lib folder.
To have the option to utilize the CustomPaint widget, you want to make a class that extends the CustomPaint. The class would need to execute two strategies paint() and shouldRepaint(). You can draw a circle by calling the strategy drawCircle() on the canvas object:
import 'package:flutter/material.dart';class CustomCircle extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.teal.shade300;
paint.style = PaintingStyle.fill;
paint.strokeCap = StrokeCap.round;
paint.strokeJoin = StrokeJoin.round;Offset offset = Offset(size.width * 0.5, size.height);
canvas.drawCircle(offset, 50, paint);
}@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}If we check the code above, first, we are utilizing the Paint class, which is utilized to style the canvas. We furnished it with teal.shade300, the painting style is filled, strokeCap was round, strokeJoin was likewise round, offset we will add width and height. We call the strategy drawCircle and pass to it the contentions offset, 50, and paint.
We will pass the above method into a customPaint widget:
CustomPaint(
painter: CustomCircle(),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height * 0.1,
),
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
Create a new dart file called custom_line.dart inside the lib folder.
To define a line alone, you want to likewise utilize the CustomPaint widget, and make another class CustomLine that extends the CustomPaint class. Here we likewise utilize the Paint object to style the CustomLine and we provide it with a width of 8. Then we want to make a starting point and an ending point that would be utilized to mirror the start of the line and the end.
import 'package:flutter/material.dart';class CustomLine extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.teal;
paint.strokeWidth = 8;
paint.strokeCap = StrokeCap.round;Offset startingOffset = Offset(0, size.height);
Offset endingOffset = Offset(size.width, size.height);canvas.drawLine(startingOffset, endingOffset, paint);
}@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}In this way, we determine that the starting point should begin at the X-axis with coordinate 0 and the y-axis with the most extreme height while the endpoint should need to organize the greatest width as the X-axis and most extreme height as the y-axis consequently making a straight even line. We call the system drawLine and pass to it the disputes startingOffset, endingOffset, and paint.
Again we will pass the other above method into a customPaint widget:
CustomPaint(
painter: CustomLine(),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.7,
height: MediaQuery.of(context).size.height * 0.08,
),
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_custom_paint/custom_circle.dart';
import 'package:flutter_custom_paint/custom_line.dart';void main() {
runApp(const MyApp());
}class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const CustomPaintDemo());
}
}class CustomPaintDemo extends StatefulWidget {
const CustomPaintDemo({Key? key}) : super(key: key);@override
_CustomPaintDemoState createState() => _CustomPaintDemoState();
}class _CustomPaintDemoState extends State<CustomPaintDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Custom Paint Demo"),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: CustomPaint(
painter: CustomCircle(),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height * 0.1,
),
),
),
Center(
child: CustomPaint(
painter: CustomLine(),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.7,
height: MediaQuery.of(context).size.height * 0.08,
),
),
),
],
),
);
}
}Conclusion:
In the article, I have explained the Custom Paint With Flutter; you can modify this code according to your choice. This was a small introduction to the Custom Paint With Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying Custom Paint in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on Custom Paint and how to create and use it in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
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.
