1 Introdução

Eai clan, tudo certo?

Hoje eu vim aqui falar sobre um conteúdo bem legal que faz muita diferença quando precisamos coletas muitas informações.

Sabemos como preencher formulários é bem chato e trabalhoso, e uma das maneiras de tornar mais dinâmico esta tarefa é aplicando uma metodologia de Design.

1.1 O que é Wizard ?

Wizard é um padrão de design de interface com o usuário que permite que usuários atinjam um determinado objetivo por meio de uma série de etapas. O usuário insere dados em cada visualização e prossegue para a próxima etapa até a conclusão.

Os Wizard's são frequentemente usados ​​para fluxos de integração, em que o usuário precisa inserir um conjunto de informações para começar a utilizar um aplicativo.

Wizards são mais usados:

• Para uma série de fluxos de entrada de dados confiáveis ​​e ramificados.

• Quando os usuários precisam cumprir uma meta que depende de tarefas complexas e conclusão de subtarefas.

2 Determinar os requisitos e conduzir pesquisas

Por exemplo vamos fazer um aplicativo simples de finanças onde o usuário vai definir suas metas, mas para começar a utilizar o aplicativo ele precisa inserir dados básicos.

A intenção de usar Wizard é para que os usuários possam ver todas as suas transações categorizadas e contabilizadas para que consigam definir metas financeiras. Com base nessa percepção, determinamos algumas tarefas gerais de inicialização.

Tarefas gerais de inicialização do usuário para o aplicativo de finanças pessoais: adicionar informações pessoais para criar uma conta, conectar bancos, definir metas financeiras.

A partir daí, determinamos os requisitos de informação com base nessas tarefas gerais.

Requisitos de informação para o aplicativo de finanças pessoais.

E comece a pensar em agrupamentos lógicos.

Agrupamentos de requisitos de informações para o aplicativo de finanças pessoais.

3 Crie um fluxo de tarefa

As necessidades de informação são categorizadas e agrupadas em uma sequência de tarefas e subtarefas. O agrupamento de ações relacionadas e as etapas de ordenação reduzem sequencialmente a carga cognitiva, reduzindo a destreza da entrada de dados e fornecendo um caminho claro para a conclusão.

Exemplo de um fluxo de tarefa de ramificação.

Frequentemente, o fluxo do usuário se ramifica em caminhos diferentes dependendo das entradas anteriores. Um usuário pode receber uma pergunta que determina uma nova necessidade ou sequência de informações. Essas informações são apresentadas em outra visão ou na visão atual.

O fluxo de integração de finanças pessoais pode incorporar diferentes fluxos para inserir as informações bancárias de um usuário.

Grupos de tarefas de on-boarding de finanças pessoais representados em um stepper.

Então vamos separar em 3 etapas o processo para o usuário criar suas metas financeiras.

1. Dados pessoais
2. Conectar com o Banco
3. Definir metas

4 Criando Wizard em Flutter

Na nossa tela principal vamos criar nossos cards que vai ser nossas três etapas do fluxo de cadastro, então nesta parte vamos colocar as ações onde cada card vai para um formulário diferente.

Tela do Card:

Variavel

bool isDadosPessoal = false;

Card

        Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 30),
                    child: isDadosPessoal
                        ? Icon(
                            Icons.check_circle,
                            color: Colors.green,
                            size: 45,
                          )
                        : Icon(
                            Icons.circle,
                            size: 45,
                            color: Colors.grey,
                          ),
                  ),
                  FlatButton(
                    minWidth: 250,
                    height: 50,
                    child: Text(
                      'Dados do pessoais',
                      style: TextStyle(fontSize: 18),
                    ),
                    onPressed: () async {
                      bool flag = await Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => PrimeiraPagina(),
                          ));
                      if (flag) {
                        setState(() {
                          isDadosPessoal = flag;
                        });
                      } else {
                        setState(() {
                          isDadosPessoal = false;
                        });
                      }
                    },
                    shape: RoundedRectangleBorder(
                        side: BorderSide(color: Colors.grey[600], width: 2, style: BorderStyle.solid), borderRadius: BorderRadius.circular(0)),
                  ),
                ],
              )

Tela do Formulário:

Corpo da tela

Row(
              children: [
                Text(
                  'Dados Pessoais',
                  textAlign: TextAlign.start,
                  style: TextStyle(fontWeight: FontWeight.w700, fontSize: 20),
                ),
              ],
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Nome Completo',
              ),
            ),

Botão de Salvar

FlatButton(
              minWidth: 200,
              color: Colors.blue,
              height: 42,
              onPressed: () {
                Navigator.pop(context, true);
              },
              child: Text(
                'Salvar',
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
              shape: RoundedRectangleBorder(
                  side: BorderSide(color: Colors.transparent, width: 2, style: BorderStyle.solid), borderRadius: BorderRadius.circular(20)),
            )

Agora é só replicar os cards conforme a necessidade, para continuar o nosso exemplo do aplicativo de finanças. Vamos Fazer mais dois card's para completar o fluxo que vai ter este resultado.

Conclusão

Leva horas de pesquisa e atenção para criar um conteúdo como este artigo. Por favor, dê like para me motivar a continuar escrevendo.

É gratuito para você, mas significa muito para mim. Valeu galera!

Referências

How to Design a Form Wizard
The Wizard of user experience
Exemplo completo no GitHub
Joabe Ramone YouTube