Como o Flutter funciona, e Dart I

Continuar o setup: o que fica a correr durante a teoria

Ontem ficou a instalação base. Hoje começa o que demora: o emulador. Quem tem telemóvel Android com cabo pode saltar este passo.

1. Android Studio → ecrã inicial → menu de três pontos → Virtual Device Manager → +.
2. Medium Phone → Next → aceitar a imagem de sistema sugerida → Finish. Descarrega cerca de 1 GB: fica a correr durante a teoria.
3. No Windows, se pedir para ativar a Plataforma de Hipervisor do Windows: aceitar; obriga a reiniciar, por isso fazer no fim da aula ou em casa.

Ponto de situação

• flutter --version responde num terminal novo.
• Android Studio instalado, Command-line Tools marcadas, licenças aceites (flutter doctor --android-licenses).
• flutter doctor: ✓ em Flutter, Android toolchain e Android Studio.
• Emulador a descarregar, ou telemóvel Android com depuração USB.
• Conta GitHub criada e email confirmado (é precisa na última meia hora de hoje).

O que faltar fica para casa, com o guia; a prática de hoje corre no browser e não depende de nada disto.

Três camadas

O sistema dá uma superfície e os toques. O resto é o Flutter.

Tudo é um widget

Um widget é um objeto Dart imutável que descreve um pedaço de interface. Compõem-se uns dentro dos outros numa árvore.

import 'package:flutter/material.dart';

void main() => runApp(const TempoApp());

class TempoApp extends StatelessWidget {
  const TempoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Tempo Açores')),
        body: const Center(child: Text('Ponta Delgada · 21 °C')),
      ),
    );
  }
}

build não desenha nada

Devolve a descrição do que deve existir. O framework compara a descrição nova com a anterior e só mexe no que mudou. Chamar build muitas vezes é normal e barato; é assim que o Flutter foi desenhado.

Para os testes: um widget é imutável; o que muda é o estado, e o estado vive noutro sítio.

Hot reload, hot restart, rebuild

• Hot reload (r): injeta o código alterado na Dart VM que está a correr no telemóvel e volta a chamar build. O estado mantém-se: um formulário meio preenchido no terceiro ecrã continua lá. Menos de um segundo.
• Hot restart (R): reinicia a app do zero, mantendo a compilação. Necessário quando muda o main, uma variável global, ou o tipo de um estado.
• Rebuild completo: quando mudam dependências no pubspec.yaml, código nativo, ou recursos. Voltar a correr flutter run.

Porquê Dart

• Null safety: o compilador sabe se uma variável pode ser null. Uma família inteira de crashes desaparece antes de a app correr.
• Sintaxe familiar: quem sabe JavaScript, Java, Kotlin ou PHP moderno lê Dart no primeiro dia.
• Feito para interfaces: garbage collector afinado para muitos objetos pequenos (os widgets), async/await na linguagem, isolates para trabalho pesado sem bloquear o ecrã.

Dart I no DartPad

Abrir dartpad.dev. Hoje não é preciso o Flutter: só Dart, no browser.

Constrói-se, passo a passo, o modelo de dados que a app do projeto vai usar. Seis blocos, cada um com um exercício curto no fim.

1. Variáveis e tipos

void main() {
  var cidade = 'Ponta Delgada';   // tipo inferido: String
  int dia = 21;
  double temperatura = 21.5;
  bool chove = false;
  final ilha = 'São Miguel';      // atribuído uma vez, em runtime
  const maxDias = 5;              // constante em tempo de compilação

  print('$cidade, $ilha: $temperatura °C, chuva: $chove');
  print('Dia ${dia + 1} de $maxDias');
}

1. Variáveis e tipos: o que interessa

• var infere o tipo e fixa-o. cidade = 3; é erro de compilação.
• final para valores que não mudam depois de atribuídos. É a escolha por defeito; var só quando é preciso reatribuir.
• const é para constantes conhecidas em compilação. Em Flutter, const aparece em muitos widgets, por uma razão de desempenho.
• Interpolação: $nome ou ${expressão}.

2. Null safety

void main() {
  String nome = 'Horta';
  String? alcunha;            // pode ser null; tem de ser declarado com ?

  // nome = null;             // erro de compilação
  print(alcunha ?? 'sem alcunha');        // ?? dá um valor por defeito
  print(alcunha?.length);                 // ?. só chama se não for null → null
  alcunha = 'Cidade do Mar';
  print(alcunha.length);                  // o compilador já sabe que não é null aqui

  late String descricao;      // prometo inicializar antes de usar
  descricao = '$nome, $alcunha';
  print(descricao);
}

2. Null safety: o que interessa

• Por defeito nada pode ser null. String? é um tipo diferente de String.
• ??, ?. e ??= são os operadores do dia a dia.
• ! força ("confio que não é null") e é uma origem frequente de crashes. Convém evitá-lo.
• Isto interessa em mobile porque quase tudo o que vem da rede ou do disco pode faltar.

3. Funções

double celsiusParaFahrenheit(double c) => c * 9 / 5 + 32;

String descreve(String cidade, {required double tMax, double? tMin, bool chuva = false}) {
  final min = tMin == null ? '' : ', mín $tMin';
  return '$cidade: máx $tMax$min${chuva ? ', chuva' : ''}';
}

void main() {
  print(celsiusParaFahrenheit(21));
  print(descreve('Angra', tMax: 24));
  print(descreve('Horta', tMax: 22, tMin: 17, chuva: true));

  final formatar = (double t) => '${t.round()} °C';   // função como valor
  print(formatar(21.6));
}

3. Funções: o que interessa

• Parâmetros nomeados entre chavetas: {required double tMax, bool chuva = false}. Em Flutter quase tudo usa parâmetros nomeados.
• required obriga; um valor por defeito torna opcional; ? permite null.
• Sintaxe => para funções de uma expressão. Funções são valores: podem guardar-se e passar-se.

Até amanhã