Flutter - ChangeNotify

Olá, Paulo.

Tudo bem?

Vou tentar te ajudar a entender a reatividade no Fluttercom um exemplo prático usando ChangeNotifier e Provider.

Primeiro, você pode criar uma classe que estenda ChangeNotifier para gerenciar o estado da sua aplicação:

import 'package:flutter/material.dart';

class ApiDataProvider with ChangeNotifier {
  bool _isLoading = true;
  List<dynamic> _data = [];

  bool get isLoading => _isLoading;
  List<dynamic> get data => _data;

  Future<void> fetchData() async {
    // Simulando uma chamada de API com delay
    await Future.delayed(Duration(seconds: 2));
    // Aqui você faria a chamada real da API e obteria os dados
    _data = ['Item 1', 'Item 2', 'Item 3']; // Exemplo de dados recebidos da API
    _isLoading = false;
    notifyListeners();
  }
}

Em seguida, no seu arquivo principal, configure o Provider para que ele esteja disponível em toda a aplicação:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'api_data_provider.dart'; // Importe a classe que criamos acima

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

Agora, na sua tela principal, você pode usar o Consumer para escutar as mudanças no estado e atualizar a UI de acordo:

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final apiDataProvider = Provider.of<ApiDataProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter ChangeNotifier Example'),
      ),
      body: Center(
        child: apiDataProvider.isLoading
            ? CircularProgressIndicator()
            : ListView.builder(
                itemCount: apiDataProvider.data.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(apiDataProvider.data[index]),
                  );
                },
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          apiDataProvider.fetchData();
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

Nesse exemplo, quando você clica no botão de atualização, a chamada da API é simulada e, enquanto os dados não chegam, um CircularProgressIndicator é exibido. Quando os dados são recebidos, a lista é atualizada automaticamente.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.