Reatividade pura | Flutter

• Reatividade pura | Flutter

ChangeNotifier | Flutter

info

ChangeNotifier (com Provider) → para estados globais ou complexos, com várias propriedades e lógica.

Definindo o modelo de estado

import 'package:flutter/material.dart';

class ContadorModel extends ChangeNotifier {
  int _contador = 0;

  int get contador => _contador;

  void incrementar() {
    _contador++;
    notifyListeners(); // avisa widgets que usam esse modelo
  }
}

Registrando o ChangeNotifier no provider

dependencies:
  provider: ^6.0.0

Depois, registre o modelo no topo da sua árvore de widgets:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => ContadorModel(),
      child: MyApp(),
    ),
  );
}

Consumindo com Consumer

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ChangeNotifier + Provider')),
        body: Center(
          child: Consumer<ContadorModel>(
            builder: (context, modelo, _) {
              return Text(
                'Contador: ${modelo.contador}',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () =>
              context.read<ContadorModel>().incrementar(), // chama o método
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

ValueListenableBuilder

A classe ValueListenableBuilder é um widget do Flutter que serve para reconstruir automaticamente partes da interface (UI) sempre que o valor de um ValueListenable muda — sem precisar usar setState() manualmente.

---

🧩 Conceito básico

Um ValueListenable é um tipo especial de objeto que notifica ouvintes quando seu valor muda. O exemplo mais comum é o ValueNotifier, que é um ValueListenable que armazena um valor e permite alterá-lo de forma reativa.

O ValueListenableBuilder escuta esse ValueListenable e reconstrói seu filho sempre que o valor muda.

---

🧠 Estrutura

ValueListenableBuilder<T>(
  valueListenable: ValueListenable<T>,
  builder: (BuildContext context, T value, Widget? child) {
    // Retorna o widget que será reconstruído quando 'value' mudar
  },
  child: Widget?, // opcional, usado para widgets estáticos
)

• valueListenable → O objeto que será observado (ex: ValueNotifier<int>).
• builder → Função que será chamada sempre que o valor mudar.
• child → (opcional) Um widget que não depende do valor e não precisa ser reconstruído.

---

💡 Exemplo prático

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final ValueNotifier<int> contador = ValueNotifier<int>(0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ValueListenableBuilder Exemplo')),
        body: Center(
          child: ValueListenableBuilder<int>(
            valueListenable: contador,
            builder: (context, valor, _) {
              return Text(
                'Contador: $valor',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => contador.value++, // Atualiza o valor
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

🟢 Quando o botão é pressionado:

1. contador.value é incrementado.
2. O ValueListenableBuilder detecta a mudança.
3. A função builder é chamada novamente, reconstruindo o texto com o novo valor.

---

🚀 Vantagens

✅ Mais leve que um StatefulWidget — ideal para pequenas partes da UI. ✅ Fácil de usar com ValueNotifier — muito útil para estados locais simples. ✅ Reatividade sem necessidade de setState().

📊 Diferença prática

Situação	Use ChangeNotifier	Use ValueNotifier + ValueListenableBuilder
Estado global	✅	❌
Estado local (widget específico)	❌	✅
Vários campos	✅	❌
Um valor simples	❌	✅
Integração com Provider	✅	✅ (indireta)