BLoC-mönstret med Streams
Lär dig BLoC-mönstret (Business Logic Component) i Flutter för att separera affärslogik från UI med events, states och streams.
BLoC-mönstret med Streams är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.
Vad är BLoC?
BLoC står för Business Logic Component. Det är ett mönster som håller affärslogiken borta från widgetarna genom att omvandla händelser till tillstånd via en ström.
- Användargränssnittet skickar in händelser
- BLoC bearbetar dem
- Nya tillstånd flödar tillbaka till användargränssnittet
Varför ännu ett mönster?
Du känner redan till setState, Provider och Riverpod. BLoC är särskilt användbart när logiken är komplex och du vill ha:
- Tydlig åtskillnad mellan användargränssnitt och logik
- Förutsägbara och testbara tillståndsövergångar
- Ett reaktivt, strömbaserat flöde
Repetition av streams
En Stream är en sekvens av asynkrona värden över tid. Med en StreamController kan du skicka värden och exponera dem som en ström.
final controller = StreamController<int>();
controller.stream.listen((value) => print(value));
controller.add(1);
controller.add(2);Händelser
En händelse är en oföränderlig klass som beskriver något användaren gjorde. Definiera händelser som vanliga Dart-klasser.
abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}Tillstånd
Ett tillstånd är en oföränderlig ögonblicksbild av vad användargränssnittet ska visa. Håll det enkelt och serialiserbart.
class CounterState {
final int count;
const CounterState(this.count);
}Bloc-klassen
Med paketet flutter_bloc mappar en Bloc händelser till tillstånd med hanterare av typen on<Event>.
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)));
}
}Tillhandahålla Bloc
Omslut en del av trädet med BlocProvider så att underordnade widgetar kan komma åt bloc-instansen.
BlocProvider(
create: (_) => CounterBloc(),
child: const CounterPage(),
);Reagera med BlocBuilder
BlocBuilder bygger om widgets varje gång ett nytt tillstånd skickas ut.
BlocBuilder<CounterBloc, CounterState>(
builder: (context, state) => Text('Count: ' + state.count.toString()),
);Skicka händelser
Skicka händelser till bloc med context.read<CounterBloc>().add(...).
FloatingActionButton(
onPressed: () => context.read<CounterBloc>().add(Increment()),
child: const Icon(Icons.add),
);BlocListener för sidoeffekter
Använd BlocListener för sidoeffekter som bara ska ske en gång, till exempel att visa en SnackBar eller navigera, när du inte vill bygga om gränssnittet.
BlocListener<CounterBloc, CounterState>(
listener: (context, state) {
if (state.count == 10) ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Reached 10!')),
);
},
child: child,
);Cubit: en enklare BLoC
Cubit tar bort händelser och tillhandahåller metoder direkt som anropar emit. Använd det när fullständiga händelseklasser känns överdrivna.
class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() => emit(state + 1);
}Snabbtest
Vilken widget ska du använda för att visa en SnackBar en gång utan att bygga om gränssnittet vid varje tillstånd?
Sammanfattning
Du har lärt dig BLoC-mönstret:
- Händelser in, tillstånd ut, via strömmar
- Bloc med hanterare för on<Event>, eller en enklare Cubit
- BlocProvider, BlocBuilder och BlocListener
BLoC ger en tydlig och testbar uppdelning mellan logik och gränssnitt i komplexa appar.
Lär dig Dart med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 22
- Lektioner
- 88
Vanliga frågor
Är lektionen ”BLoC-mönstret med Streams” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”BLoC-mönstret med Streams”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.
Vad lär jag mig i ”BLoC-mönstret med Streams”?
Lär dig BLoC-mönstret (Business Logic Component) i Flutter för att separera affärslogik från UI med events, states och streams. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?
Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”BLoC-mönstret med Streams”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?
Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- setState och InheritedWidget
- Grunderna i Provider-paketet
- Riverpod för state-hantering
- BLoC-mönstret med Streams