Cómo dibujar una forma personalizada en flutter

Ya no tienes que investigar más por todo internet porque llegaste al sitio adecuado, contamos con la solución que deseas y sin problemas.

Solución:

Una solución es implementar un pintor personalizado (CustomPainter) y luego usar el método arcTo para dibujar cada parte de la rueda.

A continuación, puede establecer el color usando canvas.drawPath.

Finalmente, úsalo donde quieras usando un widget CustomPaint:

Ejemplo de trabajo completo :

import 'dart:math';
import 'package:flutter/material.dart';

class Home extends StatefulWidget 
  @override
  State createState() 
    return _HomeState();
  


class WheelPainter extends CustomPainter 
  Path getWheelPath(double wheelSize, double fromRadius, double toRadius) 
    return new Path()
      ..moveTo(wheelSize, wheelSize)
      ..arcTo(Rect.fromCircle(radius: wheelSize, center: Offset(wheelSize, wheelSize)), fromRadius, toRadius, false)
      ..close();
  

  Paint getColoredPaint(Color color) 
    Paint paint = Paint();
    paint.color = color;
    return paint;
  

  @override
  void paint(Canvas canvas, Size size) 
    double wheelSize = 100;
    double nbElem = 6;
    double radius = (2 * pi) / nbElem;

    canvas.drawPath(getWheelPath(wheelSize, 0, radius), getColoredPaint(Colors.red));
    canvas.drawPath(getWheelPath(wheelSize, radius, radius), getColoredPaint(Colors.purple));
    canvas.drawPath(getWheelPath(wheelSize, radius * 2, radius), getColoredPaint(Colors.blue));
    canvas.drawPath(getWheelPath(wheelSize, radius * 3, radius), getColoredPaint(Colors.green));
    canvas.drawPath(getWheelPath(wheelSize, radius * 4, radius), getColoredPaint(Colors.yellow));
    canvas.drawPath(getWheelPath(wheelSize, radius * 5, radius), getColoredPaint(Colors.orange));
  

  @override
  bool shouldRepaint(CustomPainter oldDelegate) 
    return oldDelegate != this;
  


class _HomeState extends State 
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: AppBar(
        title: Text('Wheel test'),
        leading: new Icon(Icons.insert_emoticon),
      ),
      backgroundColor: Colors.white,
      body: CustomPaint(
        child: Container(
          height: 300.0,
        ),
        painter: WheelPainter(),
      ),
    );
    //]));
  

Resultado :

Si intenta dibujar gráficos circulares, es mejor que elija una biblioteca de gráficos.

Puedes añadir valor a nuestro contenido añadiendo tu veteranía en las acotaciones.

---

---

Utiliza Nuestro Buscador