Back to Posts

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.