Flutter no desenvolvimento móvel: o que é, conceitos-chave e como funciona

Flutter: fundamentos de Widget, StatelessWidget e StatefulWidget

Widget — uma descrição declarativa de uma parte da UI. Tudo no Flutter é um Widget: de um botão ao próprio aplicativo. Um Widget é configuração (não a UI em si). StatelessWidget — um Widget imutável. build() é chamado uma vez. Não tem estado. Usado para conteúdo estático. StatefulWidget — um Widget mutável. Tem um objeto State que pode mudar. setState() — aciona rebuild. State — um objeto mutável vinculado a um StatefulWidget. Contém dados que podem mudar.

StatelessWidget vs StatefulWidget

StatelessWidget — build() é chamado uma vez. Adequado para cabeçalhos, ícones, textos estáticos. StatefulWidget — build() é chamado sempre que setState() é invocado. Adequado para formulários, listas com alterações, temporizadores. InheritedWidget — passagem de dados para baixo sem passagem explícita por construtores. Theme, MediaQuery, Navigator — InheritedWidgets. BuildContext — posição de um Widget na árvore. context.of<T>, context.watch<T>, context.select<T,R> — acesso a InheritedWidget.

// Exemplo Flutter Widget: StatefulWidget com setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — configuração. StatelessWidget — imutável. StatefulWidget — mutável com setState(). A IT Sectr recomenda começar com StatelessWidget e mudar para StatefulWidget apenas quando precisar de estado.

Árvores (Widget Tree, Element Tree, RenderObject Tree)

Flutter usa três árvores para renderização eficiente. Widget Tree — árvore de configuração. Widgets são criados com frequência (cada build), leves. Element Tree — árvore de elementos. Um elemento por Widget (se o tipo não mudar). Element — ponte entre Widget e RenderObject. RenderObject Tree — árvore de renderização. Lida com tamanhos, posições, pintura. RenderObject — pesado, criado raramente. Flutter compara a Widget Tree e atualiza a Element Tree, o que aciona a atualização da RenderObject Tree.

Keys e Element Tree

Key — identificador de Widget na Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Keys permitem que o Flutter corresponda Widgets antigos e novos durante o rebuild. Sem Keys, o Flutter corresponde por tipo de Widget e posição. GlobalKey — acesso a State de outro Widget. Usado para: formulários complexos, animações, acesso a State em testes. A IT Sectr recomenda usar Keys para listas (List.generate) e evitar GlobalKey a menos que necessário.

Expanded — Widget que preenche o espaço disponível em Row/Column/Flex. Flexible — não força o preenchimento (pode ser menor). MediaQuery — InheritedWidget com informações do dispositivo: tamanho da tela, orientação, plataforma, fator de escala de texto. Theme/ThemeData — tema centralizado. Theme.of(context) — acesso. MaterialApp — Widget raiz para configuração de roteamento, temas, locais. Scaffold — layout básico com AppBar, Drawer, BottomNavigationBar. AppBar — painel superior.

Navegação (Navigator, Route)

Navigator — pilha de rotas (Routes). Navigator.push — abrir tela (retorna Future). Navigator.pop — fechar (com resultado). MaterialPageRoute — transição animada (slide da direita). Named Routes — identificadores de string. onGenerateRoute — manipulador centralizado. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — navegação declarativa para web, deep linking e cenários complexos.

Navigator 2.0

Navigator 2.0 — navegação declarativa. Router — Widget central. RouteInformationParser — análise de URL. RouterDelegate — gerenciamento da pilha. GoRouter (pacote) — invólucro simplificado sobre o Navigator 2.0. Suporta: rotas nomeadas, parâmetros, redirecionamento, deep linking. A IT Sectr recomenda GoRouter para a maioria dos projetos e Navigator 2.0 apenas para cenários complexos (web, desktop).

Assincronia (FutureBuilder, StreamBuilder)

