DEV Community

loading...
Cover image for Como criar um Wizard UI em Flutter?

Como criar um Wizard UI em Flutter?

joaberamone profile image Joabe Ramone ・4 min read

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

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

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
Requisitos de informação para o aplicativo de finanças pessoais.

E comece a pensar em agrupamentos lógicos.

Alt Text
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
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
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;
Enter fullscreen mode Exit fullscreen mode

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)),
                  ),
                ],
              )
Enter fullscreen mode Exit fullscreen mode

Card

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',
              ),
            ),
Enter fullscreen mode Exit fullscreen mode

Formulario

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)),
            )
Enter fullscreen mode Exit fullscreen mode

Check

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

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

Discussion (0)

pic
Editor guide