Inicialização em Flutter

Flutter é uma coleção de métodos fornecidos pelo Google, os quais utilizam a linguagem de programação Dart, com o propósito de desenvolver interfaces de usuário. As aplicações desenvolvidas com Flutter são compiladas de forma dinâmica, possibilitando a execução em dispositivos móveis, web e desktop. O grande benefício dessa abordagem é que é possível escrever o código apenas uma vez e utilizá-lo em mais de quatro plataformas distintas.

Neste artigo, abordaremos os aspectos importantes deste conjunto de ferramentas de desenvolvimento, abrangendo seu histórico e suas principais características. Nosso objetivo é fornecer informações claras sobre a origem do Flutter e suas vantagens e desvantagens no campo da programação.

Em 2014, o projeto do Flutter começou sob o codinome "Sky", com o objetivo de encontrar uma abordagem mais eficiente para construir interfaces móveis. Em 2015, durante a Dart Developer Summit, o código Dart do Flutter foi demonstrado sendo executado em um dispositivo Android. Nesse momento, o projeto passou a ser chamado de Flutter. No ano seguinte, em 2016, durante o mesmo evento, o Flutter foi descrito como "Uma melhor maneira de desenvolvimento mobile".

O Flutter teve sua estreia marcante no evento Google IO 2017, onde, em uma sessão de "live coding", um aplicativo foi desenvolvido em tempo real, com recursos como acesso à câmera e integração com o Firebase. No Google IO 2018, o kit de desenvolvimento ganhou ainda mais destaque, superando as expectativas. Três palestras excepcionais foram realizadas, abordando tópicos como gerenciamento de estado, uso do Material Design e novamente uma sessão de "live coding" de um aplicativo com integração ao Firebase.

Em dezembro de 2018, o Flutter lançou sua versão 1.0, sendo um dos principais destaques o projeto Hummingbird, que mais tarde se tornou o Flutter para Web. A configuração da versão 1.0 do Flutter foi realizada em um aplicativo nativo para MacOS, evidenciando o foco em oferecer uma experiência de desenvolvimento consistente e eficiente em várias plataformas.

⦁ O Flutter permite criar aplicativos com uma apresentação visual de alta qualidade. Com este framework, os desenvolvedores têm a liberdade de personalizar cada pixel da tela. No iOS, é possível usar os widgets da biblioteca Cupertino, enquanto no Android, há disponibilidade de diversos widgets do Material Design do Google.

⦁ O Flutter é conhecido por sua agilidade. Ele utiliza o mecanismo Skia 2D, que é focado na velocidade de hardware. O Skia é mantido pelo Google, mas também é open source e pode ser utilizado por outros softwares, como o Firefox e o Firefox OS. A estrutura do Flutter foi projetada para garantir a rápida renderização gráfica no dispositivo, proporcionando uma experiência fluida. Os aplicativos desenvolvidos com o Flutter são escritos na linguagem Dart e podem ser compilados para Android ou iOS, suportando processadores ARM de 32 ou 64 bits, o que contribui para a agilidade do Flutter.

⦁ O Flutter oferece benefícios notáveis. Ele permite que os aplicativos sejam executados em um smartphone ou emulador enquanto o desenvolvedor está programando. O recurso de "stateful hot reload" possibilita a atualização automática e rápida do aplicativo no dispositivo quando o desenvolvedor salva um arquivo no projeto. Isso torna o processo de desenvolvimento mais eficiente e produtivo.

⦁ O Flutter é uma plataforma aberta. Como mencionado anteriormente, o Flutter é open source e possui uma licença BSD-style. Isso significa que ele recebe contribuições de desenvolvedores de todo o mundo, promovendo uma comunidade ativa e colaborativa.

Embora seja possível desenvolver aplicativos com Flutter usando qualquer editor de texto combinado com ferramentas de linha de comando, é altamente recomendado utilizar os seguintes plug-ins de editor para obter uma experiência ainda melhor:

1. IntelliJ: É uma poderosa IDE (Integrated Development Environment) desenvolvida pela JetBrains. Ela oferece recursos avançados, como IntelliSense, destaque de sintaxe, assistência de edição de widget, suporte para execução e depuração, entre outros. O IntelliJ é uma opção popular para desenvolvimento de aplicativos Flutter.

