Flutter Hello, World

Flutter

Flutter é um kit de desenvolvimento de interface de usuário (UI toolkit) de código aberto, criado pela Google. Ele permite construir aplicativos compilados nativamente para mobile (iOS e Android), web, desktop (Windows, macOS, Linux) e embarcados, a partir de um único código base escrito em Dart.

A principal característica do Flutter é sua capacidade de criar interfaces de usuário bonitas, ricas em animações e com alto desempenho. Ele faz isso renderizando sua própria UI diretamente na tela (usando o motor gráfico Skia), em vez de depender dos widgets nativos da plataforma. Isso garante uma aparência e comportamento consistentes em todas as plataformas.

Quais as origens?

A primeira versão do Flutter, conhecida como "Sky", foi anunciada no Dart Developer Summit de 2015. A ideia era explorar a renderização de interfaces de forma mais eficiente em dispositivos móveis. O Google buscava uma maneira de construir interfaces de usuário de alta qualidade e alto desempenho que pudessem rodar consistentemente em diferentes plataformas.

Flutter 1.0 foi lançado oficialmente em 4 de dezembro de 2018, marcando sua estabilidade para produção. Desde então, tem ganhado enorme popularidade e uma comunidade muito ativa, com atualizações frequentes que expandem suas capacidades e melhoram o desempenho. A colaboração com a comunidade tem sido um pilar fundamental no seu desenvolvimento.

Para que serve?

Flutter é projetado principalmente para construir interfaces de usuário. Seus principais casos de uso incluem:

Desenvolvimento Mobile Multiplataforma

Este é o carro-chefe do Flutter. Com ele, você pode criar aplicativos para Android e iOS com uma única base de código, economizando tempo e recursos, e ainda assim obtendo desempenho nativo e interfaces ricas.

Desenvolvimento Web

Flutter também pode compilar para a web, permitindo que você crie Progressive Web Apps (PWAs) e Single Page Applications (SPAs) usando o mesmo código que você usaria para mobile.

Desenvolvimento Desktop

É possível construir aplicativos para Windows, macOS e Linux com Flutter, compartilhando grande parte da lógica de UI e de negócios dos seus aplicativos mobile e web.

Aplicações Embarcadas

Flutter está começando a ser explorado para sistemas embarcados e dispositivos IoT que necessitam de interfaces de usuário ricas.

Prototipagem Rápida

A funcionalidade de "Hot Reload" do Flutter permite que os desenvolvedores vejam as alterações no código refletidas quase instantaneamente no aplicativo em execução, o que acelera muito o ciclo de desenvolvimento e a experimentação.

Criação de Interfaces Consistentes

Como o Flutter controla cada pixel na tela, ele garante que a UI do seu aplicativo tenha a mesma aparência e comportamento em todas as plataformas, o que é ótimo para a identidade visual da marca.

Como é a "sintaxe" (ou estrutura e uso de Dart no Flutter)?

Flutter não tem uma "sintaxe" própria no sentido de uma linguagem de programação, pois ele usa a linguagem Dart. A "sintaxe" no contexto do Flutter refere-se à forma como você estrutura seu código Dart para construir interfaces de usuário usando os widgets e princípios do framework.

Os conceitos fundamentais incluem:

Tudo é um Widget

A filosofia central do Flutter é que a interface do usuário é construída a partir de uma árvore de widgets. Widgets são os blocos de construção básicos de uma aplicação Flutter. Eles descrevem como a interface deve ser (configuração e estado). Exemplos incluem Text, Row, Column, Container, Image, Icon, Colors e muitos, muitos outros.

Widgets Declarativos

Você descreve a UI em termos do estado atual. Quando o estado da sua aplicação muda (por exemplo, o usuário clica em um botão), o Flutter reconstrói eficientemente a parte relevante da árvore de widgets para refletir o novo estado.

Composição sobre Herança

Interfaces complexas são construídas combinando widgets mais simples. É comum ter árvores de widgets bastante aninhadas.

Dois Tipos Principais de Widgets

StatelessWidget (Widgets sem estado)

Descrevem uma parte da interface do usuário que não depende de nada além da sua própria configuração e do BuildContext onde o widget é inflado. São imutáveis uma vez criados.

StatefulWidget (Widgets com estado)

Descrevem uma parte da interface do usuário que pode mudar dinamicamente. Eles mantêm um objeto State que armazena o estado mutável e pode ser reconstruído quando o estado muda (usando setState()).

Hot Reload e Hot Restart

Hot Reload

Permite injetar código atualizado na Dart VM enquanto o aplicativo está em execução, preservando o estado atual do aplicativo. Isso torna o desenvolvimento e a iteração muito rápidos.

