Introdução ao Flutter

Flutter é um kit de desenvolvimento de interface multiplataforma mantido pelo Google, com ele você cria aplicações nativas para Android, iOS, Web e Desktop a partir de uma única base de código.

Sua renderização própria garante alta performance e aparência consistente em diferentes dispositivos.

O que é Flutter?

Flutter é um framework open-source que utiliza a linguagem Dart, ele fornece um conjunto rico de widgets personalizáveis que seguem as diretrizes de Material Design e Cupertino.

A arquitetura reativa facilita a construção de interfaces declarativas, onde o estado da UI é refletido automaticamente.

Arquitetura do Flutter

O Flutter é dividido em três camadas principais:

• Engine Implementa o motor de renderização em C/C++, responsável por desenhar cada pixel na tela.

• Framework Conjunto de bibliotecas em Dart que implementam widgets, gestos, animações e gerenciamento de estado.

• Shell Adaptadores que conectam o engine ao sistema operacional, lidando com eventos de entrada, layout e plataforma.

Configuração do ambiente

Instale o SDK do Flutter a partir de Flutter.dev e adicione o binário ao PATH do sistema.

Em seguida, execute flutter doctor para verificar dependências, configurar o Xcode (macOS) ou Android Studio (Windows/Linux) e emular dispositivos.

Por fim, escolha seu editor preferido — Visual Studio Code ou Android Studio — e instale os plugins oficiais do Flutter e do Dart.

Exemplo 1: Hello World

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();

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

Esse código inicializa um app com um título na barra superior e uma mensagem central.

O widget StatelessWidget é imutável; o layout é reconstruído a partir do build.

Exemplo 2: Layout com Column e Row

class LayoutExemplo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Column(
          children: const [
            Icon(Icons.star, color: Colors.red),
            Text('Estrela'),
          ],
        ),
        Column(
          children: const [
            Icon(Icons.favorite, color: Colors.pink),
            Text('Coração'),
          ],
        ),
      ],
    );
  }
}

Neste exemplo, duas colunas alinham ícones e textos lado a lado.

Os parâmetros mainAxisAlignment e crossAxisAlignment permitem controlar posicionamento e espaçamento.

Exemplo 3: Navegação entre telas

// Tela Inicial
ElevatedButton(
  child: const Text('Ir para detalhes'),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => const DetalhesPage()),
    );
  },
);

// DetalhesPage
class DetalhesPage extends StatelessWidget {
  const DetalhesPage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Detalhes')),
      body: const Center(child: Text('Página de detalhes')),
    );
  }
}

O Navigator gerencia uma pilha de rotas; push adiciona uma nova tela e pop retorna.

Isso torna a navegação intuitiva e alinhada ao comportamento nativo das plataformas.

Exemplo 4: Gerenciamento de estado

1. setState (simples, embutido)

class ContadorPage extends StatefulWidget {
  @override
  _ContadorPageState createState() => _ContadorPageState();
}

class _ContadorPageState extends State<ContadorPage> {
  int _count = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Contador: $_count'),
        ElevatedButton(onPressed: _increment, child: const Text('Incrementar')),
      ],
    );
  }
}

2. Provider (para apps mais complexos)

class CounterModel extends ChangeNotifier {
  int value = 0;
  void increment() {
    value++;
    notifyListeners();
  }
}

// No topo da árvore
ChangeNotifierProvider(
  create: (_) => CounterModel(),
  child: MyApp(),
);

// Consumindo
Consumer<CounterModel>(
  builder: (_, model, __) {
    return Text('Contador: ${model.value}');
  },
);

Comparativo: Flutter, React Native e Xamarin

Conclusão e próximos passos

Flutter une produtividade e performance ao oferecer uma base de código única para múltiplas plataformas.

Compreender suas camadas, widgets e opções de estado é fundamental para criar apps escaláveis e bem-otimizados.

A prática com exemplos de layout, navegação e gerenciamento de estado acelera sua curva de aprendizado.

Mais uma dica, pesquise sobre:

• Performance: profiling e otimizações de build

• Flutter Web e Flutter Desktop

• Pacotes populares: Riverpod, Bloc, GetX

• Animações avançadas e custom painters

• Boas práticas para estrutura de pastas e testes