What is custom paint in flutter and how to use it?

CustomPaint is a Flutter widget that allows you to create custom graphics and animations in your app. It’s a powerful and flexible widget that gives you full control over the drawing process.

CustomPaint works by calling a CustomPainter object to draw on a canvas. The CustomPainter class provides two methods: paint and shouldRepaint. The paint method is where you define your custom graphics, while the shouldRepaint method is called whenever the CustomPaint widget needs to be redrawn.

How to use CustomPaint in Flutter:

Here’s an example code for drawing “flutterfever.com” using CustomPaint widget in Flutter:

import 'package:flutter/material.dart';

class FlutterFeverPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0;

    final textSpan = TextSpan(
      text: 'flutterfever.com',
      style: TextStyle(fontSize: 50.0, fontWeight: FontWeight.bold),
    );

    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    )..layout();

    final x = (size.width - textPainter.width) / 2.0;
    final y = (size.height - textPainter.height) / 2.0;

    final offset = Offset(x, y);
    textPainter.paint(canvas, offset);

    canvas.drawLine(
      Offset(x, y + textPainter.height),
      Offset(x + textPainter.width, y + textPainter.height),
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Fever Paint Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Fever Paint Demo'),
        ),
        body: Center(
          child: SizedBox(
            width: 300.0,
            height: 200.0,
            child: CustomPaint(
              painter: FlutterFeverPaint(),
            ),
          ),
        ),
      ),
    );
  }
}

output:

In this example, we create a FlutterFeverPaint class that extends CustomPainter. In the paint method, we define the style of the paint object, create a TextPainter to render the text, and draw a line at the bottom of the text. In the Myappwidget, we create a CustomPaint widget and pass in the FlutterFeverPaint object to draw the custom paint.

Another example of custom painter:

material.dart';

class SunflowerPainter extends CustomPainter {
  SunflowerPainter({required this.seeds});

  final int seeds;

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = min(size.width, size.height) / 2;

    final goldenRatio = (sqrt(5) + 1) / 2;
    final angleIncrement = 2 * pi / goldenRatio;

    final seedPaint = Paint()..color = Colors.black;
    final centerPaint = Paint()..color = Colors.yellow;

    canvas.drawCircle(center, radius, centerPaint);

    for (var i = 0; i < seeds; i++) {
      final theta = i * angleIncrement;
      final r = sqrt(i) / sqrt(seeds) * radius;
      final point = Offset(r * cos(theta), r * sin(theta)) + center;

      canvas.drawCircle(point, 3, seedPaint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class Sunflower extends StatelessWidget {
  Sunflower({required this.seeds});

  final int seeds;

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: SunflowerPainter(seeds: seeds),
      child: Container(),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Sunflower'),
      ),
      body: Center(
        child: Sunflower(seeds: 1000),
      ),
    ),
  ));
}

Output: