Flutter: integrando ARKit

Primeiro contato com AR - Apresentação

Introdução ao Curso de Realidade Aumentada

Já pensou em construir aplicativos que utilizam realidade aumentada em dispositivos iOS?

Olá! Meu nome é Matheus, sou instrutor aqui na Alura.

Audiodescrição: Matheus é uma pessoa branca, de cabelos castanhos bem escuros, usa óculos e está de barba.

Apresentação do ARKit

Vou apresentar o plugin ARKit. Com o ARKit, conseguimos simular a inserção de objetos 3D no nosso ambiente real. Nosso cliente, a Toca Móveis, está solicitando que coloquemos objetos 3D de mobílias para que seus clientes possam ter uma noção de como esses objetos ficariam em suas residências, como, por exemplo, em suas salas.

Funcionalidades do ARKit

Vamos, por exemplo, trabalhar com uma mobília, uma mesa de centro. Nós clicaremos no botão de realidade aumentada e daremos instruções para a pessoa movimentar o celular, permitindo que ela tenha uma noção de perspectiva.

Clicando na tela, conseguimos movimentar um objeto, posicionando-o em diferentes partes, como, por exemplo, em uma mesa. Também é possível manipular esse objeto, rotacionando-o e aumentando seu tamanho. Esses objetos serão baixados da internet, de uma API. Podemos pegar todos esses objetos e modificá-los conforme a necessidade, como quando uma cliente estiver atualizando o estoque.

Pré-requisitos para o Curso

Para seguir com este curso, é importante já ter conhecimentos de Flutter, dominar o uso de Stateful Widgets, saber como fazer requisições e ter noções de arquitetura, como o funcionamento do MVVM.

Considerações sobre Compatibilidade

Este plugin é especificamente construído para iOS e não funciona em dispositivos Android. Se for necessário buscar uma solução para dispositivos Android, na plataforma também há outro curso onde é possível aprender sobre um plugin específico para Android.

Encerramento

Esperamos você no próximo vídeo. Até breve!

Primeiro contato com AR - Conhecendo o plugin

Instalação do Plugin ARKit no Flutter

Para começar a trabalhar com o ARKit no Flutter, precisamos instalar o plugin necessário. Vamos utilizar o comando flutter pub add arkit_plugin para adicionar o plugin ao nosso projeto. No terminal do VSCode, executamos:

flutter pub add arkit_plugin

Isso instalará a versão mais recente do plugin. No entanto, para garantir a consistência, vamos especificar a versão 1.1.2 no arquivo pubspec.yaml:

dependencies:
  arkit_plugin: ^1.1.2

Configuração de Permissões e Plataforma no iOS

Com o plugin instalado, precisamos configurar algumas permissões no arquivo info.plist para que o aplicativo possa acessar a câmera. No arquivo info.plist, localizado na pasta "iOS/Runner", adicionamos as seguintes linhas para descrever o uso da câmera:

<key>NSCameraUsageDescription</key>
<string>Describe why your app needs AR here.</string>

Além disso, precisamos garantir que o aplicativo seja executado em dispositivos com iOS 12 ou superior. Para isso, vamos editar o podfile na raiz da pasta "iOS". Descomentamos a linha que define a plataforma e a ajustamos para a versão 12.0:

platform :ios, '12.0'

Após salvar essas alterações, navegamos para a pasta "iOS" e executamos o comando pod install para instalar as dependências necessárias:

cd ios
pod install

Desenvolvimento da Tela de Realidade Aumentada

Agora que as configurações estão prontas, podemos começar a desenvolver nosso aplicativo AR. Vamos criar uma nova tela para exibir a realidade aumentada. No VSCode, dentro da pasta lib/ui/ar, criamos um arquivo chamado ar_screen.dart. Este arquivo conterá nosso StatefulWidget para a tela de AR.

Utilizamos o atalho do VSCode para criar um StatefulWidget:

import 'package:flutter/material.dart';

class ArScreen extends StatefulWidget {
  const ArScreen({super.key});

  @override
  State<ArScreen> createState() => _ArScreenState();
}

Agora, vamos construir o layout da tela utilizando um Scaffold e o ARKitSceneView:

import 'package:arkit_plugin/arkit_plugin.dart';
import 'package:vector_math/vector_math_64.dart';

