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.
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.