Custom Shape in flutter Like OvalShape

Question

I'm working on a Flutter project and I need to create a custom shape that looks like the one shown below:

I've attempted to use CustomShapeClipper, but I couldn't quite achieve the exact shape I need.

I've heard about the CustomPainter widget in Flutter, but I'm not familiar with it. Can someone provide guidance on how to create this specific shape using CustomPainter or suggest alternative approaches to achieve it?

Any help or suggestions would be greatly appreciated. Thank you in advance!

Answer 1

The simple way to achieve oval shape you can use ShapeDecoration in container and set the shape to StadiumBorder like below:

Code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 50,
            width: 150,
            decoration: ShapeDecoration(
              color: Colors.blue,
              shape: StadiumBorder(),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

using Flutter Shape Maker you can create CustomPainter code from any svg.

go to the website on the top left there is a button named Svg to customPaint paste your svg code there or browse your svg file and it will generate the code for you use it in your project.