# 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.

```yaml
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.

```dart
// 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.

```dart
// 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`:

```dart
// 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.

```dart
// 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.

```dart
// tutorial_service.dart

class TutorialService {
  // ...

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

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

  // ...
}
```

####

<figure><img src="https://348668937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp9x2wonlXUzxbDgsuLtw%2Fuploads%2Ffesiy4LLyAqBPTl3m3g6%2Ftutorial_doc.gif?alt=media&#x26;token=bf8fa0dd-d6d9-4870-bcc2-872f3b542393" alt=""><figcaption></figcaption></figure>

#### 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](https://pub.dev/packages/tutorial_coach_mark).
