DEPRECATED

This package is no longer maintained.

TapCanvas was originally added because Flutter did not provide a way to detect taps outside of a widget. This has since been added to Flutter in the form of TapRegion.

The core use case of TapCanvas was to dismiss focus for text fields on desktop and web, when the user tapped/clicked outside of them. Both Material and Cupertino text fields, now provide this behaviour out of the box, which you can override if you wish to change.

This package is now rendered pointless by the Flutter framework.


🚰 TapCanvas

Detect taps outside the currently defined widget and provide a callback when taps occur.

codecov pub package

Example

Define the area within which you care about taps

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
    home: TapCanvas(
      child: MyHomeWidget(),
    ),
  );
}

Now your widgets can react when the user taps outside them

class TapOutsideAwareWidget extends StatelessWidget {
  const TapOutsideAwareWidget({super.key});

  @override
  Widget build(BuildContext context) => TapOutsideDetectorWidget(
    onTappedOutside: () {
      print('OUTSIDE TAPPED');
    },
    onTappedInside: () {
      print('INSIDE TAPPED');
    },
    child: MyWidgetThatCaresAboutTaps(),
  );
}

Libraries

tap_canvas