Блог

Я хочу создать разделенный круг на 4 секции и поместить немного SVG в каждую секцию? как показано ниже.

Я много пробовал, но не смог этого добиться.

Этот тип пользовательского интерфейса возможен с помощью CustomPaint виджета с CustomPainter помощью flutter.

Это дает вам холст для рисования любого сложного пользовательского интерфейса с использованием элементарных форм, таких как круги, дуги, линии, контуры и т. Д.

Виджет CustomPaint:

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

Виджет ChartPainter:

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

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

Вы можете проверить официальную документацию для CustomPaint widget здесь

Я добавил небольшой проект, чтобы вы начали: QuadrantChart