Question 359058 in Flutter Question posted in
The official Flutter documentation can be found here.

Custom Shape in flutter Like OvalShape

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

enter image description here
enter image description here

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!

Tags:

2

Answers


  1. 0

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

    enter image description here

    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(),
            ),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search