CODEWITHSUNDEEP
flutter
Ghasem Khalili
Ghasem Khalili

Reputation: 973

How can I create a divided circle into 4 sections in Flutter?

I want to create a divided circle into 4 sections and put some SVG in each section? as below.

enter image description here

I tried a lot but I could not be able to achieve that.

Upvotes: 0

Views: 1120

Answers (1)

yusufpats
yusufpats

Reputation: 856

This type of custom of UI is possible using a CustomPaint widget with CustomPainter in flutter.

It gives you a canvas to draw any complex UI using elemental shapes like circles, arc, lines, path, etc.

CustomPaint Widget:

CustomPaint(
   painter: ChartPainter(),
   child: Container(),
 )

ChartPainter Widget:

class ChartPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
     // TODO: start painting shapes here
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

You can check the official documentation for CustomPaint widget here

I have added a small project to get you started: QuadrantChart

Upvotes: 3

Related Questions