1. Guia Rápido

O Tema Interativo para personalização da biblioteca do Liveness 3D é uma plataforma essencial que permite a seleção de cores, bordas, arredondamento de bordas e sombreamento. Isso simplifica a geração de código, possibilitando a fácil implementação no seu Liveness 3D.

Aprenda a personalizar o Liveness 3D no Flutter para integrar as propriedades customizadas em seu código de forma simples e ágil.

Siga os passos para interagir com o Tema Interativo.

Antes de começar

• Além disso, será necessário importar as fontes desejadas para a pasta de fontes do seu ambiente Android e iOS, nativamente arrastando e soltando seus arquivos .tff na pasta "assets/fonts" no Android, e no iOS registrando nos assets da aplicação.

Telas para customização

O Tema Interativo apresenta três telas de customização que orientam o usuário durante a execução do Liveness 3D:

• Na primeira tela, encontramos as instruções para a preparação do usuário, sendo o ponto inicial de interação com o Liveness 3D.
• A segunda tela é destinada à retentativa. Caso o usuário precise refazer a jornada, essa tela fornece diretrizes, incluindo um exemplo de foto ideal.
• A terceira tela consiste na tela de resultado. Nela, o usuário recebe a mensagem de conclusão do processo de Liveness.

Propriedades customizáveis

As propriedades destinadas à customização estão localizadas na segunda coluna do iframe. Nesta coluna, é possível encontrar o nome da propriedade (1) e sua respectiva descrição (2).

Para exportar o código das customizações

Passo 1: visualize o código

Após concluir todas as personalizações, é necessário clicar no botão "código" (1) para visualizar todas as modificações realizadas e, em seguida, exportá-las para incorporação no seu projeto.

Passo 2: importe as fontes

Coloque os arquivos de fontes na pasta "assets res/fonts.xml" no Android ou registre nos assets caso seja iOS

Passo 3: inicie o builder do ThemeBuilder e das fontes Liveness3dFonts.

Utilize o exemplo a seguir para iniciar as funções do tema com as propriedades desejadas.

	 ThemeBuilder _themeCustomization() {
    return ThemeBuilder()
      ..guidanceCustomizationButtonBackgroundNormalColor = '#8e9334'
      ..ovalCustomizationStrokeColor = '#8e9334';
  }

  Liveness3dFonts _fontsCustomization() {
    return Liveness3dFonts()
      ..guidanceCustomizationHeaderFont = 'Lobster'
      ..guidanceCustomizationSubtextFont = 'Lobster'
      ..readyScreenCustomizationHeaderFont = 'Lobster'
      ..guidanceCustomizationButtonFont = 'Lobster'
      ..feedbackCustomizationTextFont = 'Lobster';
  }

Passo 4: identifique e implemente as propriedades

O objeto de cores inclui uma série de propriedades que podem ser customizadas, divididas em categorias como Guidance, Botões, Ready e Retry Screen, entre outras.

O código das propriedades customizadas também reflete essa série mencionada anteriormente. Identifique e implemente de acordo com as respetivas customizações.

2. Tema Interativo - Flutter

Use a plataforma para iniciar as customizações do Liveness 3D.

3. Propriedades customizáveis

Abaixo, estão mapeadas as propriedades para customização do objeto ThemeBuilder.

Customizações de telas Liveness3D

Guidance

Botões

Ready Screen

Retry Screen

Result Screen Customization

Oval Customization

Frame Customization

Overlay Customization

Feedback Customization

Customização dos Textos

Da mesma forma que criamos um objeto, criamos para as fontes no 3D utilizando o TextsBuilder, seguindo esse exemplo:

	TextsBuilder _textsCustomization() {
    return TextsBuilder()
      ..readyHeader1 = 'ready_header_1'
      ..readyHeader2 = 'ready_header_2'
      ..readyMessage1 = 'ready_message_1'
      ..readyMessage2 = 'ready_message_2'
      ..feedbackBrightenYourEnvironment = 'feedback_brighten_your_environment';
  }

Ready Screen

Retry Screen

Result Screen

Feedback