Flutter Mobile Development · Leçon

Modèle BLoC avec des flux

Apprenez le modèle BLoC (composant de logique métier) dans Flutter pour séparer la logique métier de l’interface utilisateur à l’aide d’événements, d’états et de flux.

Modèle BLoC avec des flux est une leçon Flutter Mobile Development gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Flutter Mobile Development, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Flutter Mobile Development comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Modèle BLoC avec des flux » est-elle gratuite ?

Oui — le texte complet de « Modèle BLoC avec des flux » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Flutter Mobile Development, passe à CoddyKit PRO. Le cours Flutter Mobile Development comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modèle BLoC avec des flux » ?

Apprenez le modèle BLoC (composant de logique métier) dans Flutter pour séparer la logique métier de l’interface utilisateur à l’aide d’événements, d’états et de flux. Tu pratiques Flutter Mobile Development avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Flutter Mobile Development ?

Aucune expérience préalable n'est requise. Flutter Mobile Development sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Modèle BLoC avec des flux » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Flutter Mobile Development ?

Oui. Chaque leçon Flutter Mobile Development inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Flutter Mobile Development