5.3 State-Management: BLoC

ios/Runner.xcodeproj/project.pbxproj

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 50;
+	objectVersion = 54;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -171,10 +171,12 @@
 /* Begin PBXShellScriptBuildPhase section */
 		3B06AD1E1E4923F5004D2608 /* Thin Binary */ = {
 			isa = PBXShellScriptBuildPhase;
+			alwaysOutOfDate = 1;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputPaths = (
+				"${TARGET_BUILD_DIR}/${INFOPLIST_PATH}",
 			);
 			name = "Thin Binary";
 			outputPaths = (
@@ -185,6 +187,7 @@
 		};
 		9740EEB61CF901F6004384FC /* Run Script */ = {
 			isa = PBXShellScriptBuildPhase;
+			alwaysOutOfDate = 1;
 			buildActionMask = 2147483647;
 			files = (
 			);

lib/src/app.dart

@@ -1,22 +1,42 @@
 import 'package:counter_workshop/src/core/theme/app.theme.dart';
 import 'package:counter_workshop/src/features/counter/data/repositories/counter.repository.dart';
-import 'package:counter_workshop/src/features/counter/presentation/counter.page.dart';
+import 'package:counter_workshop/src/features/counter/presentation/view/counter.page.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
 class App extends StatelessWidget {
   const App({required this.counterRepository, super.key});
   final CounterRepository counterRepository;
 
   @override
   Widget build(BuildContext context) {
-    final appTheme = AppTheme();
+    return MultiRepositoryProvider(
+      providers: [
+        RepositoryProvider(create: (_) => counterRepository),
+      ],
+      child: const AppView(),
+    );
+    return RepositoryProvider.value(
+      value: counterRepository,
+      child: const AppView(),
+    );
+  }
+}
 
+class AppView extends StatelessWidget {
+  const AppView({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final appTheme = AppTheme();
     return MaterialApp(
       title: 'Counter Demo',
       theme: appTheme.light,
       darkTheme: appTheme.dark,
       themeMode: ThemeMode.system,
-      home: CounterPage(counterRepository: counterRepository),
+      home: const CounterPage(),
     );
   }
 }

lib/src/features/counter/presentation/bloc/counter.bloc.dart

@@ -0,0 +1,32 @@
+import 'package:counter_workshop/src/features/counter/data/repositories/counter.repository.dart';
+import 'package:counter_workshop/src/features/counter/presentation/bloc/counter.event.dart';
+import 'package:counter_workshop/src/features/counter/presentation/bloc/counter.state.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class CounterBloc extends Bloc<CounterEvent, CounterState> {
+  final CounterRepository counterRepository;
+
+  CounterBloc({required this.counterRepository})
+      : super(const CounterState(value: 0)) {
+    on<CounterIncrementPressed>(_onIncrement);
+    on<CounterDecrementPressed>(_onDecrement);
+    on<CounterReset>(_onCounterReset);
+  }
+
+  void _onIncrement(CounterIncrementPressed event, Emitter<CounterState> emit) {
+    debugPrint('INCREMENT: ${state.value.toString()}');
+    emit(CounterState(value: state.value + 1));
+  }
+
+  void _onDecrement(CounterDecrementPressed event, Emitter<CounterState> emit) {
+    debugPrint('DECREMENT: ${state.value.toString()}');
+    if (state.value > 0) {
+      emit(CounterState(value: state.value - 1));
+    }
+  }
+
+  void _onCounterReset(CounterReset event, Emitter<CounterState> emit) {
+    emit(const CounterState(value: 0));
+  }
+}

lib/src/features/counter/presentation/bloc/counter.event.dart

@@ -0,0 +1,14 @@
+import 'package:equatable/equatable.dart';
+
+abstract class CounterEvent extends Equatable {
+  @override
+  List<Object> get props => [];
+}
+
+/// Notifies bloc to increment state.
+class CounterIncrementPressed extends CounterEvent {}
+
+/// Notifies bloc to decrement state.
+class CounterDecrementPressed extends CounterEvent {}
+
+class CounterReset extends CounterEvent {}

lib/src/features/counter/presentation/bloc/counter.state.dart

@@ -0,0 +1,9 @@
+import 'package:equatable/equatable.dart';
+
+class CounterState extends Equatable {
+  const CounterState({required this.value});
+  final int value;
+
+  @override
+  List<Object?> get props => [value];
+}

lib/src/features/counter/presentation/view/counter.page.dart

@@ -0,0 +1,66 @@
+import 'package:counter_workshop/src/features/counter/data/repositories/counter.repository.dart';
+import 'package:counter_workshop/src/features/counter/presentation/bloc/counter.bloc.dart';
+import 'package:counter_workshop/src/features/counter/presentation/bloc/counter.event.dart';
+import 'package:counter_workshop/src/features/counter/presentation/view/widgets/counter_text.widget.dart';
+import 'package:counter_workshop/src/features/counter/presentation/view/widgets/custom_circular_button.widget.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+/// bloc
+class CounterPage extends StatelessWidget {
+  const CounterPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final counterRepository = context.read<CounterRepository>();
+    return BlocProvider(
+        create: (_) => CounterBloc(counterRepository: counterRepository),
+        child: const _CounterView());
+  }
+}
+
+/// actual counter page
+class _CounterView extends StatelessWidget {
+  const _CounterView();
+
+  @override
+  Widget build(BuildContext context) {
+    final counterBloc = context.read<CounterBloc>();
+
+    return Scaffold(
+      extendBodyBehindAppBar: true,
+      appBar: AppBar(
+        title: const Text('Counter Page'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: const [
+            CounterText(),
+          ],
+        ),
+      ),
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
+      floatingActionButton: Container(
+        padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 40.0),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: <Widget>[
+            CustomCircularButton(
+              icon: Icons.remove,
+              onPressed: () => counterBloc.add(CounterDecrementPressed()),
+            ),
+            CustomCircularButton(
+              icon: Icons.reset_tv,
+              onPressed: () => counterBloc.add(CounterReset()),
+            ),
+            CustomCircularButton(
+              icon: Icons.add,
+              onPressed: () => counterBloc.add(CounterIncrementPressed()),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/src/features/counter/presentation/view/widgets/counter_text.widget.dart

@@ -0,0 +1,17 @@
+import 'package:counter_workshop/src/features/counter/presentation/bloc/counter.bloc.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class CounterText extends StatelessWidget {
+  const CounterText({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final counterValue = context.select((CounterBloc bloc) => bloc.state.value);
+    return Text(
+      '$counterValue',
+      style: theme.textTheme.headlineLarge,
+    );
+  }
+}

lib/src/features/counter/presentation/view/widgets/custom_circular_button.widget.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+class CustomCircularButton extends StatelessWidget {
+  const CustomCircularButton({super.key, required this.icon, this.onPressed});
+
+  final IconData icon;
+  final Function()? onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return OutlinedButton(
+      style: OutlinedButton.styleFrom(
+        shape: const CircleBorder(),
+        padding: const EdgeInsets.all(15),
+      ),
+      onPressed: onPressed,
+      child: Icon(
+        icon,
+        size: 50,
+      ),
+    );
+  }
+}