Mobile Development
Flutter
Subjective
Oct 03, 2025
Explain Flutter state management with BLoC pattern.
Detailed Explanation
BLoC (Business Logic Component) pattern:\n\n**Core Concepts:**\n• **Events** - User actions or system events\n• **States** - UI states based on business logic\n• **BLoC** - Processes events and emits states\n• **Streams** - Reactive data flow\n\n**Implementation:**\n\n// Events\nabstract class CounterEvent {}\nclass Increment extends CounterEvent {}\nclass Decrement extends CounterEvent {}\n\n// States\nabstract class CounterState {\n final int count;\n CounterState(this.count);\n}\nclass CounterInitial extends CounterState {\n CounterInitial() : super(0);\n}\nclass CounterUpdated extends CounterState {\n CounterUpdated(int count) : super(count);\n}\n\n// BLoC\nclass CounterBloc extends Bloc {\n CounterBloc() : super(CounterInitial()) {\n on((event, emit) {\n emit(CounterUpdated(state.count + 1));\n });\n \n on((event, emit) {\n emit(CounterUpdated(state.count - 1));\n });\n }\n}\n\n\n**UI Integration:**\n\nclass CounterPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return BlocProvider(\n create: (context) => CounterBloc(),\n child: BlocBuilder(\n builder: (context, state) {\n return Scaffold(\n body: Center(\n child: Text('${state.count}')\n ),\n floatingActionButton: FloatingActionButton(\n onPressed: () => context.read().add(Increment()),\n child: Icon(Icons.add)\n )\n );\n }\n )\n );\n }\n}\n\n\n**Benefits:**\n• Separation of concerns\n• Testable business logic\n• Reactive programming\n• Predictable state changes
Discussion (0)
No comments yet. Be the first to share your thoughts!
Share Your Thoughts