Flutter – Widget de información sobre herramientas

La información sobre herramientas es un widget incorporado en flutter basado en el diseño de materiales, que muestra una descripción textual del widget en una etiqueta flotante cuando un usuario presiona prolongadamente o pasa el mouse sobre el widget. El widget de información sobre herramientas se vuelve muy útil cuando la interfaz de usuario de la aplicación es demasiado densa para mostrar toda la información a la vez en la pantalla, de una manera que simplemente hace que la aplicación sea más accesible. Hay dos formas de implementar la información sobre herramientas en un widget, la primera es usando el propio widget y la otra forma está limitada a algunos widgets como IconButton , FloatingActionButton , etc., que proporcionan información sobre herramientas como una propiedad que a su vez toma una string .como parámetro. Se debe recordar que el widget de información sobre herramientas se puede personalizar a través de sus propiedades, pero la propiedad de información sobre herramientas no lo es. 

Constructor de la clase Tooltip:

const Tooltip(
{Key? key,
required String message,
double? height,
EdgeInsetsGeometry? padding,
EdgeInsetsGeometry? margin,
double? verticalOffset,
bool? preferBelow,
bool? excludeFromSemantics,
Decoration? decoration,
TextStyle? textStyle,
Duration? waitDuration,
Duration? showDuration,
Widget? child}
)

Propiedades de la clase Tooltip:

• child: esta propiedad determina el widget para el que se debe mostrar la información sobre herramientas .
• decoración: con la ayuda de la propiedad de decoración, se puede controlar el color de fondo, el borde (forma) de la información sobre herramientas .
• excluirFormSemantics: Esta propiedad toma como parámetro booleano, y por defecto es falso. Controla si el mensaje de la información sobre herramientas debe agregarse al árbol semántico o no.
• altura: esta propiedad determina la altura de la información sobre herramientas. Toma como parámetro el valor doble .
• margen: esta propiedad determina el espacio vacío alrededor de la información sobre herramientas. Toma EdgeInsetsGeometry como parámetro.
• mensaje: esta propiedad toma un valor de string como parámetro para mostrar el texto en la información sobre herramientas.
• padding: esta propiedad también toma EdgeInsetsGeometry como parámetro para determinar el espacio vacío entre el borde y el contenido principal de la información sobre herramientas .
• preferBelow: esta propiedad controla si mostrar la información sobre herramientas en el widget o debajo tomando un valor booleano como parámetro. De forma predeterminada, se establece en verdadero.
• showDuration: esta propiedad determina el tiempo en segundos durante el cual se debe mostrar la información sobre herramientas .
• textStyle: esta propiedad se ocupa del estilo del mensaje en la información sobre herramientas , como el tamaño de fuente o el color.
• verticalOffset: esta propiedad controla la distancia vertical entre la información sobre herramientas y el widget.
• waitDuration: esta propiedad controla el tiempo después del cual la información sobre herramientas se hará visible una vez que el usuario se desplaza sobre el widget o lo presiona durante más de un segundo.

Ejemplo 1: información sobre herramientas básica.

dardo principal

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ) //IconButton
          ), //AppBar
      body: Center(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Tooltip(
                message: 'Text',
                child: Text(
                  'Flutter is an open-source UI software development kit created by Google. ',
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 25,
                  ), //TextStyle
                ), //Text
              ), //Tooltip
            ), //Padding
            color: Colors.green[50],
            width: 300,
            height: 175,
          ), //Container
        ], //<Widget>[]
      ) //Row
     ), //Center
    ), //Scaffold
    debugShowCheckedModeBanner: false,
  )); //MaterialApp
}

Producción: 

Explicación: Por lo tanto, la aplicación comienza con una barra de aplicaciones simple creada con el widget integrado AppBar de flutter con un IconButton de menú principal. El título de la barra de la aplicación es un widget de texto que toma un valor de string de ‘GeeksforGeeks’. El color de fondo asignado a la barra de aplicaciones es greenAccent[400] . En la propiedad de información sobre herramientas IconButton se está empleando, que también está tomando un parámetro de string . Uno puede notar que al presionar el ícono de menú en la pantalla durante más de un segundo, se muestra la información sobre herramientas con un menú de texto .. Esta es una de las formas de usar información sobre herramientas para los widgets, pero esto es todo lo que tiene, no podemos hacer nada más para cambiar su apariencia. Otra forma es usar el propio widget Tooltip como lo hemos hecho en el cuerpo de la aplicación. En el cuerpo de la aplicación, tenemos el widget Center como el widget principal con Row como su hijo que alinea todos sus widgets secundarios en el centro. Después de eso, hemos creado un contenedor con algo de relleno y dentro de eso, tenemos la información sobre herramientas del widget . Ahora, el widget Tooltip está tomando Texto como su hijo que imprime una string en la pantalla. Cuando usamos Tooltip, la propiedad del mensaje es obligatoria y, en este caso, es ‘Prueba’. Y al igual que el icono del menú, cuando se desplaza el texto o se mantiene presionado, aparece la información sobre herramientas.

