BLoC-mønstret med Streams
Lær BLoC-mønstret (Business Logic Component) i Flutter for at adskille forretningslogik fra brugergrænsefladen ved hjælp af events, states og streams.
BLoC-mønstret med Streams er en gratis Mobiludvikling med Flutter-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Mobiludvikling med Flutter, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.
Hvad er BLoC?
BLoC står for Business Logic Component. Det er et mønster, der holder forretningslogikken ude af widgets ved at omdanne hændelser til tilstande gennem et stream.
- Brugergrænsefladen sender hændelser ind
- BLoC behandler dem
- Nye tilstande flyder tilbage til brugergrænsefladen
Hvorfor endnu et mønster?
Du kender allerede setState, Provider og Riverpod. BLoC er særligt nyttigt, når logikken er kompleks, og du ønsker:
- En tydelig adskillelse mellem brugergrænseflade og logik
- Forudsigelige tilstandsovergange, der kan testes
- Et reaktivt, stream-baseret flow
Genopfriskning af streams
En Stream er en sekvens af asynkrone værdier over tid. En StreamController lader dig sende værdier og eksponere dem som en stream.
final controller = StreamController<int>();
controller.stream.listen((value) => print(value));
controller.add(1);
controller.add(2);Hændelser
En hændelse er en uforanderlig klasse, der beskriver noget, brugeren har gjort. Definér dem som almindelige Dart-klasser.
abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}Tilstande
En tilstand er et uforanderligt øjebliksbillede af det, brugergrænsefladen skal vise. Hold den enkel og serialiserbar.
class CounterState {
final int count;
const CounterState(this.count);
}Bloc-klassen
Med pakken flutter_bloc knytter en Bloc hændelser til tilstande med on<Event>-håndteringer.
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)));
}
}Tilvejebringelse af Bloc
Pak en del af træet ind i BlocProvider, så efterkommere kan få adgang til bloc'en.
BlocProvider(
create: (_) => CounterBloc(),
child: const CounterPage(),
);Reaktion med BlocBuilder
BlocBuilder genopbygger widgets, hver gang der udsendes en ny tilstand.
BlocBuilder<CounterBloc, CounterState>(
builder: (context, state) => Text('Count: ' + state.count.toString()),
);Afsendelse af hændelser
Send hændelser til bloc med context.read<CounterBloc>().add(...).
FloatingActionButton(
onPressed: () => context.read<CounterBloc>().add(Increment()),
child: const Icon(Icons.add),
);BlocListener til sideeffekter
Brug BlocListener til sideeffekter, der kun sker én gang, f.eks. visning af en SnackBar eller navigation, når brugergrænsefladen ikke skal genopbygges.
BlocListener<CounterBloc, CounterState>(
listener: (context, state) {
if (state.count == 10) ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Reached 10!')),
);
},
child: child,
);Cubit: en lettere BLoC
En Cubit dropper hændelser og stiller i stedet metoder direkte til rådighed, som kalder emit. Brug den, når komplette hændelsesklasser virker unødvendige.
class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() => emit(state + 1);
}Hurtigt tjek
Hvilken widget skal du bruge til at udløse en SnackBar én gang uden at genopbygge brugergrænsefladen ved hver tilstand?
Opsummering
Du har lært BLoC-mønsteret:
- Hændelser ind, tilstande ud via streams
- Bloc med on<Event>-håndteringer eller en lettere Cubit
- BlocProvider, BlocBuilder og BlocListener
BLoC giver en ren og testbar adskillelse mellem logik og brugergrænseflade i komplekse apps.
Lær Dart med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 22
- Lektioner
- 88
Ofte stillede spørgsmål
Er lektionen “BLoC-mønstret med Streams” gratis?
Ja — alle 3 lektioner i læringssporet Mobiludvikling med Flutter, inklusive “BLoC-mønstret med Streams”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “BLoC-mønstret med Streams”?
Lær BLoC-mønstret (Business Logic Component) i Flutter for at adskille forretningslogik fra brugergrænsefladen ved hjælp af events, states og streams. Du øver dig i Mobiludvikling med Flutter med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Mobiludvikling med Flutter?
Der kræves ingen tidligere erfaring. Mobiludvikling med Flutter på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “BLoC-mønstret med Streams”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Mobiludvikling med Flutter-lektion?
Ja. Alle Mobiludvikling med Flutter-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- setState og InheritedWidget
- Grundlæggende om Provider-pakken
- Riverpod til statehåndtering
- BLoC-mønstret med Streams