Question 79234 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – GestureDetector function does not work with custom widget

I am trying to manage some gap between elements and update the gap using setState(). Unfortunately, it did not work with a custom widget TextFieldInput as child of GestureDetector.

GestureDetector(
                      onTap: () {
                        setState(() {
                          gap = 16.00;
                        });
                      },
                      child: TextFieldInput(
                        textEditingController: _passwordController,
                        hintText: 'Enter your password',
                        textInputType: TextInputType.text,
                        isPass: true,
                      ),
                    ),

But it did work with a Text widget.

GestureDetector(
                  onTap: () {
                    setState(() {
                      gap = smallGap;
                    });
                  },
                  child: Container(
                    child: Padding(
                      padding: EdgeInsets.all(5),
                      child: Text('Tap here'),
                    ),
                    padding: const EdgeInsets.symmetric(
                      vertical: 8,
                    ),
                  ),
                )

Here is the TextFieldInput widget structure:

import 'package:flutter/material.dart';

class TextFieldInput extends StatefulWidget {
  final TextEditingController textEditingController;
  final bool isPass;
  final String hintText;
  final TextInputType textInputType;
  final VoidCallback onTap;
  const TextFieldInput({
    super.key,
    required this.textEditingController,
    this.isPass = false,
    required this.hintText,
    required this.textInputType,
    required this.onTap,
    this.child,
  });
  final Widget? child;

  @override
  State<TextFieldInput> createState() => _TextFieldInputState();
}

class _TextFieldInputState extends State<TextFieldInput> {

  @override
  Widget build(BuildContext context) {
    final inputBorder = OutlineInputBorder(
        borderSide: Divider.createBorderSide(context)
    );
    return TextField(
      controller: widget.textEditingController,
      decoration: InputDecoration(
        hintText: widget.hintText,
        border: inputBorder,
        focusedBorder: inputBorder,
        enabledBorder: inputBorder,
        filled: true,
        contentPadding: const EdgeInsets.all(8),
      ),
      keyboardType: widget.textInputType,
      obscureText: widget.isPass,
      onTap: () {},
    );
  }
}

But "gap" does not change even on tapping on the TextFieldInput.
Can anyone help with this ?

Tags:

3

Answers


  1. 0

    gesture detector doesn’t work with textField try adding ignorePointer

    GestureDetector(
            child: new IgnorePointer (
                child: new TextField(
              .......
            ))),
        onTap: () {
         //do some thing
        },
    Login or Signup to reply.
  2. 0

    The TextField has its onTap property, I think this is the cause of your problem. You should you onTap property of TextField or use another suitable widget

    Login or Signup to reply.
  3. 0

    Try with a below code snippet:

    TextField(
 onTap: () {
     // To Do
    },
   // TextField Property
 );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search