← Todos os artigos

Desenvolvimento

Flutter: uma base de código, várias plataformas

Entenda como o Flutter permite compartilhar código entre celular, web e desktop, com exemplos de adaptação da interface e cuidados para cada plataforma.

Por Maniva Software House · · 3 min de leitura

Ilustração de um celular e uma janela de navegador com interfaces azuis adaptadas a diferentes tamanhos de tela.

Flutter é um conjunto de ferramentas de código aberto para desenvolver interfaces de aplicativos. Com ele, uma equipe pode compartilhar código entre Android, iOS, web, Windows, macOS e Linux. Os aplicativos são escritos principalmente em Dart, linguagem que fornece os recursos de programação usados pelo framework.

A proposta é reaproveitar a lógica do aplicativo e partes da interface. Uma base de código compartilhada ainda pode incluir adaptações para cada plataforma, conforme os recursos disponíveis e a forma de interação.

Como funciona

A interface é organizada em componentes chamados widgets. Um texto, um botão, uma lista e a organização de uma tela podem ser descritos por widgets combinados entre si. Quando os dados mudam, o Flutter atualiza a interface para representar o novo estado.

O framework controla o desenho de grande parte da interface, em vez de depender apenas dos controles visuais oferecidos pelo sistema operacional. Isso permite compartilhar componentes e manter características visuais entre plataformas. Durante o desenvolvimento, o recurso hot reload permite visualizar muitas alterações no código sem reiniciar completamente o aplicativo.

A preparação para execução varia conforme o destino. Nos aplicativos móveis e de computador, o código de produção é compilado para código de máquina. Na web, o aplicativo e o framework são compilados para JavaScript ou WebAssembly e executados no navegador.

Um exemplo entre celular e navegador

Considere, como exemplo ilustrativo, um aplicativo de lista de tarefas. As regras para criar, concluir e filtrar tarefas podem ser compartilhadas pelas versões móvel e web.

No celular, a interface poderia apresentar uma lista em uma única coluna, com controles adequados ao toque. Em uma janela ampla do navegador, poderia exibir a lista ao lado dos detalhes da tarefa selecionada, com suporte a mouse e teclado.

Esse exemplo aplica os princípios de design responsivo e adaptativo: aproveitar o espaço disponível e considerar como a pessoa interage com o aplicativo. O compartilhamento de código permite essas variações, mas elas precisam ser planejadas.

Limitações e cuidados

Recursos específicos, como acesso a funcionalidades do dispositivo, podem depender de plugins ou de código próprio para cada plataforma. A compatibilidade das dependências precisa ser verificada para os destinos escolhidos.

Na web, Flutter é voltado principalmente a experiências de aplicativo. Sites centrados em textos, como blogs e páginas que dependem de indexação por buscadores, tendem a se beneficiar de uma estrutura baseada em HTML. O navegador também impõe restrições diferentes das encontradas em aplicativos instalados.

Flutter permite concentrar parte importante do desenvolvimento em uma base compartilhada. O resultado depende de quanto o aplicativo pode reutilizar e de quais adaptações sua interface e seus recursos exigem em cada plataforma.