Detalhes do pacotev0.2.1

coachmaker

Marcas de treinamento simples com etapa e posição dinâmica para seu aplicativo (marca de treinamento/exibição/dica, etc.)

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 88
Curtidas: 94
Pontos Pub: 140

Instalar pacote

flutter pub add coachmaker

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

CoachMaker é um pacote Flutter que fornece marcas de treinamento simples e personalizáveis (também conhecidas como guias, demonstrações ou dicas) para orientar os usuários sobre os recursos do seu aplicativo. Ele suporta posicionamento dinâmico e navegação passo a passo, tornando-o ideal para fluxos de introdução. O pacote funciona em todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. Com configuração mínima e APIs intuitivas, o CoachMaker ajuda a destacar elementos importantes da interface de forma limpa e interativa.

Casos de uso

Onboarding de novos usuários
Destacando novos recursos
Guiando usuários por fluxos de trabalho
Melhorar o engajamento do usuário
Educar os usuários sobre a funcionalidade do aplicativo

Principais recursos

Ajuste de posição dinâmico
Navegação passo a passo
Aparência personalizável
Suporte multiplataforma
Integração simples da API
Suporte para múltiplas plataformas

Indicado para

telas de boas-vindas do aplicativo
Fluxos de introdução de recursos
Ferramentas de educação do usuário
Tutoriais interativos
Percursos do produto

Considerações

Pode exigir posicionamento cuidadoso para evitar sobreposição da interface
Impacto no desempenho com muitos passos
animações internas limitadas
Não projetado para interações complexas
Melhor utilizado em cenários de fluxo de usuário controlado

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Coachmaker

Coach marks are temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour.

Adobe Said 👨‍🎓

stars license

Stt..... this package simple to use 🤫

Demo 😎

Full Demo

Pageview Slider

Single Page

Landscape Page

Usage 🍽️

Time to fight🥊 :

#1. add coachmaker as a dependency in your pubspec.yaml file.

#2. import package on your file, import 'package:coachmaker/coachmaker.dart';

#3. Wrap your widget with CoachPoint

Example :

CoachPoint(
	initial: '1',
	child: Container(
	          color: Colors.red,
              height: 50,
              width: 100,
              child: Text(
                  'Sorot aku kakak',
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white),
           ),
   ),
),

*Create a initial with a unique name unique name

#4. Call this method for show coachmaker

initial

Example :

FloatingActionButton(
          onPressed: () {
            CoachMaker(context,
                    ///coachmaker will show from index 0 to n of initialList
                    ///
                    initialList: [
                      ///initial name of CoachPoint from previous example ☝️ (inital: '1') 
                      ///
                      CoachModel(
                          initial: '1',
                          title: 'Indonesia',
                          maxWidth: 400,
                          ///if subtitle length > 1 will show pageview slider
                          ///
                          subtitle: [
                            '1. Aceh',
                            '2. Jakarta',
                            '3. Bali',
                            '4. Papua',
                          ],
                          header: Image.asset(
                            'images/logo.png',
                            height: 50,
                            width: 50,
                          )),
                      ///other initials name available
                      ///
                      CoachModel(
                          initial: '2',
                          title: 'Burung perkutut, burung kuthilang',
                          maxWidth: 400,
                          alignment: Alignment.centerRight,
                          subtitle: [
                            'kamu kentut enggak bilang bilang ',
                          ],
                          header: Image.asset(
                            'images/logo.png',
                            height: 50,
                            width: 50,
                          )),
                    ],
                    nextStep: CoachMakerControl.next,
                    buttonOptions: CoachButtonOptions(
                        buttonTitle: 'Lanjut',
                        buttonStyle: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.green),
                            elevation: MaterialStateProperty.all(0))))
                .show();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
),

#5. Running your project 🚗

Full example : Example Coachmaker

List Controller

Now you can auto scroll of list and coach the item

2 way to use it :

#1 Using Index

used when all list items are the same height size .

CoachModel(
  initial: '60',
  title: 'Nomer 60',
  maxWidth: 400,
  subtitle: [
    'Tuh kan loncat',
  ],
  scrollOptions: ScrollOptions(
    scrollController: _scrollController,
    isLast: true
  ),
  header: Image.asset(
    'images/logo.png',
    height: 50,
    width: 50,
  )
),

confused? you can check this Example Here

#2 Using Manual Height

Sometimes, maybe your list item haven't same height, you can using manualHeight for sliding to item

CoachModel(
  initial: '1',
  title: 'Burung kakak tua',
  maxWidth: 400,
  subtitle: [
    'Burung kakak tua\nHinggap di jendela\nNenek sudah tua\nGiginya tinggal dua',
  ],
  header: Image.asset('images/logo.png',
    height: 50,
    width: 50,
  ),
  scrollOptions: ScrollOptions(
    scrollController: _scrollController,
    manualHeight: 600
  ),
),