Já se foi o tempo em que uma empresa precisava contratar vários engenheiros para lançar um aplicativo em plataformas móveis e na web. Essa abordagem invariavelmente leva a inconsistências sutis entre as versões e outros desafios associados ao gerenciamento de várias bases de código.
Com o Flutter 2.0 , você pode enviar seu aplicativo móvel existente como uma web aplicativo com pouca ou nenhuma alteração no código existente. No momento em que este artigo foi escrito, a construção estável para a web é adequada para o desenvolvimento:
- Única – aplicativos de página (SPAs) que são executados em uma única página e são atualizados dinamicamente sem carregar uma nova página
- Aplicativos da web progressivos (PWAs) , que podem ser executados como aplicativos de desktop
Neste tutorial, mostraremos como converter seu aplicativo móvel Flutter em um aplicativo da web e implantá-lo no Firebase Hosting . Abordaremos o seguinte:
- Criação de um diretório da web para seu aplicativo Flutter
- Verificando o suporte do plug-in
- Tornando o aplicativo responsivo
- Manipulação da navegação
- Ativando a interação específica do navegador e da área de trabalho
- Implementando seu aplicativo Flutter na web
Criaremos um exemplo de aplicativo Flutter que mostra a lista de categorias de compras. Clicar em uma categoria abre uma lista de produtos disponíveis. Os usuários podem adicionar e remover produtos do carrinho. Vamos direcionar este aplicativo simples para enviar para a web com o mesmo código.
O produto acabado terá a seguinte aparência:
Criando um diretório da web para seu aplicativo Flutter
Se você deseja converter um aplicativo móvel Flutter em um aplicativo da web, a primeira etapa é criar um diretório da web:
vibração criar.
O comando acima deve criar o diretório da web na raiz do projeto, ao lado das pastas Android e iOS.
Agora é hora de executar o mesmo aplicativo na web:
Para executar um aplicativo no navegador, selecione Chrome se estiver usando um sistema Mac ou Linux ou Edge se estiver no Windows. Em seguida, clique no botão Executar .
Incrível! Agora, nosso aplicativo Flutter, que era usado para dispositivos móveis, está sendo executado na web. Mas só porque está funcionando, isso não significa que funcionará perfeitamente como funciona no celular. Vamos ver quais outras etapas precisamos seguir para fazer a versão da web do aplicativo funcionar perfeitamente.
Verificando o suporte do plug-in
Esta é uma etapa muito importante. Antes de prosseguirmos, precisamos ter certeza de que há uma versão da web disponível para todos os pacotes e plug-ins que alimentam o aplicativo móvel.
Para verificar se uma versão da web de um determinado pacote está disponível, vá para pub.dev , cole o nome do pacote na barra de pesquisa e verifique se há um rótulo web no resultado da pesquisa.
Em nosso aplicativo de exemplo Flutter, estamos usando provedor para gerenciamento de estado, que está disponível para a web. Se alguma biblioteca não estiver disponível para a web, você pode tentar encontrar uma alternativa para essa biblioteca e refatorar o código. Se você deseja resolver o problema por conta própria, também pode contribuir com a biblioteca e apresentar o suporte para a web.
Tornando o aplicativo responsivo
Os navegadores da web têm muito espaço. Agora que nosso aplicativo de compras também será executado em navegadores da web, precisamos repensar como ficará quando a IU for renderizada nos navegadores. O aplicativo deve ser capaz de respeitar tamanhos de tela variados e fornecer IU/UX diferentes para uma experiência rica.
Vamos ver como fica o app de compras sem nenhuma IU responsiva:
Parece a IU do celular em uma tela maior. Há uma lacuna desagradável entre o nome do produto e o ícone do carrinho, o que torna a experiência do usuário ruim. Vamos ver como podemos acomodar essa grande lacuna e desenvolver uma IU responsiva:
//Antes
GridView.builder ( itemCount: 100, itemBuilder: (contexto, índice)=> ItemTile (índice), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount ( crossAxisCount: 1, childAspectRatio: 5, ),
)
//Após
LayoutBuilder (construtor: (contexto, restrições) { return GridView.builder ( itemCount: 100, itemBuilder: (contexto, índice)=> ItemTile (índice), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount ( crossAxisCount: constraints.maxWidth> 700? 4: 1, childAspectRatio: 5, ), );
})
A função de construtor LayoutBuilder widget’x é chamada sempre que o widget pai passa por diferentes restrições de layout. Isso significa que sempre que a resolução da tela muda, ela fornece as restrições , que determinam a largura e fornecem várias interfaces de usuário de acordo.
Para nosso aplicativo de compras, se a largura atual for maior que 700, renderizaremos 4 colunas em GridView.builder . O resultado ficará assim:
Manuseando navegação
A principal diferença entre as versões para celular e web de nosso aplicativo é a maneira como os usuários navegam dentro do aplicativo.
O aplicativo móvel possui algum fluxo fixo, o que significa que para abrir qualquer tela, o usuário deve seguir um caminho pré-definido. Por exemplo, para abrir a página de detalhes do produto, o usuário deve primeiro abrir a lista de produtos. Mas quando é executado na web, o usuário pode ir diretamente para a página de detalhes do produto, modificando o URL. Além de navegar dentro do aplicativo, o usuário tem a capacidade de navegar pela barra de endereço do navegador.
Então, como lidamos com isso em nosso aplicativo de compras? Podemos usar o pacote beamer para este propósito. beamer usa o poder da API do Navigator 2.0 e implementa toda a lógica subjacente para você.
class HomeLocation extends BeamLocation { @sobrepor Listar get pathBlueprints=> ['/']; @sobrepor List pagesBuilder (BuildContext context)=> [ BeamPage ( chave: ValueKey ('home'), criança: HomePage (), ), ];
}
O código acima simplesmente abre a HomePage () sempre que o aplicativo é iniciado.
class ProductsLocation estende BeamLocation { @sobrepor Listar get pathBlueprints=> ['/products/: productId']; @sobrepor List pagesBuilder (BuildContext context)=> [ ... HomeLocation (). PagesBuilder (contexto), if (pathSegments.contains ('produtos')) BeamPage ( chave: ValueKey ('products-$ {queryParameters ['title'] ??''}'), filho: ProductsPage (), ), if (pathParameters.containsKey ('productId')) BeamPage ( chave: ValueKey ('product-$ {pathParameters ['productId']}'), filho: ProductDetailsPage ( productId: pathParameters ['productId'], ), ), ];
}
Se o usuário tentar /produtos , a lista de todos os produtos será aberta. E se o link tiver um ID de produto —algo como /products/2 -ele abrirá a página de detalhes do produto para o ID de produto fornecido:
Habilitando a interação específica do navegador e da área de trabalho
Agora que o aplicativo está funcionando perfeitamente no navegador da web, devemos ativar algumas interações específicas do navegador ou desktop para fornecer uma experiência muito melhor.
Envolver toda a lista de produtos em Envolver o bloco da lista de produtos em Atalho de teclado Os atalhos do teclado não são muito úteis em um aplicativo de compras. Mas, para demonstrar como eles funcionam, vamos fazer com que pressionar a tecla ALT coloque um produto no carrinho do usuário. Agora estamos prontos para enviar nosso aplicativo de compras recém-convertido usando o serviço Firebase Hosting. Verifique os documentos oficiais do Firebase Hosting para obter instruções detalhadas de hospedagem. Abaixo está uma rápida visão geral de como implantar seu aplicativo Flutter com Firebase Hosting. Primeiro, inicialize o Firebase Hosting para o projeto: Em seguida, implante seu aplicativo usando o seguinte comando: Você pode verificar a versão da web de nosso aplicativo móvel Flutter aqui . O código completo usado para este exemplo está disponível em GitHub . A postagem Como migrar um aplicativo móvel Flutter para a web apareceu primeiro no LogRocket Blog . Barra de rolagem mostrará o barra de rolagem ao lado da lista de produtos para que os usuários possam ter uma ideia da posição de rolagem. LayoutBuilder (construtor: (contexto, restrições) { return Scrollbar ( filho: GridView.builder ( itemCount: 100, itemBuilder: (contexto, índice)=> ItemTile (índice), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount ( crossAxisCount: constraints.maxWidth> 700? 4: 1, childAspectRatio: 5, ), ), );
})
MouseRegion muda o cursor quando você passa o mouse sobre o produto. MouseRegion ( cursor: SystemMouseCursors.text, filho: ListTile ( ... ),
)
Atalhos ( atalhos:
Implantar seu aplicativo Flutter na web
hospedagem firebase init
firebase deploy-somente hospedagem
