Resultados de aprendizagem

1. Distinguir abordagens (nativo, híbrido, PWA).
2. Construir UI móvel com Flutter.
3. Gerir estado e navegação.
4. Consumir APIs e armazenar dados localmente.

Nativo vs híbrido vs PWA

Esta UC foca Flutter (Dart) — popular, gratuito, 1 código → Android + iOS + web.

Quando escolher cada

• PWA — conteúdo, sem necessidade de hardware avançado, orçamento mínimo.
• Cross-platform (Flutter/RN) — app real, equipa pequena, time-to-market.
• Nativo — performance crítica, jogos, uso intensivo de hardware específico.

A maioria das apps de negócio hoje: Flutter ou React Native.

Estrutura base

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Aulify',
      home: Scaffold(
        appBar: AppBar(title: const Text('Olá Aulify')),
        body: const Center(child: Text('Bem-vindo!')),
      ),
    );
  }
}

Scaffold = estrutura de ecrã (appbar, body, FAB).

Widgets comuns

Text('Olá')
Icon(Icons.home)
Image.network('https://...')
ElevatedButton(onPressed: () {}, child: Text('Clica'))
TextField(decoration: InputDecoration(labelText: 'Email'))

Column(children: [...])   // vertical
Row(children: [...])      // horizontal
ListView(children: [...]) // scroll
Container(padding: EdgeInsets.all(16), child: ...)

Layout = composição de widgets. Tudo é widget.

Stateless vs Stateful

// Não muda
class Logo extends StatelessWidget {
  Widget build(c) => Image.asset('logo.png');
}

// Muda ao longo do tempo
class Contador extends StatefulWidget {
  State<Contador> createState() => _ContadorState();
}
class _ContadorState extends State<Contador> {
  int n = 0;
  Widget build(c) => Column(children: [
    Text('$n'),
    ElevatedButton(
      onPressed: () => setState(() => n++),
      child: Text('+1'),
    ),
  ]);
}

setState() redesenha o widget.

Navegação

// Ir para novo ecrã
Navigator.push(context,
  MaterialPageRoute(builder: (c) => EcraDetalhe()));

// Voltar
Navigator.pop(context);

// Rotas nomeadas
MaterialApp(
  routes: {
    '/': (c) => HomeScreen(),
    '/perfil': (c) => PerfilScreen(),
  },
);
Navigator.pushNamed(context, '/perfil');

Gestão de estado

• setState — estado local simples.
• Provider / Riverpod — estado partilhado entre ecrãs.
• Bloc — apps grandes, fluxos complexos.

// Provider (simplificado)
class Carrinho extends ChangeNotifier {
  final _itens = <String>[];
  void adicionar(String x) {
    _itens.add(x);
    notifyListeners();
  }
}

Começar simples (setState). Subir conforme a app cresce.

Consumir API

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List> buscarProdutos() async {
  final r = await http.get(
    Uri.parse('https://api.aulify.pt/produtos'));
  if (r.statusCode == 200) {
    return jsonDecode(r.body);
  }
  throw Exception('Falha ao carregar');
}

async/await para operações que demoram (rede, disco).

FutureBuilder

FutureBuilder(
  future: buscarProdutos(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    }
    if (snapshot.hasError) {
      return Text('Erro: ${snapshot.error}');
    }
    final dados = snapshot.data!;
    return ListView(children: [
      for (var p in dados) ListTile(title: Text(p['nome'])),
    ]);
  },
)

Mostra loading → dados ou erro.

Armazenamento local

• shared_preferences — chave-valor simples (settings, token).
• sqflite — SQLite no dispositivo.
• Hive / Isar — NoSQL rápido.
• secure_storage — dados sensíveis (encriptado).

final prefs = await SharedPreferences.getInstance();
await prefs.setString('token', 'abc123');
final token = prefs.getString('token');

Boas práticas UX móvel

• Alvos de toque ≥ 48×48 dp.
• Feedback imediato (loading, ripple).
• Offline — degradar com elegância, não crashar.
• Permissões — pedir só quando necessárias, explicar porquê.
• Responsivo a vários ecrãs e orientações.
• Acessibilidade — labels, contraste, tamanho de fonte do sistema.
• Bateria/dados — não abusar de rede em background.

Publicar

Antes de publicar: ícone, screenshots, política de privacidade, testes em dispositivos reais, build release assinado.

flutter build apk · flutter build appbundle · flutter build ios.