class _ArScreenState extends State<ArScreen> {
  late ARKitController arkitController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ARKit in Flutter')),
      body: ARKitSceneView(onARKitViewCreated: onARKitViewCreated),
    );
  }

  void onARKitViewCreated(ARKitController arkitController) {
    this.arkitController = arkitController;
    final node = ARKitNode(
      geometry: ARKitSphere(radius: 0.1), 
      position: Vector3(0, 0, -0.5),
    );
    this.arkitController.add(node);
  }
}

Integração da Tela de AR com a Tela de Permissão

Com a tela de AR configurada, precisamos garantir que ela seja acessível a partir da tela de permissão. No arquivo permission_screen.dart, modificamos o botão para navegar para a ArScreen após a permissão ser concedida:

onPressed: () {
  Navigator.push(context, MaterialPageRoute(builder: (context) => ArScreen()));
},

Após salvar todas as alterações, executamos novamente o pod install para garantir que todas as dependências estejam atualizadas:

pod install

Execução e Teste do Aplicativo AR

Com o aplicativo configurado e as permissões concedidas, ao clicar no botão de AR, a tela de AR será exibida. Após permitir o acesso à câmera, uma esfera aparecerá na tela, e ao mover o celular, podemos visualizar a esfera em realidade aumentada. Este é nosso primeiro contato com AR no Flutter.

Primeiro contato com AR - O que é AR?

Introdução à Integração de AR no Flutter

Para entender melhor como integrar a Realidade Aumentada (AR) em nosso aplicativo Flutter, vamos explorar o código que criamos e colamos no editor VS Code. Começamos com a criação de um StatefulWidget, que é essencial para gerenciar o estado da nossa aplicação de AR.

Importação de Pacotes Necessários

Primeiro, importamos os pacotes necessários para trabalhar com AR e Flutter:

import 'package:vector_math/vector_math_64.dart';
import 'package:arkit_plugin/arkit_plugin.dart';
import 'package:flutter/material.dart';

Criação da Classe ArScreen

Criamos a classe ArScreen, que é um StatefulWidget. Isso nos permite gerenciar o estado da cena de AR:

class ArScreen extends StatefulWidget {
  const ArScreen({super.key});

  @override
  State<ArScreen> createState() => _ArScreenState();
}

Declaração do ARKitController

Dentro do State, declaramos um ARKitController como late, indicando que ele será inicializado posteriormente:

class _ArScreenState extends State<ArScreen> {
  late ARKitController arkitController;

Configuração da Interface do Usuário

No método build, configuramos a interface do usuário com um Scaffold que contém um ARKitSceneView. Este é o componente que renderiza a cena de AR:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ARKit in Flutter')),
      body: ARKitSceneView(onARKitViewCreated: onARKitViewCreated),
    );
  }

Criação e Adição de Nodes à Cena de AR

A função onARKitViewCreated é chamada quando a cena de AR é criada. Aqui, atribuímos o ARKitController e adicionamos um Node à cena:

  void onARKitViewCreated(ARKitController arkitController) {
    this.arkitController = arkitController;
    final node = ARKitNode(
      geometry: ARKitSphere(radius: 0.1), position: Vector3(0, 0, -0.5));
    this.arkitController.add(node);
  }

Detalhes do Node Criado

O Node que criamos é uma esfera, definida por ARKitSphere, com um raio de 0.1. A posição é especificada por um vetor 3D, Vector3(0, 0, -0.5), que coloca a esfera um pouco afastada do ponto inicial da cena:

final node = ARKitNode(
      geometry: ARKitSphere(radius: 0.1), position: Vector3(0, 0, -0.5));

Finalização da Cena de AR

Finalmente, para garantir que a cena de AR seja corretamente finalizada quando a tela for fechada, implementamos o método dispose. Isso é crucial para liberar recursos e evitar problemas de sobrescrita ao criar novas cenas:

  @override
  void dispose() {
    arkitController.dispose();
    super.dispose();
  }

Conclusão e Possibilidades de Expansão

Com isso, temos uma configuração básica de AR em Flutter, onde uma esfera é renderizada em uma cena de AR. Podemos expandir essa configuração adicionando mais Nodes ou alterando as propriedades dos existentes para criar experiências de AR mais complexas.

Sobre o curso Flutter: integrando ARKit

O curso Flutter: integrando ARKit possui 104 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Primeiro contato com AR
• Aprofundando nas funcionalidades
• Adicionando objetos customizados
• Objetos sob demanda
• Manipulando objetos e finalizando o UX