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

Enable a flutter Tooltip widget when scoped inside a disabled TextField InputDecoration

I have a TextField widget within a Form widget, and the TextField has a Tooltip widget within its decoration.

...surrounding input field redacted...

decoration: InputDecoration(
  labelText: 'Date Carried Out',
  suffixIcon: const Tooltip(
    message: 'Tooltip message',
    child: Icon(Icons.info,),
  ),                              
),

enter image description here

In some cases, the entire Form will be disabled (and hence it’s constituent fields) – however, I required some tooltips to remain enabled such that the user can still discover the meaning of the field data being displayed.

Is there an allowance in the flutter widgets for this? If not, can it still be achieved?

Thank you

Tags:

3

Answers


  1. 0

    The Tooltip widget itself doesn’t have an ignorePointer property. However, you can achieve a similar effect by wrapping the Tooltip widget with an IgnorePointer widget.

    Here’s how you can implement it:

    bool isFormDisabled = true; // Set this value based on your application logic

Form(
  // Set the Form's state based on whether it is disabled or not
  autovalidateMode: isFormDisabled ? AutovalidateMode.disabled : AutovalidateMode.always,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(
          labelText: 'Date Carried Out',
          suffixIcon: IgnorePointer(
            ignoring: isFormDisabled,
            child: Tooltip(
              message: 'Tooltip message',
              child: Icon(Icons.info),
            ),
          ),
        ),
        // Add any other properties you need for the TextFormField
      ),
      // Add other form fields as needed
    ],
  ),
);

    In this example, the IgnorePointer widget is used to conditionally ignore user input events on the Tooltip based on the value of isFormDisabled. When isFormDisabled is true, the Tooltip will be disabled and won’t respond to user input, allowing users to still discover the meaning of the field data being displayed even when the form is disabled.

    Hope this approach helps you to control as your desire form in your flutter application.

    Login or Signup to reply.
  2. 0

    I didn’t quite understand, but it seems you have a tooltip in a TextField inside a Form and you want to keep tooltips even if the form is disabled.

    You can define a formKey as nullable and display the concerning tooltip following the formKey value

    decoration: InputDecoration(
      labelText: "Date Carried Out",
      suffixIcon: (_formKey != null)
          ? const Tooltip(
              message: 'Tooltip message',
              child: Icon(Icons.info),
            )
          : null),
    Login or Signup to reply.
  3. 0

    If making a TextField disabled completely disables its children like (prefix and suffix) Icons.

    Then you can think of it out of box. by Putting a suffix icon directly above the TextField.

    This ToolTip (suffix icon) will be enabled whatever the state of the text field.

    Here’s the pseudo code for that:

    Stack(
 children:[
  
   YourTF(),
   Positined(

   top : 10,
   right : 10,
   child: ToolTip()

    ),
  ]
)

    Hope it helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search