Introdução ao Flutter, o framework da Google

Segundo o Google, Flutter é um UI toolkit do Google para criar aplicativos bonitos e nativos compilados para dispositivos móveis, Web e desktop a partir de uma única base de código.

Vamos detalhar um pouco mais essa parada.

O que é o Flutter?

Imagine que você seja — se já não é — um desenvolvedor iOS e criou um app muito legal que, ao invés de dar match com outras pessoas, dá match com comidas que você deve experimentar.

Hummm… Puts, que legal isso cara, um app super popular! Mas tem um problema. Sheeeiiit (ebonics – Google it!). Só roda no iOS. E todos os dias as pessoas perguntam quando será lançado a versão para Android.

Então você, de saco cheio de tanta perturbação (sei bem como é isso), decide comprar uns livros de Java e estudar desenvolvimento de apps Android.

Sheeeeeiiitt! Depois de um bom e longo tempo, seu app está disponível para download em ambos: Google Play e App Store. Muito bom para os usuários, lógico. Mas para você que vai manter e atualizar o código, pode se tornar um pesadelo.

Será necessário escrever duas versões de códigos para corrigir bugs, features e por aí vai. E só então subir para as lojinhas do Google e Apple.

E isso não é tudo. Imagine seus usuários reclamando do tamanho de um botão que parece legal em um tamanho de tela e em outro não!?

Existem muitos tamanhos de telas, aparelhos de diversos tamanhos, iPhones antigos, tantas variedades de aparelhos rodando Android… Fica extremamente difícil criar um design bacana para seu app que atenda a todos. Exatamente aqui entra o Flutter!

Quer entender um pouco sobre o hype que envolve o Flutter, confira o vídeo:

Oportunidades para pessoa desenvolvedora mobile: encontre a sua!

O diferencial do Flutter

Cada vez mais surgem telas, por toda parte. Temos telas em geladeiras, pontos de ônibus, até mesmo espelhos e com diferentes proporções e tamanhos.

Por que não criar uma maneira inteligente e fácil permitindo que developers construam um design para seus apps em todas essas maravilhosas telas?

É exatamente o que Flutter é: Um simples toolkit que permite que developers criem bonitos designs para toda uma variedade de telas e aparelhos. Cool! 

Flutter possui uma porção de widgets que nos permite criar o layout do app muito facilmente. Muitos deles vieram dos conceitos de web design onde podemos ter os elementos centralizados ou termos paddings e margins.

E que tal usar tudo isso para criar o design e desenvolver para quase todos os aparelhos existentes no mercado? 

Ok.. Mas como funciona?

É isso aí. Imagine os widgets como blocos de lego a serem montados. É exatamente como Flutter funciona, temos acesso a todos os widgets e os montamos como lego.

Conectando estes blocos de lego, podemos customizar e criar um bonito app e realizar deploy em quase todos os lugares. Desenvolveremos um app aplicando tudo isso e mais.

E a melhor parte: realizar deploy do nosso app em diferentes aparelhos e plataformas sem reescrever o código ou aprender uma nova tecnologia/linguagem de programação.

>>Leitura Recomendada:
Programação Mobile: tudo para começar hoje!

Por que escolher o Flutter?

Então você vai começar um projeto e quer saber se realmente deve usar Flutter. As primeiras coisas a se pensar são:

• Apenas um código para manter. Cool!
• Apenas um local para debugar.
• Apenas um local para realizar seus updates.

Ou seja, apenas um código que dita todas as regras! Coooooool!!!

Essa é a uma grande vantagem comparando com criações de apps nativos para iOS com Swift, criando apps para Android com Java, WebApps em JavaScript e precisando atualizar e manter todos estes códigos… Grande chance de virar uma bagunça.

A linguagem Dart

Com Flutter, a única linguagem que precisa saber é Dart (muitos aqui lembram do Lord Sith Darth Vader hehe), uma poderosa e fácil linguagem para se trabalhar, se você conhece orientação a objetos e já programou com outra linguagem antes.