2. Android Studio: É uma IDE baseada no IntelliJ, projetada especificamente para desenvolvimento Android. Ele inclui suporte nativo ao Flutter e fornece recursos semelhantes aos do IntelliJ, tornando-o uma excelente opção para desenvolvimento de aplicativos Flutter para dispositivos Android.

3. VS Code (Visual Studio Code): É um editor de código-fonte leve e altamente extensível desenvolvido pela Microsoft. O VS Code possui um conjunto robusto de extensões para desenvolvimento Flutter, que oferecem recursos como IntelliSense, destaque de sintaxe, suporte para execução e depuração, entre outros. O VS Code é uma escolha popular entre os desenvolvedores para criar aplicativos Flutter.

Ambos, Android Studio e VS Code, são amplamente utilizados e oferecem uma experiência de desenvolvimento eficiente para aplicativos móveis com Flutter. A escolha entre eles depende das preferências pessoais do desenvolvedor e do ambiente de desenvolvimento desejado.

O Android Studio é baseado no software IntelliJ IDEA, desenvolvido pela JetBrains, e foi projetado especificamente para o desenvolvimento de aplicativos Android. Ele está disponível para download em sistemas operacionais Windows, Mac OS X e Linux.

O Android Studio substituiu o Eclipse Android Development Tools (ADT) como a IDE principal do Google para o desenvolvimento nativo de aplicativos Android. Ele oferece suporte a várias linguagens de programação, incluindo Java, Kotlin e C++. Isso permite que os desenvolvedores escolham a linguagem de programação que preferem para criar aplicativos Android, oferecendo flexibilidade e opções.

O Android Studio possui recursos avançados, como ferramentas de design de interface de usuário, depuração, testes, perfis de desempenho e integração com o SDK do Android. Ele também é regularmente atualizado para fornecer suporte às últimas tecnologias e recursos do Android, garantindo que os desenvolvedores possam aproveitar ao máximo as capacidades da plataforma Android.

Inspeções com Lint:

Ao compilar um programa, o Android Studio realiza automaticamente inspeções configuradas de lint e outras inspeções do ambiente de desenvolvimento integrado. Essas inspeções visam identificar e corrigir problemas relacionados à qualidade estrutural do código. A ferramenta de lint analisa os arquivos de origem do projeto Android em busca de possíveis bugs e oportunidades de otimização, levando em consideração critérios como precisão, segurança, desempenho, usabilidade, acessibilidade e internacionalização. Essas verificações são essenciais para garantir a qualidade do código e aderir às melhores práticas de desenvolvimento.

Emulador:

Um emulador veloz com uma ampla gama de recursos e um ambiente integrado que viabiliza o desenvolvimento para todos os dispositivos Android;

Preenchimento Automático de Código:

O Android Studio tem três tipos de preenchimento automático de código, que podem ser acessados usando atalhos de teclado.

O Visual Studio Code é um editor de código-fonte leve, porém poderoso, que pode ser instalado em sua área de trabalho e está disponível para Windows, macOS e Linux. Ele oferece suporte integrado para JavaScript, TypeScript e Node.js, e possui um ecossistema extenso de extensões para diversas outras linguagens, como C++, C#, Java, Python, PHP, Go e Flutter. Além disso, o Visual Studio Code também suporta diferentes tempos de execução, como .NET e Unity, ampliando sua capacidade de desenvolvimento para diversas plataformas e tecnologias.

IntelliSense:

O VS Code possui uma ferramenta chamada IntelliSense que permite ao usuário aprender mais sobre o código que está usando, a manter o acompanhamento dos parâmetros que está digitando e a adicionar chamadas a métodos e propriedades pressionando apenas algumas teclas.

Debugging:

O Visual Studio Code se destaca pelo seu excelente suporte à depuração, sendo um dos principais recursos da ferramenta. O depurador integrado do VS Code auxilia no aprimoramento do ciclo de edição, compilação e depuração do código, proporcionando um fluxo de trabalho mais ágil e eficiente. Com essa funcionalidade, os desenvolvedores podem identificar e corrigir erros de forma mais rápida e efetiva, aumentando a produtividade no processo de desenvolvimento de software.

