How can I use tap on suffix in textField?

Question

I am trying to write textField, which could be tapped on almost all body, except suffix icon. For suffix icon I need to write special behavior.

my code is:

GestureDetector(
                    onTap: () => Navigator.of(context).push(
                      MaterialPageRoute(
                          builder: (context) => const SightSearchScreen()),
                    ),
                    child:
                     const SearchBar(
                      isEnabled: false,
                      isFocused: false,
                                       ),
                  ),

... and SearchBars widget is... (olne build method)

  @override
   Widget build(BuildContext context) {
     return TextField(
       enableInteractiveSelection: widget.isEnabled? true:false, // will disable paste operation
       focusNode: widget.isEnabled? FocusNode():AlwaysDisabledFocusNode(),
       onSubmitted: widget.searchRequest,
       autofocus: widget.isFocused ? true : false,
       controller: controller,
       decoration: InputDecoration(
         floatingLabelBehavior: FloatingLabelBehavior.never,
         prefixIcon:
             const Icon(Icons.search_rounded, color: AppColors.inactiveBlack),
         suffixIcon: widget.isEnabled
             ? null
             : InkWell(
                 onTap: () => print("Inner GestDet Tapped"),
                 child: Icon(Icons.tune_rounded,
                     color: themeProvider.appTheme.filterButtonColor),
               ),
         

    ),

I'm racking my brain.. Head GestureDetector works, if I have covered SearchBar in AbsorbPointer, but then inner InkWell wouldnt work.

Thank you for your time.

Answer 1

For using multipule Gesture Detector check out this example:

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

//Main function. The entry point for your Flutter app.
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: DemoApp(),
      ),
    ),
  );
}

//   Simple demo app which consists of two containers. The goal is to allow multiple gestures into the arena.
//  Everything is handled manually with the use of `RawGestureDetector` and a custom `GestureRecognizer`(It extends `TapGestureRecognizer`).
//  The custom GestureRecognizer, `AllowMultipleGestureRecognizer` is added to the gesture list and creates a `GestureRecognizerFactoryWithHandlers` of type `AllowMultipleGestureRecognizer`.
//  It creates a gesture recognizer factory with the given callbacks, in this case, an `onTap`.
//  It listens for an instance of `onTap` then prints text to the console when it is called. Note that the `RawGestureDetector` code is the same for both
//  containers. The only difference being the text that is printed(Used as a way to identify the widget) 

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: {
        AllowMultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<
            AllowMultipleGestureRecognizer>(
          () => AllowMultipleGestureRecognizer(),
          (AllowMultipleGestureRecognizer instance) {
            instance.onTap = () => print('Episode 4 is best! (parent container) ');
          },
        )
      },
      behavior: HitTestBehavior.opaque,
      //Parent Container
      child: Container(
        color: Colors.blueAccent,
        child: Center(
          //Wraps the second container in RawGestureDetector
          child: RawGestureDetector(
            gestures: {
              AllowMultipleGestureRecognizer:
                  GestureRecognizerFactoryWithHandlers<
                      AllowMultipleGestureRecognizer>(
                () => AllowMultipleGestureRecognizer(),  //constructor
                (AllowMultipleGestureRecognizer instance) {  //initializer
                  instance.onTap = () => print('Episode 8 is best! (nested container)');
                },
              )
            },
            //Creates the nested container within the first.
            child: Container(
               color: Colors.yellowAccent,
               width: 300.0,
               height: 400.0,
            ),
          ),
        ),
      ),
    );
  }
}

// Custom Gesture Recognizer.
// rejectGesture() is overridden. When a gesture is rejected, this is the function that is called. By default, it disposes of the
// Recognizer and runs clean up. However we modified it so that instead the Recognizer is disposed of, it is actually manually added.
// The result is instead you have one Recognizer winning the Arena, you have two. It is a win-win.
class AllowMultipleGestureRecognizer extends TapGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    acceptGesture(pointer);
  }
}

code by : https://gist.github.com/Nash0x7E2/08acca529096d93f3df0f60f9c034056