Flutter Mobile Development · Aula

Padrão BLoC com Streams

Aprenda o padrão BLoC (Componente de Lógica de Negócios) no Flutter para separar a lógica de negócios da interface do usuário usando eventos, estados e fluxos.

Padrão BLoC com Streams é uma aula grátis de Flutter Mobile Development no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Flutter Mobile Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Flutter Mobile Development inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

What Is BLoC?

BLoC stands for Business Logic Component. It is a pattern that keeps your business logic out of widgets by turning events into states through a stream.

UI sends events in
BLoC processes them
New states flow back out to the UI

Why Another Pattern?

You already know setState, Provider, and Riverpod. BLoC shines when logic is complex and you want:

Clear separation of UI and logic
Predictable, testable state transitions
A reactive stream-based flow

Streams Refresher

A Stream is a sequence of asynchronous values over time. A StreamController lets you push values and expose them as a stream.

final controller = StreamController<int>();
controller.stream.listen((value) => print(value));
controller.add(1);
controller.add(2);

Events

An event is an immutable class describing something the user did. Define them as plain Dart classes.

abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}

States

A state is an immutable snapshot of what the UI should show. Keep it simple and serializable.

class CounterState {
  final int count;
  const CounterState(this.count);
}

The Bloc Class

Using the flutter_bloc package, a Bloc maps events to states with on<Event> handlers.

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterState(0)) {
    on<Increment>((e, emit) => emit(CounterState(state.count + 1)));
    on<Decrement>((e, emit) => emit(CounterState(state.count - 1)));
  }
}

Providing the Bloc

Wrap part of the tree in BlocProvider so descendants can access the bloc.

BlocProvider(
  create: (_) => CounterBloc(),
  child: const CounterPage(),
);

Reacting with BlocBuilder

BlocBuilder rebuilds widgets whenever a new state is emitted.

BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) => Text('Count: ' + state.count.toString()),
);

Dispatching Events

Send events to the bloc with context.read<CounterBloc>().add(...).

FloatingActionButton(
  onPressed: () => context.read<CounterBloc>().add(Increment()),
  child: const Icon(Icons.add),
);

BlocListener for Side Effects

Use BlocListener for one-time side effects like showing a SnackBar or navigating, where you do not want to rebuild UI.

BlocListener<CounterBloc, CounterState>(
  listener: (context, state) {
    if (state.count == 10) ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Reached 10!')),
    );
  },
  child: child,
);

Cubit: A Lighter BLoC

A Cubit drops events and exposes methods directly that call emit. Use it when full event classes feel like overkill.

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
}

Quick Check

Which widget should you use to trigger a one-time SnackBar without rebuilding UI on every state?

Recap

You learned the BLoC pattern:

Events in, states out, via streams
Bloc with on<Event> handlers, or a lighter Cubit
BlocProvider, BlocBuilder and BlocListener

BLoC gives you clean, testable separation of logic and UI for complex apps.

Perguntas Frequentes

A aula “Padrão BLoC com Streams” é grátis?

Sim — o texto completo de “Padrão BLoC com Streams” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Flutter Mobile Development, atualize para CoddyKit PRO. O curso de Flutter Mobile Development inclui 4 aulas no total.

O que vou aprender em “Padrão BLoC com Streams”?

Aprenda o padrão BLoC (Componente de Lógica de Negócios) no Flutter para separar a lógica de negócios da interface do usuário usando eventos, estados e fluxos. Você pratica Flutter Mobile Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Flutter Mobile Development?

Nenhuma experiência prévia é necessária. Flutter Mobile Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Padrão BLoC com Streams”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Flutter Mobile Development?

Sim. Cada aula de Flutter Mobile Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Flutter Mobile Development