Una información sobre herramientas es generalmente una etiqueta de texto estático que aparece sobre algo en su pantalla para darle una mejor idea de lo que está haciendo algo. Algunos widgets vienen de fábrica con tooltip propiedad que puede establecer:
Por ejemplo, un FloatingActionButton viene con esta función y se muestra cuando el usuario presiona el botón durante mucho tiempo:
Sin crhábito alimenticio FloatingActionButton No hay muchas personalizaciones disponibles para su información sobre herramientas. Nota al margen: si quieres ver cómo personalizar el widget Flutter, he escrito un artículo que te muestra como hacerlo aqui.
Sin embargo, puede utilizar Tooltip widget directamente envolviéndolo en otro widget. En este caso, envolví el estándar Text widget s Tooltip crea tu propio mensaje:
Tooltip( message: "Hi this is the standard tip", child: Text( 'You have pushed the button this many times:', ),),
Cuando mantienes presionado el texto, aparece el mensaje que configuraste. Mediante el uso ToolTip le ofrece muchas más opciones de personalización, como altura, estilo, desplazamiento vertical y duración:
Anular el predeterminado Tooltip Los parámetros pueden proporcionar un mensaje bastante personalizado:
Tal vez algo de arriba se adapte a sus necesidades, pero si desea agregar animación o mostrar una información sobre herramientas después de otro gesto, podemos crear el nuestro OverlayEntry.
Para crear lo que ves en el video de arriba, sigue estos pasos:
Primero usamos y GestureDetector widget y pegar Text widget como su bebé. Quiero que aparezca esta información sobre herramientas cuando un usuario hace doble clic en el texto para incluir un carácter onDoubleTap propiedad:
Ahora creemos nuestro real OverlayEntry. Cree un nuevo archivo .dart y asígnele el nombre que desee (el mío se llama hint_overlay.dart). Cree un nuevo StatefulWidget en su nuevo archivo y asígnele el nombre de acuerdo con sus necesidades (el mío se llama HintOverlay). Cuando estés ahí, agrega SingleTickerProviderStateMixin implementación (porque lo necesitamos para la animación) initState y dispose métodos:
Lo necesitamos HintOverlay tomar dos parámetros:
1. Referencia a OverlayEntry ese HintOverlay se insertará en (entry)
2. Un mensaje que aparece como ayuda (message):
(Obviamente, puede establecer cualquier cantidad de parámetros, pero verá por qué necesitamos al menos un enlace a OverlayEntry pasado)
Quiero que mi información sobre herramientas aparezca a través de una animación: deslice el dedo desde el lado derecho de la pantalla al lado izquierdo de la pantalla, así que lo agregaré AnimationController y Tween animación dentro de HintOverlay initState:
Además, creo un temporizador (_startTimer), que eliminará OverlayEntry después de un tiempo determinado. Empezaré por dentro initState y establezca su duración en un segundo más que AnimationControllerLa duración se establece en, de esta manera se elimina cuando está fuera de la pantalla:
Cuando llamamos .remove() en OverlayEntry que entramos (widget.entry), dispose() se activará. Por eso lo pasamos entry enlace.
De regreso main.dart archivo, necesitamos crear un archivo real OverlayEntry y devolvamos nuestro nuevo HintOverlay widget. Entonces tendremos el nuestro OnDoubleTap la propiedad devuelve nuestro incrustado OverlayEntry.
Ahora que todo está configurado, podemos hacer doble clic en el texto «Mi sugerencia de entrada de superposición» y nuestra sugerencia debe deslizarse por la pantalla en el estilo de un recorte. Aquí está otra vez: