CODEWITHSUNDEEP
fluttercanvascustom-painter
Nikhil Sathawara
Nikhil Sathawara

Reputation: 161

Flutter Create circle with multiple sections with touch gesture

I want to create widget using custom painter like following with touch gesture;

enter image description here

Upvotes: 0

Views: 806

Answers (1)

Fuad Saneen
Fuad Saneen

Reputation: 394

  1. Draw svg of this image. Then convert into flutter paint code using https://fluttershapemaker.com/
  2. Add the touchable package as dependency in your pubspec.yaml https://github.com/nateshmbhat/touchable

Example :

CanvasTouchDetector(
    builder: (context) => 
        CustomPaint(
            painter: MyPainter(context)
        )
)


class MyPainter extends CustomPainter {

  final BuildContext context ;
  MyPainter(this.context); // context from CanvasTouchDetector

  @override
  void paint(Canvas canvas, Size size) {
    var myCanvas = TouchyCanvas(context,canvas); 

    myCanvas.drawCircle(Offset(10, 10), 60, Paint()..color=Colors.orange ,
        onTapDown: (tapdetail) {
         print("orange Circle touched");
       },
        onPanDown:(tapdetail){
          print("orange circle swiped");
        } 
    );

    myCanvas.drawLine(
        Offset(0, 0),
        Offset(size.width - 100, size.height - 100),
        Paint()
          ..color = Colors.black
          ..strokeWidth = 50, 
        onPanUpdate: (detail) {
            print('Black line Swiped'); //do cooler things here. Probably change app state or animate
    });
  }
}

Upvotes: 0

Related Questions