How to Draw an Oval in Flutter
•2 min read
Drawing an oval in Flutter can be achieved using the CustomPainter
class or by leveraging built-in widgets like Container
with an elliptical BoxDecoration
.
Using CustomPainter
The CustomPainter
class allows you to draw custom shapes, including ovals, on a canvas.
Example
import 'package:flutter/material.dart'; class OvalPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { final paint = Paint() ..color = Colors.purple ..style = PaintingStyle.fill; canvas.drawOval(Rect.fromLTWH(50, 50, 150, 100), paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) => false; } class OvalWidget extends StatelessWidget { @override Widget build(BuildContext context) { return CustomPaint( size: Size(200, 200), painter: OvalPainter(), ); } } void main() { runApp(MaterialApp( home: Scaffold( body: Center( child: OvalWidget(), ), ), )); }
Using a Container with Elliptical Decoration
For simpler use cases, you can use a Container
with an elliptical BoxDecoration
.
Example
Container( width: 150, height: 100, decoration: BoxDecoration( color: Colors.purple, borderRadius: BorderRadius.circular(75), ), );
By using these methods, you can easily draw ovals in your Flutter applications.