Make your own custom shapes and designs using CustomPaint() in Flutter

import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
Scaffold(
appBar: AppBar(
title: Text('Custom Shape'),
),
);
body: CustomPaint(
painter: MyShape(),
child: Container(),
),
class MyShape extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return true;
}
}
void paint(Canvas canvas, Size size) {
// TODO: implement paint
final paint = Paint();
final path = Path();
}
A simple bezier curve made in flutter
void paint(Canvas canvas, Size size) {
// TODO: implement paint
final paint = Paint();
final path = Path();
paint.color = Colors.lightGreen;
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 5;
path.moveTo(0, size.height * 0.8);
path.quadraticBezierTo(
size.width * 0.1,
size.height * 0.78,
size.width * 0.3,
size.height * 0.89,
);
path.quadraticBezierTo(
size.width * 0.45,
size.height * 0.95,
size.width * 0.6,
size.height * 0.85,
);
path.quadraticBezierTo(
size.width * 0.75,
size.height * 0.75,
size.width * 0.85,
size.height * 0.7,
);
path.quadraticBezierTo(
size.width * 0.95,
size.height * 0.65,
size.width,
size.height * 0.68,
);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(0, size.height * 0.8);

canvas.drawPath(path, paint);
}
void paint(Canvas canvas, Size size) {
// TODO: implement paint
final paint = Paint();
final path = Path();
paint.color = Colors.blueAccent;
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 15;
path.moveTo(0, size.height * 0.8);
path.quadraticBezierTo(
size.width * 0.1,
size.height * 0.78,
size.width * 0.3,
size.height * 0.89,
);
path.quadraticBezierTo(
size.width * 0.45,
size.height * 0.95,
size.width * 0.6,
size.height * 0.85,
);
path.quadraticBezierTo(
size.width * 0.75,
size.height * 0.75,
size.width * 0.85,
size.height * 0.7,
);
path.quadraticBezierTo(
size.width * 0.95,
size.height * 0.65,
size.width,
size.height * 0.68,
);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(0, size.height * 0.8);

canvas.drawPath(path, paint);
final paint1 = Paint();
paint1.color = Colors.yellow;
paint1.style = PaintingStyle.fill;
canvas.drawPath(path, paint1);

}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store