Comandos Git integrados:

Trabalhar com Git e outros provedores de SCM nunca foi tão fácil. Com o VS Code podemos revisar diffs, prepare arquivos e faça commits direto do editor.

Extensível e personalizável:

Quer ainda mais recursos? Instale extensões para adicionar novos idiomas, temas, depuradores e para se conectar a serviços adicionais. As extensões são executadas em processos separados, garantindo que não deixem seu editor lento

O Android Studio e o Visual Studio Code são duas ferramentas populares para desenvolvimento de software, mas possuem algumas diferenças significativas:

Propósito: O Android Studio é uma IDE (Integrated Development Environment) específica para o desenvolvimento de aplicativos Android, enquanto o Visual Studio Code é um editor de código genérico que pode ser usado para desenvolver aplicativos em várias linguagens e plataformas, incluindo o Android.

Foco no Android: O Android Studio é projetado especialmente para facilitar o desenvolvimento de aplicativos Android, fornecendo recursos específicos para essa plataforma, como emuladores, ferramentas de criação de interface de usuário e integração com o SDK do Android. Já o Visual Studio Code é uma ferramenta mais geral, mas com suporte para desenvolvimento Android por meio de extensões e plugins.

Complexidade: O Android Studio é uma ferramenta mais complexa e robusta, com uma variedade de recursos e opções específicas para o desenvolvimento Android. Por outro lado, o Visual Studio Code é mais leve e simples em comparação, sendo altamente personalizável por meio de extensões.

Ambiente de desenvolvimento: Enquanto o Android Studio fornece um ambiente completo de desenvolvimento integrado para o desenvolvimento Android, o Visual Studio Code é um editor de código mais minimalista, com foco em produtividade e extensibilidade, permitindo que os desenvolvedores personalizem a experiência de acordo com suas necessidades.

Linguagens de programação: O Android Studio é projetado principalmente para o desenvolvimento em Java e Kotlin, as principais linguagens usadas no desenvolvimento Android. Por outro lado, o Visual Studio Code oferece suporte a uma ampla gama de linguagens de programação, incluindo Java, Kotlin e muitas outras, permitindo o desenvolvimento multiplataforma.

Em resumo, o Android Studio é uma opção mais especializada e abrangente para o desenvolvimento Android, enquanto o Visual Studio Code é uma escolha mais flexível e extensível, adequada para desenvolvimento em várias linguagens e plataformas, incluindo o Android. A escolha entre eles depende das necessidades e preferências específicas do desenvolvedor.

Para encontrar os links de instalação e visualizar os requisitos do Flutter, acesse “flutter.dev” e clique em “Get Started”.

Selecione o Sistema Operacional desejado.

Para o funcionamento do Flutter, é necessário ter dois softwares: PowerShell e Git. O PowerShell não é necessário para instalação em máquinas com Windows 10. Para instalar o Git, clique em “Git for Windows” em azul.

Ao entrar no site de downloads do Git, vá em “Click here to download manually” e aguarde o download terminar.

Ao finalizar o download, execute o arquivo em seu local baixado

Para as próximas telas é recomendado clicar apenas em “Next >” a menos que o usuário visualize algo que deseje alterar.

Nesta tela, clique em “Install”

Aguarde o processo de instalação finalizar.

Está finalizada a instalação do Git. Vá em “Next >” para fechar a tela de instalação.

Retornando a página de requisitos de instalação do Flutter, clique em “flutter_windows_1.20.4-stable.zip” e aguarde o download terminar.

Após finalizar o download, extraia o arquivo em algum local desejado.

Entre no site “https://developer.android.com/studio” e clique no botão “Download Android Studio”.

Após aparecer a tela a seguir, selecione “Li e aceito os Termos e Condições acima” e, depois, clique em “fazer o download de Android Studio para Windows”.

Salve o arquivo no lugar de sua preferência e espere o download terminar. Após finalizado, dê um duplo clique no arquivo .exe.

Clique em “Next >”.

Deixe ambas as opções selecionadas e clique em “Next >”.

Clique em “Install”.

Download finalizado, clique em “Next >” e depois na opção “Finish” para iniciar o Android Studio.