FutureBuilder — Widget que constrói UI com base em um Future. connectionState: none, waiting, active, done. Usado para: requisições HTTP, leitura de BD, temporizadores. StreamBuilder — Widget para Stream (fluxo infinito de dados). snapshot.data, snapshot.hasError, snapshot.hasData. Usado para: WebSocket, Firebase, atualizações de localização. Ambos os Widgets reconstroem ao receber novos dados.

Gerenciamento de Estado

Provider — DI simples + gerenciamento de estado. ChangeNotifierProvider, MultiProvider. Riverpod — substituição moderna do Provider: seguro em compilação, independente de BuildContext. Bloc — arquitetura Event-Driven: Cubit (eventos simples) vs Bloc (complexos). GetX — gerenciamento de estado leve + DI + roteamento. setState — o mais simples, para estado local. A IT Sectr recomenda Riverpod para novos projetos e Provider para existentes.

Temas e adaptação (MediaQuery, ThemeData)

MediaQuery — tamanho da tela, orientação, plataforma, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — tema do aplicativo: cores, fontes, formas. Theme.of(context).textTheme.bodyLarge. Hot Reload — injeção de código em um aplicativo em execução. Preserva o estado. Não suporta: alterar main(), variáveis globais, campos estáticos. Hot Restart — reinicialização completa do aplicativo (perda de estado). Hot Reload — principal vantagem do Flutter para desenvolvedores.

StatelessWidget — para conteúdo estático. StatefulWidget — para conteúdo dinâmico. InheritedWidget — para DI. A IT Sectr recomenda StatelessWidget por padrão e StatefulWidget apenas quando necessário.

Layout Responsivo

LayoutBuilder — adaptar às dimensões do pai. OrientationBuilder — adaptar à orientação. Expanded vs Flexible — distribuição de espaço em Row/Column. MediaQuery — breakpoints para tablets e desktops. SafeArea — margens de elementos do sistema (notch, status bar). AspectRatio — manter proporções. A IT Sectr recomenda LayoutBuilder para layouts adaptativos e OrientationBuilder para orientação paisagem.

Testes (Widget, Integration, Unit)

Testes unitários — teste de lógica de negócio, repositórios, modelos. dart test — execução. Testes de Widget — teste de widgets isoladamente. WidgetTester — pumpWidget, tap, enterText. Testes de integração — cenários completos em dispositivo/emulador real. Mockito — mock de dependências. Golden tests — comparação de capturas de tela (golden files). A IT Sectr recomenda testes de Widget para cada tela e testes unitários para lógica de negócio.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Animações (Implícitas, Explícitas, Hero)

Animações implícitas — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Mudanças de propriedade animam automaticamente. Animações explícitas — AnimationController com Tween. forward() / reverse(). Animação Hero — Widget Hero com tag — animação de transição entre telas. Animação escalonada — cadeia de animações com Interval. Lottie — integração de animações do After Effects. Rive — animações interativas (state machine). A IT Sectr recomenda AnimatedContainer para 80% dos casos e AnimationController para cenários complexos.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Redes (http, dio, graphql)

http — cliente HTTP simples (get, post, put, delete). dio — cliente avançado com interceptores, timeouts, retry, logging. graphql_flutter — cliente GraphQL para Flutter. json_serializable — geração de fromJson/toJson via anotações. Retrofit Dart — cliente HTTP type-safe como Retrofit. WebSocket — via web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. A IT Sectr recomenda dio para REST API e graphql_flutter para GraphQL.

Flutter DevTools — conjunto de ferramentas: Inspector (árvore de widgets), Timeline (desempenho), Memory, Network, Logging. Profile mode — perfil sem debug. Performance overlay — FPS, tempos de build. Flame chart — gráfico de chamas. DevTools — ferramenta essencial para otimizar aplicações Flutter em produção.

Flutter Web — compilação do Flutter para WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-perfect, mas mais pesado. HTML renderer — leve, mas com limitações. WASM (Flutter 3.22+) — desempenho nativo. Adaptação responsiva via LayoutBuilder e MediaQuery. A IT Sectr recomenda CanvasKit para aplicações web desktop e HTML renderer para sites de conteúdo.