Register tap on empty space around widget

user_19231322 0
Viewed 77

Working on a flutter web project. I have a row which has 3 widgets:

From left to right:

  1. Sidebar
  2. Sidebar content
  3. body
  Widget _buildBody() {
    final screenwidth = MediaQuery.of(context).size.width;
    editpanel = screenwidth * 0.3;
    final editor = ViewProvider.of(context).isEditPanelOpen
        ? (screenwidth - sidebar - editpanel)
        : (screenwidth - sidebar);

    final ViewProvider viewProvider = Provider.of<ViewProvider>(context);
    return Row(
         Sidebar()
        _loadSidebarContent(bloc.editPanelIndex),
        _sidebarHandler(viewProvider),
        Center(
          child: SizedBox(
            width: editor * 0.8,
            child: Center(
              child: MyWidget(),
            ),
          ),
        ),
      ],
    );
  }

I need to register tap if user taps on anything except the Appbar, Sidebar, Sidebarcontent, on MyWidget.

So I wrapped the entire scaffold with gesture detector and tried using IgnorePointer for the specific widgets.

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        .. call some specific function
      },
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: PreferredSize(
          preferredSize: Size(
            MediaQuery.of(context).size.width,
            height + 80,
          ),
          child: IgnorePointer(
            child: Appbar(),
            ignoring: true,
          ),
        ),
        body: _buildBody(),
      ),
    );
  }

Issue is: MyWidget is getting ignored all the time. I don't want to fire the specificFunc() when user taps on any of the: Appbar, Sidebar, Sidebarcontent, or MyWidget.

Basically if user taps the white space around MyWidget specificFunction will be called

dart flutter
3 Answers
  1. Wrap the whole Scaffold widget with GestureDector is not a good idea.
  2. Instead wrap the container (white space around your button) with the detector and supply the button as a child.

In the following sample, the amber area is your white one. Tapping the amber area, and the button produces a separate log.

enter image description here

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: GestureDetector(
                onTap: () {
                  if (kDebugMode) {
                    print('Amber area tapped!');
                  }
                },
                child: Container(
                    color: Colors.amber,
                    width: 400,
                    height: 400,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        TextButton(
                          style: ButtonStyle(
                              foregroundColor:
                                  MaterialStateProperty.all<Color>(Colors.blue),
                              backgroundColor: MaterialStateProperty.all<Color>(
                                  Colors.white)),
                          onPressed: () {
                            if (kDebugMode) {
                              print('Button clicked.');
                            }
                          },
                          child: const Text('A Button'),
                        ),
                      ],
                    )),
              ),
            )
          ],
        ),
      ),
    );
  }
}

user_12886910
user_186781580

Instead of ignorePointer you should be using AbsorbPointer which will absorb the pointer and not pass it to the content below it

user_171690370
Related