Using Flutter Custom Painter for creating Logos

#flutter #fluttercustompainter #flutterui #flutterdesign

For beginners...
Flutter is well known for giving developers the control over each pixel. It can be used to create amazing shapes and pretty much any UI design from our imagination.
Flutter provides us with the CustomPaint widget, to give us this capability to draw anything in its canvas.

Now coming back to the post,
I replicated LG's famous logo using Custom Painter. In my free time I like to tinker with Flutter's Custom Painter. Sharing one such creation of mine:

import 'package:flutter/material.dart';
import 'dart:math' as math;

class LG extends StatelessWidget {
  const LG({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: Logo(context),
      size: const Size(150.0, 150.0),
    );
  }
}

class Logo extends CustomPainter {
  BuildContext context;
  Logo(this.context);
  @override
  void paint(Canvas canvas, Size size) {
    final red = Paint()..color = const Color(0xFF990033);
    final whiteFilled = Paint()..color = Colors.white;
    final white = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 12;

    //the circle
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 125, red);

    //the G and L in the logo
    final path = Path()
      ..moveTo((size.width / 1.25), (size.height / 2))
      ..arcTo(
          Offset((size.width / 2 - 100), (size.height / 2 - 100)) &
              const Size(200, 200),
          0,
          math.pi * 1.5,
          true)
      ..moveTo(size.width / 2 + 106, size.height / 2)
      ..lineTo(size.width / 2 + 30, size.height / 2)
      ..moveTo(size.width / 2, size.height / 2 - 50)
      ..lineTo(size.width / 2, size.height / 2 + 50)
      ..moveTo(size.width / 2 - 6, size.height / 2 + 50)
      ..lineTo(size.width / 2 + 25, size.height / 2 + 50)
      ..close();
    canvas.drawPath(path, white);

    //the white circle in the logo
    final circle = Path()
      ..arcTo(
          Offset(size.width / 2 - 60, size.height / 2 - 45) &
              const Size(30, 30),
          0,
          math.pi * 1.9999999,
          true)
      ..close();
    canvas.drawPath(circle, whiteFilled);
  }

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

The output will be this:

You can visit this site for viewing such creations of mine 😂.
You can also visit this GitHub repo for the source code. Do give the repo a ✨ if you like my work.