💭Tutorial de Início de APP

Construindo um tutorial de início de aplicação

A biblioteca tutorial_coach_mark é uma ferramenta útil para criar tutoriais interativos que guiam os usuários através das funcionalidades do seu aplicativo. Este tutorial fornecerá uma explicação detalhada dos passos necessários para usar essa biblioteca.

Passo 1: Instalação

Antes de tudo, é necessário adicionar a dependência tutorial_coach_mark ao arquivo pubspec.yaml do seu projeto. A dependência permite que você utilize as funcionalidades da biblioteca para criar tutoriais interativos.

dependencies:
  flutter:
    sdk: flutter
  tutorial_coach_mark: ^latest_version

Lembre-se de executar o comando flutter pub get para atualizar suas dependências.

Passo 2: Criando o Serviço de Tutorial

Comece criando um serviço para gerenciar a lógica do tutorial. Vamos utilizar a classe TutorialService. Esta classe conterá os atributos e métodos necessários para configurar e mostrar o tutorial.

// tutorial_service.dart

import 'package:flutter/material.dart';
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';

class TutorialService {
  bool doingTutorial = false;
  TutorialCoachMark? tutorial;

  // Outros atributos e métodos do serviço
}

Passo 3: Configurando os Passos do Tutorial

Agora, vamos configurar os passos individuais do tutorial. Para isso, usaremos a classe TargetFocus para definir cada etapa do tutorial. Cada etapa incluirá um alvo (widget ou áres na tela) que será definido por uma GlobalKey associada a ele.

// tutorial_service.dart

class TutorialService {
  // ...

  // Definindo as chaves para os passos 
  final GlobalKey step1Key = GlobalKey(); 
  final GlobalKey step2Key = GlobalKey(); 
  final GlobalKey step3Key = GlobalKey(); 
  final GlobalKey step4Key = GlobalKey(); 
  final GlobalKey step5Key = GlobalKey(); 
  final GlobalKey step6Key = GlobalKey(); 
  final GlobalKey step7Key = GlobalKey(); 
  final GlobalKey step8Key = GlobalKey();

  void createTutorial(BuildContext context) {
    List<TargetFocus> targets = [
      step1,
      step2,
      step3,
      step4,
      step5,
      step6,
      step7,
      step8,
    ];

    tutorial = TutorialCoachMark(
      targets: targets,
      textSkip: "Pular",
      textStyleSkip: TextStyle(color: Colors.white),
      colorShadow: Colors.black,
      opacityShadow: 0.8,
      onFinish: () {
        doingTutorial = false;
        setTutorial(true);
        debugPrint("Tutorial concluído!");
      },
      // Mais configurações...
    );
  }

  TargetFocus get step1 => TargetFocus(
        identify: "step1",
        // Defina o widget alvo através de uma GlobalKey
        // Essa deverá ser a key do widget relacionado a esse passo
        keyTarget: step1Key,
        targetPosition: TargetPosition(Size(1, 1), Offset(0, 0)),
        contents: [
          TargetContent(
            align: ContentAlign.custom,
            customPosition: CustomTargetContentPosition(
                bottom: 0, left: 0, right: 0, top: 0),
            builder: (context, controller) => GestureDetector(
              onTap: () => tutorial?.next(),
              child: Image.asset("assets/ts_1.png"),
            ),
          ),
        ],
      );

  // Defina os outros passos (step2, step3, etc.) da mesma forma
}

Passo 4: Iniciando o Tutorial

Para iniciar o tutorial, você deve chamar o método createTutorial no local apropriado (geralmente quando a primeira tela do app é carregada) e, em seguida, exibir o tutorial usando o método showTutorial:

// skeleton_screen.dart

class _SkeletonScreenState extends State<SkeletonScreen> {
  final TutorialService _tutorialService = TutorialService();

  @override
  void initState() {
    // ...

    WidgetsBinding.instance.addPostFrameCallback((_) async {
      var completedTutorial = await _tutorialService.tutorialCompleted();

      if (!completedTutorial) {
        _tutorialService.createTutorial(context);
        _tutorialService.showTutorial(context);
      }
    });

    super.initState();
  }

  // ...
}

Passo 5: Avançando entre os Passos

Nos passos do tutorial, você pode definir ações personalizadas que ocorrerão quando um passo específico for clicado. No nosso exemplo, usamos o método _handleTargetClick para lidar com ações específicas para cada etapa do tutorial. Lembre-se de sempre garantir que o widget alvo de um passo seja construído antes desse passo acontecer.

// tutorial_service.dart

class TutorialService {
  // ...

  void _handleTargetClick(TargetFocus target) {
    switch (target.identify) {
      case "step3":
        GetIt.I.get<SkeletonStore>().animateToPage(2);
        break;
      case "step5":
        Navigator.of(context).pushNamed(DiaryWeeklyReviewScreen.routeName);
        break;
      case "step6":
        Navigator.of(context).pop();
        break;
      case "step7":
        GetIt.I.get<SkeletonStore>().animateToPage(4);
        break;
      // ...
      default:
    }
  }

  // ...
}

Passo 6: Finalizando o Tutorial

Quando o usuário concluir o tutorial ou optar por pular, você pode finalizá-lo. No nosso exemplo, usamos o método onFinish na configuração do TutorialCoachMark para lidar com a conclusão.

// tutorial_service.dart

class TutorialService {
  // ...

  void createTutorial(BuildContext context) {
    // ...

    tutorial = TutorialCoachMark(
      targets: targets,
      onFinish: () {
        doingTutorial = false;
        setTutorial(true);
        debugPrint("Tutorial finalizado!");
      },
      // ...
    );
  }

  // ...
}

Conclusão

Parabéns! Você aprendeu a usar a biblioteca tutorial_coach_mark para criar tutoriais interativos em sua aplicação Flutter. Usando este guia passo a passo, você pode configurar, iniciar, avançar e finalizar tutoriais que guiam os usuários através das funcionalidades do seu aplicativo. Personalize os passos e as ações de acordo com as necessidades da sua aplicação para fornecer uma experiência de usuário excepcional. Para mais detalhes e opções avançadas, consulte a documentação oficial da biblioteca.