Hot Restart

Reinicia o aplicativo, mas é mais rápido que uma reinicialização completa.

Estrutura de um Aplicativo Básico

Abaixo temos um exemplo de estrutura básica de um aplicativo Flutter, com comentários:

import 'package:flutter/material.dart'; // Importa a biblioteca de widgets Material Design

void main() {

  runApp(MyApp()); // Inicia a aplicação com o widget raiz

}

class MyApp extends StatelessWidget { // Widget raiz da aplicação (geralmente StatelessWidget)

  @override

  Widget build(BuildContext context) {

    return MaterialApp( // Widget que fornece funcionalidades básicas do Material Design

      title: 'Meu App Flutter',

      home: MyHomePage(), // Tela inicial

    );

  }

}

class MyHomePage extends StatefulWidget { // Tela inicial (pode ser StatefulWidget se tiver estado)

  @override

  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

  int _counter = 0;

  void _incrementCounter() {

    setState(() { // Notifica o Flutter que o estado mudou e a UI precisa ser reconstruída

      _counter++;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold( // Estrutura básica de uma tela Material Design (com AppBar, corpo, etc.)

      appBar: AppBar(

        title: Text('Flutter Demo Home Page'),

      ),

      body: Center( // Centraliza o conteúdo

        child: Column( // Organiza widgets verticalmente

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            Text('Você pressionou o botão esta quantidade de vezes:'),

            Text(

              '$_counter',

              style: Theme.of(context).textTheme.headlineMedium,

            ),

          ],

        ),

      ),

      floatingActionButton: FloatingActionButton( // Botão de ação flutuante

        onPressed: _incrementCounter,

        tooltip: 'Incrementar',

        child: Icon(Icons.add),

      ),

    );

  }

}

Neste exemplo, MaterialApp, Scaffold, AppBar, Center, Column, Text, FloatingActionButton e Icon são todos widgets.

Quais são os requisitos?

Para desenvolver com Flutter, você precisará configurar seu ambiente de desenvolvimento. Os requisitos variam um pouco dependendo do seu sistema operacional e das plataformas para as quais você deseja desenvolver:

Sistema Operacional

1. • Windows 7 SP1 ou posterior (64-bit)

   • macOS (64-bit)

   • Linux (64-bit)

Espaço em Disco

1. • Pelo menos 1.64 GB para o SDK do Flutter. Ferramentas adicionais como Android Studio, Xcode, etc., exigirão mais espaço.

Ferramentas

1. • Flutter SDK: Você precisará baixar e configurar o SDK do Flutter. Ele já inclui uma versão compatível do Dart SDK.

   • Git: O Flutter usa o Git para algumas dependências e para o próprio SDK.

   • Um Editor de Código ou IDE com Suporte a Flutter:

     • Android Studio: Altamente recomendado, especialmente para desenvolvimento Android. Oferece integração completa com ferramentas Flutter e Dart.

     • IntelliJ IDEA (Community ou Ultimate): Com os plugins Flutter e Dart.

     • Visual Studio Code: Uma opção popular e leve, com excelentes extensões Flutter e Dart.

Requisitos Específicos da Plataforma

1. • Para desenvolvimento Android:

     • Android Studio: Inclui o Android SDK, Android SDK Platform-Tools e Android SDK Build-Tools.

     • Um dispositivo Android físico ou um Emulador Android configurado.

   • Para desenvolvimento iOS (requer macOS):

     • Xcode: A IDE da Apple para desenvolvimento iOS e macOS.

     • CocoaPods (geralmente instalado com o Xcode ou separadamente, se necessário).

     • Um dispositivo iOS físico ou um Simulador iOS (parte do Xcode).

   • Para desenvolvimento Web:

     • Um navegador moderno como o Chrome.

   • Para desenvolvimento Desktop (Windows, macOS, Linux):

     • Dependências adicionais específicas do sistema operacional podem ser necessárias. Por exemplo, no Linux, você pode precisar de bibliotecas como clang, cmake, gtk-dev, etc. O comando flutter doctor ajudará a identificar o que está faltando.

Começar com Flutter envolve um pouco mais de configuração de ambiente do que apenas Dart puro, especialmente por causa das dependências de cada plataforma alvo. Apesar da documentação oficial do Flutter ser excelente e fornecer guias detalhados para cada sistema operacional, fizemos uma compilação com base na nossa prática em lidar com a plataforma no dia-dia, principalmente em ambiente de aprendizagem, e, é isso que a sequência desse tutorial apresenta.

Interessou? Curioso? Está precisando? Clique no botão abaixo para seguir para o tutorial.