Olá Flutterianos! Na aula passada nós preparamos o ambiente para começarmos a trabalhar. Hoje iremos criar o nosso primeiro aplicativo em Flutter! Alegremo-nos! Hip-Hip-Hurra! Vamos lá. Se você instalou corretamente os plugins falados na aula sobre instalação do Flutter e preparação do ambiente, abra o seu Android Studio e clique na opção "Start a new Flutter project".
Selecione a opção Flutter Application e clique em next. Coloque no Project name o nome "hello_flutter". Coloque o caminho do SDK: C:\src\flutter. A tela ficará como a seguir:
A seguir, deixe os valores padrão, pode dar next e finish. Com o seu celular conectado, tente rodar a aplicação de demonstração padrão. Clique na seta pra direita que fica no topo superior direito da IDE, chamada de Run 'main.dart' ou pressione Shift + F10. Se der algum problema relacionado a dependência do "lint-gradle-api-26.1.2.jar", sugiro que você leia o tópico "couldn't locate lint-gradle-api-26.1.2.jar for flutter project" no stackoverflow. Cheguei a ter problema com essa dependência e, por isso, segui o que estava dito no stackoverflow, ou seja, coloquei a informação do maven em cima de jcenter() no arquivo C:\src\flutter\packages\flutter_tools\gradle\flutter.gradle:
maven {
url 'https://dl.google.com/dl/android/maven2'
}
jcenter()
Se tudo der certo, você verá o hello world do Flutter rodando em seu celular. Clique no floating button (botão redondo com o + no centro) para ver o número do centro da tela sendo incrementado.
Agora vamos analisar o código para entendermos o que está acontecendo. A seguir vemos o código de Hello World gerado automaticamente pelo Flutter.
Você pode ver também a análise desse código no artigo "Destrinchando Flutter - Entendendo a estrutura e começando a programar" do Diego Dias no site FlutterBrasil. Vou fazer aqui a minha análise. Na linha 1 temos o código que importa os widgets do Flutter que foram desenhados no padrão Material Design, que é o padrão oficial que a Google usa e recomenda para o sistema Android, mas que também é utilizado na web. Na linha número 3 temos a função main(), que é a função de entrada no código. O seu código será iniciado por ela. Usa-se o runApp() para rodar o aplicativo. A linha 3 poderia ser reescrita de uma maneira mais tradicional, sem usar arrow function, da seguinte maneira:
void main() {
runApp(new MyApp());
}
Precisamos entender agora a diferença entre um StatelessWidget e StatefulWidget. A grosso modo um StatelessWidget não mantém um estado, logo é estático e imutável durante a execução do código, logo, não é executado durante o hot reload do Flutter. Já o StatefulWidget é um widget que mantém um estado, que pode ir sendo modificado durante a execução da aplicação. Utilizando o mesmo exemplo dado pelo Diego Dias em seu texto "Destrinchando Flutter - Entendendo a estrutura e começando a programar", podemos citar o caso de um carrinho de compras. É necessário manter os produtos que foram comprados a medida em que se faz compra, logo, seria um StatefulWidget, que manteria o estado atual da compra.
Na linha 5 foi criada uma classe chamada MyApp que se torna um StatelessWidget por meio da herança. MyApp é a raiz dos widgets da aplicação, pois foi a classe utilizada dentro de runApp(). Logo em seguida se sobrescreve o método build do StatelessWidget para podermos customizá-lo. É esse método que trata de modificar o app. No caso, ele irá retornar um MaterialApp, que é um Widget que segue o padrão do Material Design. Resumindo, o método build está dizendo o seguinte: crie um widget com o título 'Flutter Demo', que tenha um tema cuja cor primária seja azul e que tenha como widget inicial o MyHomePage.
Os parâmetros dos construtores que são explicitamente informados, como title, theme, primarySwatch, são parâmetros facultativos. Em Dart, parâmetros facultativos precisam ser explicitamente escritos no momento de chamar o método ou o construtor. Aqui também é um bom momento de testar o hot reload do Flutter. Troque o "Colors.blue" da linha 20 por outra, como "Colors.black" e rode usando o hot reload para você ver que o Flutter faz a alteração rapidamente.
Vou ficando por aqui. Na próxima aula iremos analisar o restante do código. Até mais!
Selecione a opção Flutter Application e clique em next. Coloque no Project name o nome "hello_flutter". Coloque o caminho do SDK: C:\src\flutter. A tela ficará como a seguir:
A seguir, deixe os valores padrão, pode dar next e finish. Com o seu celular conectado, tente rodar a aplicação de demonstração padrão. Clique na seta pra direita que fica no topo superior direito da IDE, chamada de Run 'main.dart' ou pressione Shift + F10. Se der algum problema relacionado a dependência do "lint-gradle-api-26.1.2.jar", sugiro que você leia o tópico "couldn't locate lint-gradle-api-26.1.2.jar for flutter project" no stackoverflow. Cheguei a ter problema com essa dependência e, por isso, segui o que estava dito no stackoverflow, ou seja, coloquei a informação do maven em cima de jcenter() no arquivo C:\src\flutter\packages\flutter_tools\gradle\flutter.gradle:
maven {
url 'https://dl.google.com/dl/android/maven2'
}
jcenter()
Se tudo der certo, você verá o hello world do Flutter rodando em seu celular. Clique no floating button (botão redondo com o + no centro) para ver o número do centro da tela sendo incrementado.
Agora vamos analisar o código para entendermos o que está acontecendo. A seguir vemos o código de Hello World gerado automaticamente pelo Flutter.
Você pode ver também a análise desse código no artigo "Destrinchando Flutter - Entendendo a estrutura e começando a programar" do Diego Dias no site FlutterBrasil. Vou fazer aqui a minha análise. Na linha 1 temos o código que importa os widgets do Flutter que foram desenhados no padrão Material Design, que é o padrão oficial que a Google usa e recomenda para o sistema Android, mas que também é utilizado na web. Na linha número 3 temos a função main(), que é a função de entrada no código. O seu código será iniciado por ela. Usa-se o runApp() para rodar o aplicativo. A linha 3 poderia ser reescrita de uma maneira mais tradicional, sem usar arrow function, da seguinte maneira:
void main() {
runApp(new MyApp());
}
Precisamos entender agora a diferença entre um StatelessWidget e StatefulWidget. A grosso modo um StatelessWidget não mantém um estado, logo é estático e imutável durante a execução do código, logo, não é executado durante o hot reload do Flutter. Já o StatefulWidget é um widget que mantém um estado, que pode ir sendo modificado durante a execução da aplicação. Utilizando o mesmo exemplo dado pelo Diego Dias em seu texto "Destrinchando Flutter - Entendendo a estrutura e começando a programar", podemos citar o caso de um carrinho de compras. É necessário manter os produtos que foram comprados a medida em que se faz compra, logo, seria um StatefulWidget, que manteria o estado atual da compra.
Na linha 5 foi criada uma classe chamada MyApp que se torna um StatelessWidget por meio da herança. MyApp é a raiz dos widgets da aplicação, pois foi a classe utilizada dentro de runApp(). Logo em seguida se sobrescreve o método build do StatelessWidget para podermos customizá-lo. É esse método que trata de modificar o app. No caso, ele irá retornar um MaterialApp, que é um Widget que segue o padrão do Material Design. Resumindo, o método build está dizendo o seguinte: crie um widget com o título 'Flutter Demo', que tenha um tema cuja cor primária seja azul e que tenha como widget inicial o MyHomePage.
Os parâmetros dos construtores que são explicitamente informados, como title, theme, primarySwatch, são parâmetros facultativos. Em Dart, parâmetros facultativos precisam ser explicitamente escritos no momento de chamar o método ou o construtor. Aqui também é um bom momento de testar o hot reload do Flutter. Troque o "Colors.blue" da linha 20 por outra, como "Colors.black" e rode usando o hot reload para você ver que o Flutter faz a alteração rapidamente.
Vou ficando por aqui. Na próxima aula iremos analisar o restante do código. Até mais!
Comentários
Postar um comentário