How to implement Gesture detection - On Tap method in child class?

Question

I want to implement the GestureDetector method onTapin child class. Is there a way to do it in Flutter ?

ParentClass.dart

Class ParentClass extends StatelessWidget {

  @override
  Widget build(BuildContext context) { 
     return GestureDetector {
          onTap: methodA,
          child: ChildClass(),
          }

}

ChildClass.dart

Class ChildClass extends StatefulWidget {
   methodA() // need to access methodA which is being passed to gesture detector
   // How do I access methodA of parent class method here
   // so whenever GestureDetector's onTap method is called, i want to handle that in ChildClass is there a way to do it ?

}

Thierry · Accepted Answer · 2021-02-27T15:41:26.000

You can access the Child State methods using a unique key. Here is a minimal example:

Inside the ParentWidget, we define _childKey, a GlobalKey<_ChildWidgetState> that we then can use to access the State's method updateValue as follows:

_childKey.currentState.updateValue('Goodbye, Thierry!'),

Full source code

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: ParentWidget()),
    );
  }
}

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  final _childKey = GlobalKey<_ChildWidgetState>();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _childKey.currentState.updateValue('Goodbye, Thierry!'),
      child: ChildWidget(key: _childKey),
    );
  }
}

class ChildWidget extends StatefulWidget {
  const ChildWidget({Key key}) : super(key: key);
  @override
  _ChildWidgetState createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  String value = 'Hello, Thierry!';

  void updateValue(String newValue) {
    setState(() => value = newValue);
  }

  @override
  Widget build(BuildContext context) {
    return Text(value);
  }
}

ChildWidget class and ParentWidget class are in separate files. So I am unable to access `_ChildWidgetState` in parent class. Getting the error The name '_ChildWidgetState' isn't a type so it can't be used as a type argument. Try correcting the name to an existing type, or defining a type named '_ChildWidgetState'. — Mark Batch, Feb 27 '21 at 16:11
You may always declare the State as public instead of private by changing its name to `ChildWidgetState` — Thierry, Feb 27 '21 at 17:00

score 0 · Answer 2 · answered Feb 27 '21 at 15:32

In your ChildClass, return a GestureDetector. Set the child property to the rest of your widgets, and then set the onTap to call methodA. That should look something like this:

class ChildClass extends StatelessWidget {

  @override
  Widget build(BuildContext context) { 
     return GestureDetector {
          onTap: methodA,
          child: SomeWidget(),
     }

}

score 0 · Answer 3 · answered Feb 27 '21 at 15:40

You are asking how to detect child class onTap and pass it to Parent right?

class YourChild extends StatelessWidget {
  final Function parentCallback;

  const YourChild({this.parentCallback}); 

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 1st option
      onTap: () {
        print("do something");
        parentCallback();
      },
          )
  }
}

Then for using It.

class YourParent extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return YourChild( parentCallback(){
//do your stuff}
)
  }
}

Actually its other way around need to handle parent class onTap in child class. — Mark Batch, Feb 27 '21 at 16:26

How to implement Gesture detection - On Tap method in child class?

3 Answers3

Full source code