Como criar um Wizard UI em Flutter?
Tags: flutter, wizardui, mobile, android
Published: 2021-02-13 21:47:23

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

![Wizard mago](https://dev-to-uploads.s3.amazonaws.com/i/uuq8fpr3wrt9onc04vjy.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y5b80yj0bsg2zfxm8hox.jpg)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n1lv5cw0ighm6qurt668.jpg)
`Requisitos de informação para o aplicativo de finanças pessoais.`

E comece a pensar em agrupamentos lógicos.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wv7rzkkeu6z3xko89pry.jpg)
`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.

![arvore](https://dev-to-uploads.s3.amazonaws.com/i/dardm6yrebrqq1r5tjsr.jpg)
`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. 

![Fluxo](https://dev-to-uploads.s3.amazonaws.com/i/qcg3c0ljkx7vr4fliiuo.jpg)
`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)),
                  ),
                ],
              )
```

![Card](https://dev-to-uploads.s3.amazonaws.com/i/lkle2hb7qzrt0fuc73o2.jpg)

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',
              ),
            ),
```

![Formulario](https://dev-to-uploads.s3.amazonaws.com/i/ecxmow2xg9ou5oeorip3.jpg)


`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)),
            )
```

![Check](https://dev-to-uploads.s3.amazonaws.com/i/fhaim88ytardzdsaq5ob.jpg)


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.

![Wizard completo](https://dev-to-uploads.s3.amazonaws.com/i/tokg8choeop470jfat7t.jpg)

## 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] (https://medium.com/nextux/how-to-design-a-form-wizard-b85fe1cc665a)
[The Wizard of user experience](https://uxdesign.cc/the-wizard-of-user-experience-6926ca41bc9a)
[Exemplo completo no GitHub](https://github.com/JoabeRamone/wizard-ui)
[Joabe Ramone YouTube](https://www.youtube.com/channel/UCcNWj_53z8qeRxRwsn4OvSQ)