Gerenciamento de Estado no Flutter: Entendendo Provider, Riverpod e Bloc

Gerenciamento de Estado no Flutter

O gerenciamento de estado é uma parte essencial do desenvolvimento de aplicativos Flutter. Ele permite que você gerencie e mantenha o estado da sua aplicação de forma eficiente. Existem várias abordagens para o gerenciamento de estado em Flutter, entre elas estão o Provider, Riverpod e Bloc.

Provider

O Provider é uma das bibliotecas mais populares para gerenciamento de estado no Flutter. Ele fornece uma maneira simples e eficiente de compartilhar dados entre widgets. O Provider utiliza o conceito de InheritedWidget para tornar os dados acessíveis em toda a árvore de widgets.

Para usar o Provider, siga os passos abaixo:

1. Adicione a dependência no seu arquivo pubspec.yaml:

dependencies:
  provider: ^6.0.0

2. Crie uma classe de modelo para o seu estado.
3. Use o ChangeNotifierProvider para fornecer o estado ao seu widget.

Exemplo de Provider

Aqui está um exemplo simples de como usar o Provider:

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

class Counter extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(
          child: Consumer(
            builder: (context, counter, child) {
              return Text('Count: ${counter.count}');
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => Provider.of(context, listen: false).increment(),
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Riverpod

O Riverpod é uma evolução do Provider, oferecendo uma maneira mais segura e escalável de gerenciar o estado. Ele remove algumas limitações do Provider e fornece uma API mais simples e poderosa. O Riverpod é baseado em "providers" e "consumidores", assim como o Provider, mas com mais flexibilidade.

Para usar o Riverpod, adicione a dependência no seu arquivo pubspec.yaml:

dependencies:
  flutter_riverpod: ^1.0.0

Exemplo de Riverpod

Aqui está um exemplo simples de como usar o Riverpod:

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

final counterProvider = StateNotifierProvider((ref) {
  return CounterNotifier();
});

class CounterNotifier extends StateNotifier {
  CounterNotifier() : super(0);

  void increment() {
    state++;
  }
}

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod Example')),
        body: Center(
          child: Consumer(builder: (context, watch, child) {
            final count = watch(counterProvider);
            return Text('Count: $count');
          }),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read(counterProvider.notifier).increment(),
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Bloc

O Bloc (Business Logic Component) é uma abordagem para gerenciamento de estado que se baseia no padrão de design BLoC. Ele utiliza Streams para gerenciar o fluxo de dados entre a interface do usuário e a lógica de negócios, separando a lógica de apresentação da lógica de negócios.

Para usar o Bloc, adicione a dependência no seu arquivo pubspec.yaml:

dependencies:
  flutter_bloc: ^8.0.0

Exemplo de Bloc

Aqui está um exemplo simples de como usar o Bloc:

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

class CounterCubit extends Cubit {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bloc Example')),
        body: Center(
          child: BlocBuilder(
            builder: (context, count) {
              return Text('Count: $count');
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read().increment(),
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Conclusão

Neste artigo, discutimos três abordagens populares para gerenciamento de estado em Flutter: Provider, Riverpod e Bloc. Cada uma delas tem suas próprias características e benefícios. A escolha entre elas depende das necessidades específicas do seu projeto. Experimente cada uma delas e descubra qual se adapta melhor ao seu fluxo de trabalho.