Implementar un tutorial dentro de una aplicación móvil ayuda al usuario a saber cómo funciona, cómo utilizar y qué puede hacer con la aplicación, así como también contribuye a prevenir la frustración y mejorar la experiencia del usuario al proporcionar instrucciones claras y detalladas sobre el funcionamiento de la aplicación y cómo utilizarla de manera efectiva.
En el siguiente artículo estaremos abordando las formas de agregar un tutorial dentro de una aplicación Flutter.
Beneficios de tener un tutorial dentro de la aplicación
Un tutorial es una serie de pasos o instrucciones que se proporcionan a los usuarios para guiarlos en el uso de una aplicación móvil. En este tutorial, se presentarán las funcionalidades y características de la aplicación de manera clara y detallada, para que los usuarios puedan utilizarla de manera efectiva.
Además, se proporcionarán ejemplos prácticos y visuales para asegurarse de que los usuarios comprendan cómo funciona la aplicación. Este tutorial es esencial para todos aquellos que deseen obtener el máximo provecho de la aplicación y disfrutar de una experiencia de usuario óptima.
Hay varias razones por las que es necesario tener un tutorial dentro de una aplicación móvil:
Mejora la experiencia del usuario: Los tutoriales brindan a los usuarios una comprensión clara y detallada de cómo funciona la aplicación, lo que contribuye a mejorar su experiencia.
Reduce la frustración: Al proporcionar instrucciones claras, los tutoriales pueden ayudar a prevenir la frustración de los usuarios y el abandono de la aplicación.
Aumenta la retención de usuarios: Cuando los usuarios comprenden cómo utilizar la aplicación de manera efectiva, son más propensos a continuar utilizándola y a recomendarla a otros.
Mejora la eficiencia: Al proporcionar instrucciones claras y detalladas, los tutoriales pueden ayudar a los usuarios a utilizar la aplicación de manera más eficiente y productiva.
Aumenta la calidad de la aplicación: Al recibir retroalimentación de los usuarios, los desarrolladores pueden identificar y corregir problemas con la aplicación y mejorar su calidad.
Paquetes de Flutter para crear tutoriales dentro de la aplicación
Tres de los paquetes de Flutter más populares para agregar directamente un tutorial a una aplicación incluyen:
tutorial: Paquete que permite agregar tutoriales interactivos en la aplicación de Flutter.
tutorial_coach_mark: Paquete que proporciona una manera fácil de mostrar tutoriales a los usuarios dentro de la aplicación. Se pueden crear tutoriales interactivos con anotaciones, guías de texto y acciones de los usuarios.
overlay_tutorial: Paquete de Flutter para mostrar tutoriales en capas mediante el corte de un agujero sobre un widget. Permite agregar un texto junto al agujero que se muestra.
En general, estos paquetes ofrecen soluciones versátiles y fáciles de usar para crear tutoriales dentro de una aplicación móvil con Flutter. Puedes elegir el que mejor se adapte a tus necesidades y preferencias.
Implementación de un tutorial dentro de una aplicación Flutter
En el siguiente ejemplo implementaremos el paquete tutorial_coach_mark en una aplicación Flutter.
Empezamos agregando el paquete dentro de las dependencias del fichero pubspec.yaml.
A continuación, los widgets a los que apuntará el tutorial pueden ser cargados en una lista de objetos TargetFocus dentro la pantalla donde se muestra el tutorial.
List<TargetFocus> targets = [];
_addTargets() {
targets.add(
TargetFocus(identify: "Target 1", keyTarget: appGlobalKey, contents: [
TargetContent(
align: ContentAlign.bottom,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Lorem lorem ipsum",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20.0),
),
Padding(
padding: EdgeInsets.only(top: 10.0),
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.",
style: TextStyle(color: Colors.white),
),
)
],
))
]));
}
La variable appGlobalKey apunta al widget que se encontrará dentro del agujero del tutorial, por ejemplo un Container con alguna información:
GlobalKey? appGlobalKey = GlobalKey();
Container(
key: appGlobalKey,
padding: const EdgeInsets.only(top: 16.0),
child: …,
),
Luego, creamos un objeto del tipo TutorialCoachMark y ejecutamos el método show.
void showTutorial() {
TutorialCoachMark(
targets: targets,
colorShadow: Theme.of(context).primaryColor,
textSkip: tr("skip"),
onFinish: () {
debugPrint("finish");
},
onClickTargetWithTapPosition: (target, tapDetails) {
debugPrint("target: $target");
debugPrint(
"clicked at position local: ${tapDetails.localPosition} - global: ${tapDetails.globalPosition}");
},
onClickTarget: (target) {
debugPrint(target.toString());
},
onSkip: () {
debugPrint("skip");
}).show(context: context);
}
Finalmente, cargamos estos métodos que hemos creado al iniciar el widget principal. Le hemos añadido una demora de un segundo antes de empezar a mostrar el tutorial.
@override
void initState() {
_addTargets();
super.initState();
Future.delayed(const Duration(seconds: 1)).then((value) => showTutorial());
}
Para más información puede dirigirse a la documentación oficial en GitHub.
¡Síguenos para más información sobre el desarrollo de aplicaciones con Flutter!