Tanto la información sobre herramientas en esta aplicación son básicas integradas en el aleteo. Y no hemos hecho nada para cambiar su apariencia. En el segundo ejemplo, veremos cómo modificar el widget Tooltip .

Ejemplo 2: información sobre herramientas modificada.

Este es el fragmento de código para el widget Tooltip.

...
                child: Tooltip(
                message: 'Text',
                waitDuration: Duration(seconds: 1),
                showDuration: Duration(seconds: 2),
                padding: EdgeInsets.all(12),
                height: 35,
                verticalOffset: 100,
                preferBelow: true,
                textStyle: TextStyle(
                    fontSize: 15,
                    color: Colors.white,
                    fontWeight: FontWeight.normal),
                decoration: BoxDecoration(
                    borderRadius:
                        BorderRadius.only(topRight: Radius.circular(10)),
                    boxShadow: [
                      new BoxShadow(
                        color: Colors.grey,
                        blurRadius: 10.0,
                        offset: new Offset(6.0, 6.0),
                      ), //BoxShadow
                    ],
                    color: Colors.greenAccent[400]), //BoxDecoration
                child: Text(
                  'Flutter is an open-source UI software development kit created by Google. ',
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 25,
                  ), //TextStyle
                ), //Text
              ), //Tooltip
...

Salida: si se utilizan las propiedades anteriores, la salida se verá así.

Explicación:   Flutter no ofrece la opción de modificar la propiedad de información sobre herramientas como se usa en el icono del menú. Pero si queremos modificar el aspecto de la información sobre herramientas, siempre podemos incrustarlo en un widget de información sobre herramientas . Pero flutter proporcionó múltiples propiedades (mencionadas anteriormente) para cambiar la apariencia de la información sobre herramientas . En esta aplicación, el primer cambio que hemos realizado después de la propiedad del mensaje es la adición de la propiedad waitDuration que toma Duration como su elemento secundario, que a su vez toma la cantidad de tiempo en segundos que debe esperar antes de mostrar información sobre herramientas después de que un usuario realiza la acción adecuada. . Luego hemos usado la propiedad showDuration que es similar a lawaitDuration , controla durante cuánto tiempo se mostrará la información sobre herramientas. Después de eso, tenemos el relleno que toma EdgeInsets.all(12) como parámetro para proporcionar el espacio entre el borde de la información sobre herramientas y el widget secundario. Se da una altura de 35 a la información sobre herramientas usando su propiedad de altura . El verticalOffset se establece en 100 para mostrar la información sobre herramientas debajo del widget de texto . La siguiente es la propiedad preferBelow que controla si mostrar la información sobre herramientas en el widget mismo o debajo de él. La propiedad preferedBelow es verdadera de forma predeterminada. Pero podemos ver que en el primer ejemplo anterior, la información sobre herramientas se muestra en el texto mismo. La razón de esto es el tamaño del texto.widget, es demasiado grande para que la información sobre herramientas se cruce como lo hace con el ícono de menú. Entonces, para cambiar este comportamiento, hemos usado la propiedad verticalOffset . A todo esto le siguen textStyle , decoration y propiedades secundarias . La propiedad secundaria es la misma que la del ejemplo anterior que toma el widget de texto como un elemento secundario. La propiedad testStyle agrega estilo al mensaje.propiedad, en esta propiedad el tamaño de fuente se establece en 15, el color del texto en blanco y el grosor de fuente en normal. La propiedad de decoración está a cargo del estilo del cuadro de información sobre herramientas, en este caso, hemos redondeado una de las esquinas, agregado una sombra a la información sobre herramientas y le hemos dado color verde a la información sobre herramientas.

Flutter también ofrece otras formas de mostrar la descripción de un widget de una manera más hermosa. Una de las formas es usando el paquete showcaseview . Y si aún desea algo diferente, puede crear su propio widget personalizado para hacer el trabajo.