#Flutter : Construindo seu primeiro aplicativo #dart

Tempo de leitura: 6 minutos

Introdução

Nesse momento, nós instalamos e configuramos o Flutter e rodamos o aplicativo de amostra flutter em nossos dispositivos. Então, agora vamos construir nosso primeiro aplicativo Flutter do zero. O aplicativo que vamos construir é chamado “I Am Rich”.

Se você ainda não ouviu falar da história, basicamente nos primeiros dias da App Store, um cara chamado “Armin” lançou um aplicativo chamado “I Am Rich” com o preço máximo possível, que era de 999 dólares. O aplicativo basicamente não faz nada, exceto para mostrar uma imagem de rubi vermelho. Ele decidiu lançá-lo como “Art & Lifestyle” app que ele sugeriu que as pessoas muito ricas vão comprar para mostrar a outras pessoas como eles são ricos.

Mas, este é um aplicativo perfeito para começar a construir o nosso primeiro aplicativo de flutter, uma vez que irá ajudá-lo a aprender os conceitos básicos de um aplicativo Flutter. O IDE que eu usarei para este projeto é o VS Code. Então, vamos começar a codificar.

Criando o aplicativo

Então, primeiro, crie um novo aplicativo Flutter chamado “i_am_rich”. Agora, navegue até o diretório “i_am_rich” e abra-o no seu editor de código [se você estiver usando o Android Studio, ele será aberto automaticamente para você].
O ponto de partida de um aplicativo Flutter é o arquivo “main.dart” presente dentro da pasta “lib” no diretório do seu projeto. Primeiro, selecionamos o código inteiro presente no arquivo main.dart e o excluímos, porque estaremos escrevendo o código do zero.

Aplicação Mínima

A primeira coisa que faremos agora é desenvolver o aplicativo mínimo, ou seja, o código mínimo para poder executá-lo. Como usaremos o Material Design para o design de nosso aplicativo, a primeira coisa a fazer é importar um pacote contendo os Widgets de Material Design. Para a maioria dos aplicativos em que você projetará a interface do usuário (UI), é necessário importar este pacote.

Agora, vamos definir a função principal e dentro dela, temos que adicionar a função “runApp ()”, que irá executar a tela principal do aplicativo. Defina um widget chamado “MaterialApp”, que conterá a interface do usuário da tela principal do aplicativo.

No Flutter, todo componente da interface é chamado de Widget.

Depois de definir o widget “MaterialApp”, você receberá uma marca vermelha na pasta “test” dentro do diretório do projeto [logo abaixo da pasta “lib”] porque o widget da tela principal é definido como “MyApp” e não como “MaterialApp”. Então, clique com o botão direito do mouse e exclua a pasta “test”, pois não vamos definir nenhum teste para este projeto.

Ao escrever o código Flutter, sempre finalize cada instrução com uma vírgula (,) no final, pois há uma bela formatação presente em flutter chamada “Dart Formatter”, que tornará seu código mais legível e organizado.

1) No Android Studio, você pode usar essa função clicando com o botão direito do mouse em qualquer lugar dentro do editor de código e selecionando “Reformatar código por dartfmt”.
2) Em VS Code, você pode usar esta função usando um atalho de teclado “alt + shift + F“.

O widget “MaterialApp” pode ter muitas propriedades. Só usaremos a propriedade “home” para definir o “Andaime”, que basicamente cobrirá toda a tela principal do aplicativo. Se você quiser saber mais sobre o Scaffold, confira a documentação aqui.

Esse Scaffold contém várias propriedades úteis para tornar a interface do usuário do aplicativo mais bonita. O primeiro que usaremos será a propriedade “appBar” para definir o widget “AppBar”. Se você executar o aplicativo agora, verá uma barra de aplicativos vazia com fundo azul [que é a cor padrão] e corpo com fundo branco.

Agora, vamos preencher o aplicativo com um título e adicionar uma cor legal a ele. Dentro do widget AppBar, defina uma propriedade chamada “text”, que receberá um widget “Text” contendo uma string, ou seja, o título do aplicativo “I Am Rich”. No Dart, você pode usar aspas simples ou aspas duplas para definir uma string. Além disso, defina uma cor para o AppBar definindo a propriedade chamada “backgroundColor” contendo “Colors.blueGrey [900]”, você pode acessar diretamente qualquer cor de material no Flutter usando a classe “Colors”. Portanto, você não precisa mais digitar códigos de cores hexadecimais (como no Android App Development) para especificar qualquer cor de material no Flutter.

DICAS: Você pode ver que estamos usando várias propriedades presentes em cada widget, que variam de um widget para outro. Então, como você pode se lembrar de todas as propriedades e do que acontecerá se você esquecer uma delas? Você não precisa se lembrar de nenhuma propriedade de nenhum widget, basta usar o atalho de teclado “control + Space” para trazer a lista de propriedades disponíveis para esse widget em particular naquele ponto do tempo.

Finalmente, temos que adicionar a imagem de um diamante ao corpo do Scaffold. Primeiro de tudo, crie uma nova pasta no diretório do aplicativo chamada “imagens” e insira a imagem nesta pasta.

Para importar e usar a imagem em seu aplicativo, você precisa ir até o arquivo “pubspec.yaml” presente no diretório do aplicativo. Este é o gerenciador de pacotes do Flutter.

Aqui, você pode encontrar o nome do aplicativo e a descrição do seu aplicativo Flutter. Se você rolar para baixo um pouco, verá um “assets” comentado, que mostra uma amostra de como adicionar um caminho aos seus recursos no pubspec. Então, apenas remova o comentário e mude o caminho para onde você colocou sua imagem de diamante.

Você pode definir o caminho apenas como “- images /” ou “- images / diamond.png”. Mas é melhor usar o primeiro como se você tivesse que usar mais de uma imagem em seu aplicativo, então ele automaticamente importaria todas as imagens presentes em sua pasta “images”. Agora, pressione “Ctrl + S” para salvar o arquivo que irá executar automaticamente o comando “flutter packages get” para obter os pacotes. Certifique-se de que termina com “código de saída 0”, o que significa que a operação foi bem-sucedida.

É hora de adicionar a imagem na interface do usuário do aplicativo. Defina outra propriedade do Scaffold chamada “body” e dentro dela coloque um widget chamado “Image” tendo uma propriedade “image”, que leva um “AssetImage” como um widget contendo o caminho da imagem, ou seja, “images / diamond. png “.

Além disso, adicione cor ao Scaffold para torná-lo mais interessante.

Então, nosso aplicativo “I Am Rich” está pronto.
Se você precisar de informações detalhadas sobre um widget ou se quiser experimentar um novo widget, acesse o “Catálogo de widgets” clicando aqui. Este site contém todos os elementos do Flutter bem organizados para o seu conforto.

Conclusão

Mesmo sendo uma tecnologia recente, aprender Flutter é uma aposta que pode dar muito certo. Algumas grandes empresas notaram isso e estão migrando para Flutter, confira aqui.
Se você já desenvolve em React Native, aprender mais uma tecnologia irá te ajudar muito como profissional.

Gostou do conteúdo? não deixe de seguir a uebile nas redes sociais, pois toda semana tem post novo aqui no blog com mais dicas para o seu impulso digital.