Futuriza Flutter

SDK para integração com os serviços Futuriza.
Permite a adição de modelos 3D de produtos ao seu aplicativo, para que o seu usuário tenha uma melhor noção de como o produto é e faça uma compra mais assertiva.
É possível adicionar o modelo do produto dentro de uma tela, ou visualizá-lo em um ambiente real através de realidade aumentada.

Instalação

Adicione a biblioteca como dependência do seu projeto no pubspec.yaml:

dependencies:
    futuriza_flutter: ^0.0.1

Permissões

Para mostrar os produtos em um ambiente real usando realidade aumentada, será necessário utilizar a câmera do usuário. Para isso, é preciso adicionar as permissões de acesso à câmera no seu aplicativo.

Android

Configure seu projeto para utilizar o AndroidX.

Adicione as seguintes linhas ao seu gradle.properties:

android.useAndroidX=true
android.enableJetifier=true

Altere o compileSdkVersion de android/app/build.gradle para 33:

android {
    compileSdkVersion 33
}

Adicione o uso da permissão android.permission.CAMERA ao AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA"/>

Adicione a configuração android:usesCleartextTraffic="true" ao AndroidManifest.xml:

<application 
  android:usesCleartextTraffic="true"
  ...>

iOS

Adicione PERMISSION_CAMERA=1 ao Podfile, indicando que o seu aplicativo utiliza a permissão de câmera:

post_install do |installer|
    installer.pods_project.targets.each do |target|
      flutter_additional_ios_build_settings(target)
      target.build_configurations.each do |config|
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
          '$(inherited)',
          ## dart: PermissionGroup.camera
          'PERMISSION_CAMERA=1',
        ]
      end
    end
  end

Adicione a mensagem de permissão NSCameraUsageDescription ao Info.plist:

    <key>NSCameraUsageDescription</key>
    <string>Precisamos acessar a sua câmera para te mostrar um produto incrível!</string>

Adicione a configuração io.flutter.embedded_views_preview ao Info.plist:

  <key>io.flutter.embedded_views_preview</key>
  <true/>

Modo de usar

FuturizaService

Essa classe pode ser utilizada para consumir os dados da API Futuriza.
O método getProduct3DModel retorna as informações do modelo 3D do produto, informando se ele possui modelo 3D, se possui experimentação, e as URLs para visualização. O método getProductStories retorna as informações de stories do produto, informando se ele possui stories, e os detalhes de cada story, como URL do vídeo, título e posicionamento.

const futurizaService = FuturizaService();

// Obtém os dados do modelo 3D do produto
final modelInfo = await futurizaService.getProduct3DModel(
    productId: myProductId,
    token: myClientToken,
);

// Caso o produto possua modelo 3D, você pode mostrá-lo
if (productModel.has3D) {
  _show3DModel = true;
}

// Caso o produto possua experimentação, você pode mostrá-la
if (productModel.hasTryOn) {
  _showTryOn = true;
}

// Obtém os dados de stories do produto
final productStories = await futurizaService.getProductStories(
  productId: myProductId,
);

// Caso o produto possua stories, você pode mostrá-los
if (productStories.hasVideo) {
  _showStories = true;
}

Product3DModelRenderer

Utilize esse Widget para adicionar o modelo 3D de um produto como seção de uma tela existente.
É necessário informar os dados do modelo 3D do produto.

Product3DModelRenderer(
    productModel: productModel,
);

ARTryOn

Utilize esse Widget para mostrar o modelo 3D de um produto em realidade aumentada, permitindo que o usuário o veja em um ambiente real ou prove-o.
É necessário informar os dados do modelo 3D do produto.
Você pode usar esse Widget para adicionar a visualização como seção de uma tela existente, ou usar o método showARTryOn para abrir uma página de visualização.

ARTryOn(
  productModel: productModel,
);

showARTryOn(
    context,
    productModel,
);

ProductStoryPreview

Utilize esse Widget para mostrar a pré-visualização de um story.
É necessário informar os dados do story, e opcionalmente é possível customizar decoração, animação e código a ser executada ao pressionar o story.
Você pode usar esse Widget para adicionar a pré-visualização do story em uma tela existente e com um posicionamento customizado.

ProductStoryPreview(
  story: productStories.stories.first,
  // Opcionais
  size: 56,
  onTap: _onTapStoryPreview,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    border: Border.all(color: Colors.red),
  ),
);

FloatingProductStoriesArea

Utilize esse Widget para mostrar a pré-visualização dos stories do produto como bolha flutuante acima da área envolvida.
É necessário informar os dados dos stories, e opcionalmente é possível construir uma pré-visualização customizada.
Ao pressionar a bolha de pré-visualização do story, o usuário é redirecionado para a tela de stories ProductStoriesPage. Você pode usar esse Widget para adicionar a pré-visualização do story em uma tela existente e com posicionamento do acordo com os valores retornados pela API.

FloatingProductStoriesArea(
  stories: productStories,
  child: ProductDetailsPage(),
  // Opcional
  previewBuilder: (context, story, stories, goToStoriesPage) => _buildCustomStoryPreview(story),
);

ProductStoriesPage

Utilize esse Widget para mostrar os stories de um produto.
É necessário informar os dados dos stories.
Você pode usar esse Widget para mostrar os stories de um produto em tela cheia, para que o usuário possa interagir com eles.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => ProductStoriesPage(
      stories: productStories,
    ),
  ),
);