Introdução
Existem vários tipos de aplicativos que os desenvolvedores podem escolher para escrever: aplicativos de console, aplicativos móveis, aplicativos da web e aplicativos de desktop.
Os aplicativos da área de trabalho são executados dentro de uma janela do sistema com vários elementos da IU. Se você vai fazer um aplicativo de desktop, existem várias estruturas, kits de ferramentas de IU e linguagens de programação diferentes para escolher.
Existem dois tipos de APIs de desenvolvimento de aplicativos para desktop: específicas para plataformas e multiplataforma. As APIs específicas da plataforma suportam apenas um sistema operacional de destino. Por exemplo, a Cocoa API fornece interfaces para o desenvolvimento de aplicativos de desktop para a plataforma macOS. Por outro lado, as APIs de plataforma cruzada permitem que os desenvolvedores criem aplicativos de desktop para vários sistemas operacionais com uma única API genérica.
Hoje em dia, os frameworks de desenvolvimento de plataforma cruzada são populares devido aos seguintes motivos:
- Os desenvolvedores podem manter uma única base de código para várias plataformas, porque a API da estrutura de plataforma cruzada fornece uma boa abstração para APIs específicas da plataforma
- Entrega rápida de recursos, o que significa que não há necessidade de implementar o mesmo recurso para sistemas operacionais diferentes, escrevendo código específico para a plataforma para que novos recursos possam ser fornecidos com eficiência
Neste artigo, vou explicar como criar, construir e lançar aplicativos nativos de plataforma cruzada para desktop com o Flutter. Também vamos discutir a razão por trás da popularidade do Flutter.
O que é flutuação?
Flutter é uma estrutura de desenvolvimento de aplicativos de plataforma cruzada que podemos usar para construir aplicativos compilados de forma nativa para várias plataformas: celular, desktop e web.
Os destinos de saída suportados conhecidos são Android, iOS, HTML, HTML Canvas, Linux, Windows, macOS e Fushia. O Flutter usa o Dart como linguagem de desenvolvimento de aplicativos.
Atualmente, o Flutter se concentra mais no desenvolvimento de aplicativos móveis, mas também oferece suporte a destinos baseados em desktop.
Este framework vem com seu próprio kit de ferramentas de widgets. Quando um aplicativo Flutter específico é iniciado, o Flutter renderiza os controles da IU do aplicativo por meio da biblioteca de gráficos do Skia.
Por que o Flutter é tão popular?
No campo de desenvolvimento de framework de plataforma cruzada, o problema mais crítico é como colocar a camada de abstração para todas as plataformas. Em outras palavras, como oferecer uma API genérica para desenvolvedores sem criar problemas de desempenho para o aplicativo.
Frameworks de desenvolvimento de aplicativos de desktop, como Electron, introduziram um navegador da web para renderização. As estruturas de desenvolvimento de aplicativos móveis Apache Cordova e Ionic resolveram o problema da mesma maneira. Mesmo que essas estruturas forneçam APIs de plataforma cruzada simples para desenvolvedores, há problemas críticos de desempenho devido à renderização baseada em navegador da web.
O Flutter oferece APIs simples e multiplataforma por meio de bibliotecas Dart, ao mesmo tempo que mantém um desempenho excelente.
Desenvolvendo um aplicativo de desktop com Flutter
Neste tutorial, mostrarei como fazer um aplicativo simples de plataforma cruzada para desktop com o Flutter.
Configurando o ambiente de desenvolvimento Flutter
Configurar o Flutter é moleza porque se trata de inserir alguns comandos de terminal.
Primeiro, precisamos instalar o Flutter SDK com o seguinte comando:
$ sudo instalação instantânea flutter--classic
Depois disso, precisamos habilitar o modo de desenvolvimento de desktop:
$ flutter config--enable--desktop // =linux, windows, macos
Se o modo desktop estiver ativado, o comando flutter devices deve listar seu sistema operacional atual.
Criação de um novo aplicativo Flutter
Como qualquer outra CLI típica, podemos criar um novo aplicativo com o comando create conforme mostrado abaixo:
$ flutter criar aplicativo para desktop
O comando acima criará um projeto inicial simples para nós. O projeto inicial contém código mínimo com comentários para nos ajudar a entender como o Flutter funciona.
O arquivo lib/main.dart contém o código-fonte principal do seu aplicativo. Vamos modificar o código-fonte principal conforme mostrado abaixo para criar um aplicativo simples “Hello World”:
import'package: flutter/material.dart'; void main () { runApp (MyApp ());
} class MyApp extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return MaterialApp ( título:'TextPad', tema: ThemeData ( primarySwatch: Colors.green, ), casa: Scaffold ( corpo: Centro ( filho: Texto ('Olá, Mundo') ), ), ); }
}
Você pode visualizar este projeto no Github aqui.
Depois de editar o arquivo de origem principal, digite o seguinte comando para executar seu aplicativo:
$ flutter run-d// =linux, windows, macos
O comando acima abrirá o aplicativo Flutter “Hello World” em uma janela nativa. A janela nativa será estilizada de acordo com o sistema operacional atual e a configuração do tema do sistema.
Depurando o aplicativo Flutter
O ambiente de desenvolvimento Flutter suporta o recurso de recarregamento a quente. Portanto, podemos pressionar a tecla r no console onde você inseriu o comando flutter run para acionar o recarregamento a quente. Tente alterar o conteúdo do widget de texto enquanto o aplicativo está sendo executado no modo de depuração.
Implementando um aplicativo de plataforma cruzada para desktop
Vamos implementar um pequeno aplicativo de plataforma cruzada para desktop com o Flutter. Vamos fazer um pequeno aplicativo de editor de texto chamado “TextPad”. O TextPad possui um campo de texto grande com várias linhas onde podemos digitar nossas notas. Também possui um botão de ação para salvar a nota atual em um arquivo. Uma captura de tela do TextPad é mostrada abaixo.
Conforme mencionado, o botão Salvar no canto superior direito escreverá a nota atual em um arquivo de texto. Depois de salvar o arquivo, o TextPad exibirá uma mensagem de notificação sobre a conclusão da tarefa.
Semelhante ao aplicativo Hello-World anterior, adicione o seguinte código-fonte ao arquivo-fonte do aplicativo principal:
import'dart: io';
import'package: flutter/material.dart'; void main ()=> runApp (MyApp ()); class MyApp extends StatelessWidget { textController final=new TextEditingController (); final globalKey=GlobalKey (); final String fileName='textPadNote.txt'; Futuro _exportToFile (contexto BuildContext) async { Arquivo final arquivo=Arquivo ('$ {Directory.current.absolute.path}/$ {fileName}'); snackBar final=SnackBar (conteúdo: Texto ('Salvo em: $ {file.path}')); esperar file.writeAsString (textController.text); globalKey.currentState.showSnackBar (snackBar); } @sobrepor Construção de widget (contexto BuildContext) { return MaterialApp ( título:'TextPad', tema: ThemeData ( brilho: Brightness.dark, ), casa: Scaffold ( chave: globalKey, appBar: AppBar ( título: Texto ('TextPad'), ações: [ IconButton ( ícone: ícone const (Icons.save), dica:'Exportar para $ {fileName}', onPressed: () {_exportToFile (contexto);} )] ), corpo: Centro ( filho: TextField ( controlador: textController, maxLines: null, keyboardType: TextInputType.multiline, expande: verdadeiro, decoração: InputDecoration ( hintText:'Brinque com suas notas aqui...', contentPadding: EdgeInsets.all (12.0) ), ), ), ), ); }
}
Veja este projeto no Github aqui.
Construindo seu aplicativo de desktop Flutter com binários portáteis
Antes de lançar seu aplicativo na Internet, você pode construir aplicativos Flutter para obter binários portáteis. Esses binários também podem ser compartilhados com usuários ou testadores. Além disso, você pode criar binários instaláveis com suas ferramentas de instalação favoritas.
Quando estivermos depurando o aplicativo, binários depuráveis serão criados. No entanto, binários depuráveis não são otimizados para uma versão. Execute o seguinte comando no terminal para fazer binários otimizados:
$ flutter build// =linux, windows, macos
Como lançar seu aplicativo
Existem diferentes maneiras de lançar seus aplicativos Flutter, mas o método de implantação depende do tipo de sistema operacional. Por exemplo, se você pretende lançar seu aplicativo para usuários do Linux, pode implantar seu aplicativo Flutter na loja de software Snapcraft . Se precisar implantar seu aplicativo para usuários do Windows, você pode criar um pacote do Windows Installer (MSI) ou um novo pacote de aplicativos do Windows (MSIX) com a ajuda de uma ferramenta de terceiros.
No entanto, a equipe do Flutter ainda não recomenda o lançamento de aplicativos Flutter para uso em produção porque a estrutura do Flutter Desktop ainda não é estável. Em breve, podemos esperar mais suporte para a implantação de pacotes de aplicativos da equipe do Flutter.
Conclusão
Hoje em dia, Electron é muito popular para o desenvolvimento de aplicativos de desktop porque permite que os desenvolvedores criem aplicativos de desktop com tecnologias da web. No entanto, os aplicativos do Electron geralmente se tornam bloatware devido ao alto uso de recursos físicos. O Flutter tem um desempenho melhor do que o Electron porque não executa a lógica GUI do aplicativo em um navegador da web.
O Flutter tem alguns pontos fracos para os desenvolvedores. Ele vem com uma linguagem de programação desconhecida e um novo kit de ferramentas de widgets. Ainda assim, os binários de lançamento para plataformas de desktop não são leves.
O estágio inicial do Flutter impressionou a todos com desempenho e recursos impressionantes em geral. Acredito que o Flutter desktop irá competir com o Electron em breve!
A postagem Como criar aplicativos de desktop com Flutter apareceu primeiro no LogRocket Blog .
