Desenvolvendo Primeiro Aplicativo em Flutter

Agora que conhecemos um pouco do Flutter e ele já está devidamente instalado em nosso computador, podemos partir para o desenvolvimento do nosso primeiro aplicativo.

Como será a nossa primeira experiência na implementação de um app com esse framework, resolvi fazer algo simples. O aplicativo irá apenas exibir a mensagem “Olá Mundo” no centro da tela do dispositivo.

Sem mais bla bla bla…. Vamos começar!

1- Criar o Projeto no Android Studio

O primeiro passo é criar o projeto Flutter no Android Studio. Para isso, clique em “Start a new Flutter project”.

Em seguida, selecione a opção “Flutter Application”.

Na tela abaixo, defina o nome do seu projeto, o local onde ele será armazenado e escreva uma breve descrição sobre ele. O caminho para os fontes do Flutter já estará preenchido automaticamente, mas, caso o campo esteja vazio, digite o endereço da pasta manualmente.

Crie um nome de pacote para o app, lembrando que esse nome não poderá ser mudado após a publicação (Caso você publique o app na loja de aplicativos kkkk ).

Com o projeto criado, podemos seguir para a codificação.

2- Codificação

Primeiramente, é preciso encontrar o arquivo “main.dart” na estrutura do projeto. É nesse arquivo que o código-fonte do projeto será inserido.

Ao abrir o arquivo “main.dart”, é possível notar a presença de um código gerado automaticamente pelo Flutter. Esse código deve ser substituído pelo exibido abaixo:

No código acima podemos perceber, na linha 1, o import do pacote material.dart. Essa importação é necessária, pois o app de exemplo fará uso do padrão de design Material Design.

Na linha 3 do código, é possível ver a presença do método main, o qual será responsável pode dar início a execução da nossa aplicação. Esse método faz uso da notação (=>) que serve para definir funções ou métodos em uma linha (one-line functions).

Na linha 5 foi definida a classe MyApp que estende a classe StatelessWidget. Esse widget será a raiz da aplicação. Lembrando que no post onde o Flutter foi apresentado, os widgets do tipo stateless e stateful foram descritos.

Por fim, dentro do método build do widget MyApp é retornado o widget MaterialApp. Esse widget serve como base para a implementação de aplicações que fazem uso do Material Design.

Apesar desse código parecer completo ainda faltam alguns modificações importantes antes do app ficar pronto. A primeira mudança que se faz necessária é a definição do parâmetro title e do home no widget MaterialApp. No title deve ser atribuído o nome do app, o qual será exibido quando o app for minimizado, por exemplo. Por sua vez, no home fica o widget que será executado assim que a tela for carregada. O código abaixo mostra o código completo após essas alterações:

No código acima, no home, foi adicionado o widget Scaffold. Através desse widget é possível inserir uma AppBar ao app, por exemplo. Além disso, no corpo do Scaffold são posicionados os widgets que ficam abaixo do AppBar por meio do parâmetro body. Contido no body está o widget Center, o qual centraliza, tanto verticalmente quanto horizontalmente, o texto inserido através do widget Text.

O resultado da execução do código pode ser visto na imagem abaixo:

Bom, é isso.

Espero que esse post tenha servido para você ter uma primeira impressão sobre como é uma implementação de app fazendo uso do Flutter.

O código do projeto desenvolvido neste post pode ser visto no seguinte link: https://github.com/luizmarcus/Flutter/tree/master/ola_mundo

Qualquer dúvida, deixa um comentário.