Aparecendo essa tela, clique em “Next >” e depois escolha o tipo de setup de sua preferência e clique em “Next >”. Após isso, escolha o tema de sua preferência e clique em “Next >” novamente.

Nessa página, clique em “Finish” e aguarde o download completo.

Aguarde aparecer a tela abaixo e, assim, o download foi finalizado.

Vá em “Configure” e clique em “Plugins”.

Pesquise por “Dart” e clique em “Install”. Espere finalizar.

Depois, pesquise por “Flutter” e clique em “Install”. Espere finalizar

Após ambas instaladas, clique no botão “Restart IDE” da extensão Flutter. O aplicativo irá iniciar e deparar-se nessa página:

Clique em “Start a new Flutter project”. Nomeie a aplicação e depois clique em “Next >” até abrir a página home do projeto.

Essa é a página home do projeto. Instalado!

Vá em Tools e em AVD Manager. Clique em “Create Virtual Device”. Escolha um modelo de ‘Phone” e baixe uma “system image”.

Após isso, o emulador aparecerá aberto!

1. No canto esquerdo superior da página inicial, clique em File -> New Flutter Project e ao abrir, escreva o código abaixo:

2. O resultado do código aparecerá no emulador ao lado:

Escolhemos, então, uma aplicação para calcular a área de um triângulo, cuja base e altura deverão ser digitadas pelo usuário. Leia o passo-a-passo abaixo:

Esse bloco é responsável para importar as classe que vamos criar futuramente e importar outros packages necessários para o design do app, como o materal.dart.

import 'package:area_triangulo/BLLcalculoA.dart' ;

import 'package:flutter/material.dart';

import 'calculoA.dart';

import 'erro.dart';

Esse bloco é criado automaticamente quando criamos um projeto do flutter, necessário para rodar o app.

Temos, primeiramente, a declaração das variáveis assim como controleB e controleH que servem para resgatar valores dos TextField para adquirir os valores da base e altura.

Algumas considerações sobre o código da aplicação:

● os itens de layout como textbox, label e button, são criados e instanciados no código em questão;

● a cor vinho indica os itens de layout;

● a cor verde musgo indica a explicação dos itens e sua necessidade.

No print de tela acima, temos o código do layout geral da página única de nossa aplicação, onde consta seu título title e seu tema theme, no qual este último está inserido a escolha de cor Colors do detalhe do layout, que, neste caso, é azul blue.

Essa é uma classe para retornar uma mensagem quando erro for verdadeiro, pode se ver a demonstração e aplicação na função calculoA.

Essa classe é responsável para receber os valores da altura e base e efetuar o cálculo da área e retorná-la. Podemos ver sua aplicação na função calculoA, onde essa classe é chamada.

Essa é uma camada para verificação dos dados, para ver se o usuário digitou um número do tipo double.

Após finalizarmos tudo isso, a nossa aplicação mobile rodará no emulador desta forma aqui apresentada:

1. O primeiro passo a se realizar para uma aplicação com Google Maps é acessar a plataforma da Google Cloud através do endereço console.cloud.google.com e fazer o login com a sua conta da Google.

2. Ao se conectar, informe seu país, concorde com os termos de uso e clique em concordar e continuar.

3. Ao adentrar a página principal do Google Cloud, o usuário será informado de que os serviços oferecidos são pagos. Porém, é disponibilizado um vale de U$300 (trezentos dólares) durante o período de 90 dias.

4. Após o preenchimento de dados pessoais é necessário inserir os dados de um cartão de débito ou crédito. Mas fique tranquilo, eles explicam que nenhuma cobrança automática será feita após o término do período de teste gratuito e solicitem seu cartão de crédito para ter certeza de que você não é um robô. Você não será cobrado, a menos que atualize manualmente para uma conta paga.

5. Para criar o projeto devemos clicar em representado na imagem abaixo, posteriormente em “novo projeto” e por último preencher as informações requeridas

6. Após a criação e seleção do projeto vá em APIs e serviços > Bibliotecas

7. Agora devemos habilitar os mapas, como estamos criando uma aplicação para android, vamos habilitar a biblioteca para android em “Maps SDK para Android”.

8. Outro recurso necessário é o “Geolocation API”. Devemos pesquisá-lo da mesma forma que o anterior e ativá-lo.

