Custom shape tappable area with CustomPaint widget on Flutter

Question

I’ve seen some posts with things similar to this question, but they’re not what I’m looking for. I want to create a button with a custom shape in Flutter. For that I use a CustomPaint widget inside a GestureDetector widget. The problem is that I don’t want invisible areas to be tappable. And that's exactly what happens with the GestureDetector. In others words, I just want my created shape to be tappable. But right now it seems that there's an invisible square where my custom shape is, and that is also tappable. I don't want that. The most similar issue I found in this post:

Flutter - Custom button tap area

however, in my case I’m dealing with custom shapes and not with squares or circles.

Let me share with you the code and an example image of a possible button. You could just copy it and paste it direct on your main. It should be easy to replicate my problem.

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Shapes',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Custom Shapes App'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      backgroundColor: Colors.white24,
      body: Center(
        child: GestureDetector(
          child: CustomPaint(
            size: Size(300,300), //You can Replace this with your desired WIDTH and HEIGHT
            painter: RPSCustomPainter(),
          ),
          onTap: (){
            print("Working?");
          },
        ),
      ),
    );
  }
}
class RPSCustomPainter extends CustomPainter{

  @override
  void paint(Canvas canvas, Size size) {



    Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;
    paint_0.shader = ui.Gradient.linear(Offset(0,size.height*0.50),Offset(size.width,size.height*0.50),[Color(0xffffed08),Color(0xffffd800),Color(0xffff0000)],[0.00,0.34,1.00]);

    Path path_0 = Path();
    path_0.moveTo(0,size.height*0.50);
    path_0.lineTo(size.width*0.33,size.height*0.33);
    path_0.lineTo(size.width*0.50,0);
    path_0.lineTo(size.width*0.67,size.height*0.33);
    path_0.lineTo(size.width,size.height*0.50);
    path_0.lineTo(size.width*0.67,size.height*0.67);
    path_0.lineTo(size.width*0.50,size.height);
    path_0.lineTo(size.width*0.33,size.height*0.67);
    path_0.lineTo(0,size.height*0.50);
    path_0.close();

    canvas.drawPath(path_0, paint_0);


  }

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

}

I'd try that the star is the only tappable thing, and no other invisible place on the screen.

Thanks in advance!

Answer 1

A GestureDetector is hit (and start detecting) when its child says it is hit (unless you chance its behavior property). To specify when CustomPaint is hit, CustomPainter has a hitTest(Offset) method that you can override. It should return whether the Offset should be consider inside your shape. Unfortunately, the method doesn’t have a size parameter. (That’s a bug which solution has hit some inertia, see https://github.com/flutter/flutter/issues/28206) The only good solution is to make a custom render object in which you override the paint and hitTestSelf methods (in the latter, you can use the objects size property).

For example:

class MyCirclePainter extends LeafRenderObjectWidget {
  const MyCirclePainter({@required this.radius, Key key}) : super(key: key);

  // radius relative to the widget's size
  final double radius;

  @override
  RenderObject createRenderObject(BuildContext context) => RenderMyCirclePainter()..radius = radius;

  @override
  void updateRenderObject(BuildContext context, RenderMyCirclePainter renderObject) => renderObject.radius = radius;
}

class RenderMyCirclePainter extends RenderBox {
  double radius;

  @override
  void performLayout() {
    size = constraints.biggest;
  }

  @override
  void performResize() {
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final center = size.center(offset);
    final r = 1.0 * radius * size.width;
    final backgroundPaint = Paint()
      ..color = const Color(0x88202020)
      ..style = PaintingStyle.fill;
    context.canvas.drawCircle(center, r, backgroundPaint);
  }

  @override
  bool hitTestSelf(Offset position) {
    final center = size.center(Offset.zero);
    return (position - center).distance < size.width * radius;
  }
}

Note that the top-left of the widget is at the offset parameter in the paint method, instead of the Offset.zero it is in CustomPainter.

You probably want to construct the path once and use path_0.contains(position) in hitTestSelf.