Circles with Guesture Detector

main.dart

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

void main() {
  runApp(MaterialApp(home: RectsExample()));
}

class RectsExample extends StatefulWidget {
  @override
  _RectsExampleState createState() => _RectsExampleState();
}

class _RectsExampleState extends State<RectsExample> {
  int _index = -1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: LayoutBuilder(builder: (context, contraints) {
          return Rects(
            rects: [
              Rect.fromCenter(
                center: Offset(100, 100),
                height: 200,
                width: 200,
              ),
              Rect.fromCenter(
                center: Offset(100, 100),
                height: 150,
                width: 150,
              ),
            ],
            selectedIndex: _index,
            onSelected: (index) {
              setState(() {
                _index = index;
              });
            },
          );
        }),
      ),
    );
  }
}

class Rects extends StatelessWidget {
  final List<Rect> rects;
  final void Function(int) onSelected;
  final int selectedIndex;

  const Rects({
    Key key,
    @required this.rects,
    @required this.onSelected,
    this.selectedIndex = -1,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.deferToChild,
      onTapDown: (details) {
        print("Inside Tap Event");
        print(details.globalPosition);
        RenderBox box = context.findRenderObject();
        print(box);
        final offset = box.globalToLocal(details.globalPosition);
        print(offset);
        final index = rects.lastIndexWhere((rect) => rect.contains(offset));
        print(index);
        if (index != -1) {
          onSelected(index);
          return;
        }
        onSelected(-1);
      },
      child: CustomPaint(
        size: Size(200, 200),
        painter: _RectPainter(rects, selectedIndex),
      ),
    );
  }
}

class _RectPainter extends CustomPainter {
  final List<Rect> rects;
  final int selectedIndex;
  final List<Color> colorArray = [
    Colors.black,
    Colors.red,
    Colors.blue,
    Colors.indigo,
    Colors.yellow,
    Colors.orange,
    Colors.purple,
    Colors.teal,
    Colors.deepOrange,
    Colors.greenAccent,
    Colors.deepPurple,
    Colors.lightGreenAccent,
  ];

  _RectPainter(this.rects, this.selectedIndex);

  @override
  void paint(Canvas canvas, Size size) {
    double previous = 0;
    int counter = 0;
    for (Rect rect in rects) {
      Paint paintInstance = Paint()
        ..style = PaintingStyle.stroke
        ..strokeWidth = 20
        ..color = colorArray[counter];
      canvas.drawArc(
          rect,
          0, //start
          3.14/2,
          false,
          paintInstance);
      previous = previous + 30;
      counter++;
    }
  }

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