Ela é utilizada dentro do Google para projetos como adWords e Google Fiber e só vem crescendo. Atualmente, podemos utilizar Flutter para criar aplicações iOS, Web, Desktop e Android.

Mas cuidado, as versões para Web e Desktop ainda não parecem muito estáveis. Então faça alguns testes antes de mais nada.

O iOS e o Flutter

Se isso não é tudo e você trampa com desenvolvimento iOS nativo, sabe que o carregamento de uma alteração feita no código depois de clicar em save, rodar, compilar e finalmente ter a alteração exibida na tela, demora um tempinho.

No Flutter isso acontece rapidão, na hora mesmo, com o Hot Reload.

Last but not least: a última coisa que você precisa saber é que quando estamos trabalhando com Flutter, temos acesso ao código fonte original.

Isso significa que, se você quiser saber — por exemplo — como um botão é implementado, é possível clicar no código dele e ver como os caras do Google escreveram o código e até mesmo alterar para o jeito que você preferir.

Devo mencionar que lá no iOS as coisas são uma black box? O código da Apple e como eles implementam é um segredo deles.

BTW — Apple é uma empresa que admiro, seus produtos e linguagens também. Entretanto, kudos para Flutter!

>>Leitura Recomendada:
Leia nosso artigo sobre as novidades no Swift 5!

Tutorial Flutter de instalação

Para instalar o Flutter basta instalar o Flutter SDK, que já consta o CLI (a ferramenta de linha de comando do Flutter), o compilador do Dart, o framework em si e outras ferramentas fundamentais para o funcionamento.

É preciso, também, de um dispositivo mobile onde seja possível executar o aplicativo (pode ser o emulador do Android e/ou iOS ou um dispositivo físico) e o SDK da plataforma que estejamos desenvolvendo (o SDK do Android pode ser obtido através da instalação do Android Studio).

Sintaxe do Flutter

Confira como fica um Hello World com o Flutter usando Dart:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    // Title
      title: "Exemplo",
      // Home
      home: Scaffold(
        // Appbar
        appBar: AppBar(
          // Title
          title: Text("Exemplo"),
          backgroundColor: Colors.red,
        ),
        // Body
        body: Container(
          // Center the content
          child: Center(
            // Add Text
            child: Text("Olá, Mundo! :)"),
          ),
        ),
      )));
}

A anatomia de um Flutter App

Como mencionei anteriormente, tudo em Flutter é widget. E o funcionamento é como brincar de lego e montar os blocos.

Vale lembrar que usaremos muitos nomes e termos comuns no mundo Flutter.

Pratica aí hehe!

Veja a imagem a seguir e vamos em frente.

Baseado nisso vamos tomar como exemplo um app em que vamos utilizar Scaffold e isso nos dá apenas uma tela em “branco”.

E dentro do Scaffold vamos criar um AppBar no topo.

Agora, vamos criar dentro do Scaffold um Container, que é simplesmente uma caixa que terá o conteúdo do app.

Dentro do Container, vamos criar um Column.

E agora, podemos colocar widgets dentro do Column, que ficarão como stack (pilhas) verticalmente.

O primeiro widget dentro da nossa Column será uma Row. E o segundo será um Text.

Então agora eu tenho uma Column com dois itens e dois widgets: Row no Top e algum Text no Bottom.

Vamos nos aprofundar mais nessa árvore de widgets e dentro da Row criar um Text e um Icon.  

Temos agora uma árvore que é simplesmente um monte de widgets aninhados. E se colocarmos isso no código, ficará como a imagem a seguir:

Talvez, à primeira impressão, possa ser um pouco difícil de entender.

Para melhorar o entendimento e aplicar essa teoria vamos criar um app no próximo post, fiquem ligados!

Valeu e God bless y’all! See you.

Você sabia? Esse artigo é o primeiro da nossa série sobre o Flutter! Leia nosso tutorial sobre como criar um app com Flutter!

Crie um perfil na GeekHunter e receba propostas alinhadas ao seu perfil. São mais de 1000 vagas abertas, inclusive de Vagas Flutter.