1. Após a instalação das API’s devemos abrir uma aplicação e o emulador e ir até o aplicativo pubspac.yaml

2. Nas dependências digitamos o código abaixo:

Obs: tome cuidado com a identação, não deixe de alinhar o “google_maps_flutter” da forma descrita na imagem.

3.Agora iremos adicionar algumas configurações de mapa para o Android. Para isso iremos em Android > App > Src > Main e a abrir o arquivo AndroidManifest.xml.

4. Em AndroidManifest.xml. antes de Activity vamos adicionar o seguinte meta:

Note que em “Value” devemos adicionar a chave de nossa API.

5. Para obter uma chave devemos voltar ao Google Cloud e seguir por API’s e Serviços> Credenciais.

5.1. E posteriormente em Criar Credenciais > Chave de API

5.2. Copie a chave de API gerada

5.3. E cole no local descrito.

6. Agora que configuramos vamos criar um novo arquivo em lib denominado google.Maps.dar que será nossa página de mapas. E nele adicionaremos um StatefulWidget.

6.1. Primeiramente fizemos um import do pacote do google maps

7. Para que seja trabalhado um mapa, onde consigamos dar zoom e trocar localizações, adicionamos um controller “mapcontroller”.

7.1.criamos um marcador e as variáveis longitude e latitude utilizadas no mapa

● instanciamento do marcador:

● informações fixas de exibição do marcador para as determinadas coordenadas:

7.2. Após a criação de um marcador e do controle fazemos a ligação do controle com o mapa na linha a seguir:

8. Após isso, no body instanciamos o GoogleMap:

9. Para que seja feito um teste atribuímos valores fixos a longitude e latitude, lembrando que foi criado uma caixa de texto onde o usuário digitaria o seu local de pesquisa assim o “text field” (a caixa de texto) atribuiria os respectivos valores daquele local pesquisando as latitudes e longitudes no google, porém fora atribuído valores as essas variáveis para a simplificação.

● atribuição/instanciamento de valores

● simplificação no text field com valores fixos

9.1.Para que a câmera fosse deslocada para as coordenadas dadas, criamos um position (posição) e encaminhamos a mesma para a nova posição com o “mapcontroller.moveCamera”:

10. Para que toda vez que o usuário toque na tela ou movimente a câmera recebessemos os dados, utilizamos os seguintes dados:

● toque na tela

● movimentação da câmera

Agora vamos iniciar a nossa terceira aplicação de Flutter e nela iremos abordar uma lista de contatos de um dispositivo mobile. O objetivo desse app é gerar uma lista de contatos no celular por meio de POO e, após isso, criar um mecanismo de pesquisa para localizar algum contato dessa lista. Vamos para o passo a passo:

Coloque a linha de código abaixo no arquivo pubspec.yaml, de preferência abaixo da linha “cupertino_icons”, como indicado no print screen abaixo:

2.1. Criando o File .dart:

Na biblioteca ‘lib’, clique com o botão direito do mouse. Vá em ‘New’ e em ‘Dart file’. Depois nomeie o arquivo com o mesmo nome da classe que será utilizada.

2.2. Criando a classe “Contatos”:

Crie a classe utilizando o termo “final”, indicando o nome da variável que acomodam todos os contatos da lista, bem como seus nomes. Deste modo abaixo:

Para importar a classe Contatos no arquivo principal, digite a linha abaixo no arquivo “main.dart”:

Primeiramente, instanciamos a variável responsável por armazenar todos os contatos do dispositivo, desta forma:

Após isso, é necessário inserir todos os dados no armazenamento da variável. Para isso, a conectamos com a classe Contatos que fora criada, a partir do método initState e o atributo addAll:

O Scaffold é o lugar onde iremos setar e configurar todo o layout (design, parte visual) da nossa lista de contatos. É claro: grande parte desses atributos são opcionais! Porém, quanto melhor visualmente, melhor o resultado gerado! Vamos lá:

5.1. APP BAR

É a barra da lista de contatos que se encontra no topo da página inicial. Ela que nos dá o título da aba da lista:

5.2. CONTAINER

É a barra de pesquisa, onde iremos utilizar para pesquisar os contatos da lista:

