Como configurar o Flutter e criar um aplicativo da Hello World Web no Linux

Flutter é uma estrutura de desenvolvimento de aplicativos que pode ser usada para desenvolver aplicativos de plataforma cruzada em execução em código nativo, uma vez compilados ou construídos. Sendo desenvolvido pelo Google, o Flutter permite criar protótipos rápidos em pouco tempo e permite criar aplicativos completos que usam APIs específicas da plataforma. Usando o Flutter, você pode criar aplicativos bonitos para dispositivos móveis, sistemas operacionais de desktop e navegadores da web usando widgets oficiais de design de materiais. Este artigo discutirá a instalação da vibração e a criação de um novo projeto para o desenvolvimento de um aplicativo da Web. Flutter usa "Dart" como a principal linguagem de programação para escrever aplicativos.

Instale o Flutter no Linux

Você pode instalar o fleta no Linux usando dois métodos. O primeiro método é bem direto, tudo o que você precisa fazer é executar um comando simples para instalar o Flutter da Snap Store.

$ sudo snap install flutter -clássico

O segundo método envolve o download do repositório de fletações do GitHub. Execute os seguintes comandos em sucessão para instalar manualmente o Flutter:

$ sudo apt install git
$ git clone https: // github.com/vibração/vibração.git -b estável-profundidade 1-não-single ramo

Observe que a execução do comando acima obterá os arquivos necessários do repositório oficial da Flutter, incluindo arquivos binários executáveis. Você poderá executar esses arquivos binários da pasta "Bin". No entanto, esses arquivos executáveis ​​não serão adicionados à sua variável de caminho amplo do sistema e você não poderá executá -los de qualquer lugar, a menos que você os adicione manualmente à variável do caminho. Para fazer isso, siga as etapas abaixo.

Abrir ".Arquivo Bashrc ”localizado em sua pasta doméstico usando seu editor de texto favorito:

$ nano “$ home/.Bashrc

Adicione a seguinte linha na parte inferior do arquivo, substituindo cuidadosamente a string.

Caminho de exportação = "$ PATH:/flutter/bin "

Por exemplo, se você baixou o Flutter Repository na pasta "Downloads", precisará adicionar a seguinte linha:

Caminho de exportação = "$ PATH: $ Home/Downloads/Flutter/Bin"

Salve o arquivo depois de terminar. Atualizar “.Arquivo Bashrc ”executando o comando abaixo:

$ fonte “$ home/.Bashrc

Para verificar se a pasta "Bin" do Flutter foi adicionada ao caminho, execute o comando abaixo:

$ ECHO $ ​​PATH

Você deve obter alguma saída como esta:

/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/ NIT/Downloads/Flutter/Bin

Observe a presença da palavra -chave "vibrar" e o caminho completo que mostra a pasta "bin" no diretório "flutter".

Para verificar se o comando "Flutter" pode ser executado a partir de qualquer caminho, use o comando abaixo:

$ que vibra

Você deve obter alguma saída como esta:

/home/nit/downloads/flutter/bin/flutter

Observe que o idioma “Dart”, que é necessário para escrever aplicativos de flutter, vem com arquivos fletais baixados do Git Repository ou do pacote Snap. Execute o seguinte comando para verificar as dependências ausentes necessárias para executar o Flutter:

$ Flutter médico

Alguns arquivos necessários podem começar a baixar para concluir a configuração do Flutter. Se você ainda não instalou o Android SDK, uma mensagem será mostrada na saída para guiá -lo através da instalação.

Se você deseja desenvolver aplicativos Android usando o Flutter, clique nos links visíveis na saída do terminal e siga as etapas relevantes para instalar o Android SDK.

Este tutorial se concentra na criação de aplicativos da Web usando o Flutter. Para ativar o suporte para a criação de aplicativos da Web, execute os seguintes comandos em sucessão:

$ flutter canal beta
$ Flutter Upgrade
$ flutter config --enable-web

Para verificar se o suporte ao aplicativo da web foi realmente ativado, execute o comando abaixo:

$ FLUTTER DISPOSITIVOS

Você deve obter alguma saída como esta:

2 dispositivos conectados:
Servidor da Web (Web) • Servidor da Web • Web-Javascript • Ferramentas Flutter
Chrome (Web) • Chrome • Web-Javascript • Google Chrome 87.0.4280.66

Se você seguiu as etapas corretamente até agora, o Flutter deve agora estar instalado corretamente em seu sistema, pronto para criar alguns aplicativos da Web.

Crie um novo projeto de flutter

Para criar um novo projeto de aplicativo da web "Helloworld" usando o Flutter, execute os comandos mencionados abaixo:

$ flutter crie helloworld
$ CD Helloworld

Para testar seu projeto recém -criado, Run Command:

$ flutter run -d Chrome

Você deve ver uma demonstração de aplicativos da Web Flutter como esta:

Você pode depurar aplicativos da Web Flutter usando ferramentas de desenvolvimento incorporadas ao Chrome.

Modifique seu projeto

O projeto de demonstração que você criou acima contém um “principal.Arquivo Dart ”localizado na pasta“ lib ”. Código contido neste “principal.o arquivo Dart ”é comentado muito bem e pode ser entendido com muita facilidade. Eu sugiro que você passe pelo código pelo menos uma vez para entender a estrutura básica de um aplicativo de flutter.

A Flutter suporta "Recaro quente", permitindo que você atualize rapidamente seu aplicativo sem relançá -lo para ver as mudanças. Tente alterar o título do aplicativo de "Flutter Demo Home Page" para "Hello World !!"No" Principal.Arquivo Dart ”. Uma vez feito, pressione a tecla no terminal para atualizar o estado do aplicativo sem relançar.

Construa seu aplicativo Flutter

Para construir seu aplicativo Web Flutter, use o comando especificado abaixo no diretório do seu projeto:

$ flutter Build web

Depois que o processo de construção terminar, você deve ter uma nova pasta no diretório do seu projeto localizado no caminho "Build/Web". Aqui você encontrará todo o necessário “.html ",".JS "e".Arquivos CSS ”necessários para servir o projeto online. Você também encontrará vários arquivos de ativo usados ​​no projeto.

Recursos úteis

Para saber mais sobre o desenvolvimento de aplicativos da web usando o Flutter, consulte sua documentação oficial. Você pode se referir à documentação oficial para o Dart Language para obter uma melhor compreensão dos aplicativos de flutter. O Flutter vem com toneladas de pacotes oficiais e de terceiros que você pode usar para desenvolver rapidamente aplicativos. Você pode encontrar esses pacotes disponíveis aqui. Você pode usar widgets de fletagem de design de material em seus aplicativos da web. Você pode encontrar documentação para esses widgets na documentação oficial da Flutter. Você também pode ter uma idéia desses widgets navegando demos de trabalho de componentes da web de design de materiais.

Conclusão

A Flutter está em desenvolvimento há um bom tempo e está crescendo como uma estrutura para o desenvolvimento de aplicativos de plataforma cruzada “Write uma vez implantada em qualquer lugar”. Sua adoção e popularidade podem não ser tão altas quanto outras estruturas, mas fornece uma API estável e robusta para desenvolver aplicativos de plataforma cruzada.