Veja abaixo como foram configuradas o layout de exemplo:

5.3. PADDING

São os contatos, os itens contidos na nossa lista. Foram configurados com o icon de usuário ao lado esquerdo, simulando uma lista de contatos comum dos dispositivos:

5.4.CIRCLE AVATAR

É o ícone da lista de contatos, que simboliza um conjunto de pessoas.

Veja a codificação dos atributos e características da lista nos print screens abaixo:

Agora, vamos para a parte não menos importante do projeto: a função de pesquisar os contatos! Iremos utilizar uma estrutura if: else: para chegar se a barra de pesquisa se encontra não vazia para, aí sim, o processo de pesquisa ser realizado.

A lógica usada é a seguinte: será pesquisado para cada elemento da lista o conteúdo digitado na barra de pesquisa, e apenas retornará se tiver o contato digitado.

Se por acaso não houver contato correspondente ao conteúdo digitado, o curso se direciona para o else que retornará uma lista vazia como forma de avisar que nada fora encontrado.

7.1.PÁGINA INICIAL

Após todo o processo de codificação, você pode se conectar a um device para emular a aplicação. Abaixo você vê a tela esperada ao rodar:

7.2.PESQUISAR CONTATO

Na barra de pesquisa que foi feita, você pode testar a aplicação enquanto ela roda, digitando os nomes dos contatos e verificando se eles existem na lista cadastrada ou não, desta forma abaixo:

A seguir, você pode observar mais dos códigos utilizados na página inicial geral da aplicação da lista de contatos:

Ao desenvolver a aplicação 4 do projeto em um todo, o grupo elaborou um CRUD que nos permite salvar, deletar, consultar e alterar dados em um banco de dados. Os dados manipulados trata-se da tabela de livros usada ao longo do curso, e o serviço utilizado foi o Firebase da Google, onde abaixo será mostrada sua performance passo a passo.

CRUD para salvar, deletar, consultar e alterar dados em um banco de dados, referente a tabela de livros usada ao longo do curso:

1.1. Acessar o Firebase da Google e clicar na opção de criar um projeto.

1.2. Desativar o Google Analytics, que é um sistema gratuito de monitoramento de tráfego.

1.3. Clicar no ícone Android, que se encontra ao lado do IOS, dentre as opções.

1.4. Para preencher o primeiro text, devemos seguir o 5º passo.

1.5. No projeto, ir em android>app>src>build.gradle

1.6. Copiar o que estiver entre aspas, na applicationId

1.7. Colar no primeiro text o que estive na applicationId, e depois é necessário dar um apelido ao app, no caso, escolheu-se “App 04”. Não se precisa preencher o último espaço.

1.8. Após registrar o aplicativo, deve-se fazer o download do googleservices.json, que um auxiliar de início rápido para integrar rapidamente os serviços do Google ao seu aplicativo.

1.9. Arrastar o arquivo dentro do projeto, em android>app>src

1.10. Copiar a classpath

1.11. Se direcionar ao android>build.gradle novamente

1.12. Colar a linha do 10º passo na área dependencies

1.13. Copie o apply plugin.

1.14. Cole o apply em android>app>src>build.gradle

1.15. Siga clicando em "Próximas".

1.16. Clicar em "Continuar no Console"

1.17. Após isso, clique em "Cloud Firestore"

1.18. Clique em "Criar banco de dados".

1.19. Clique em "Avançar"

1.20. Clique em "Ativar"

1.21. Clique em "Regras", mais acima na tela.

1.22. Na linha allow "read, write: if false;", mudar para "true;".

1.23. No site "pub.dev", procure por "Cloud Firestore", clique na primeira opção e vá para Installing, e em seguida copie a linha "cloud_firestore: ^0.16.0"

1.24. No projeto, vá em test>pubspec.yaml.

1.25. Cole em "dependencies:"

Imagem Classe “database_services”: Classe referente ao banco de dados, efetivamente.

Imagem Classe “livro: Classe que define se o livro foi lido ou não.

Imagens da Classe “Livros”: Classe de comandos do CRUD.

Imagem Classe “loading”: Classe que define que os dados estão chegando à tela, utilizada em main.

Imagem Classe “main”: Utiliza das classes criadas para o funcionamento do aplicativo.