4. Theming

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,3 +1,4 @@
+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:flutter/material.dart';
@@ -8,11 +9,13 @@ class App extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final appTheme = AppTheme();
+
     return MaterialApp(
       title: 'Counter Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-      ),
+      theme: appTheme.light,
+      darkTheme: appTheme.dark,
+      themeMode: ThemeMode.system,
       home: CounterPage(counterRepository: counterRepository),
     );
   }

lib/src/core/theme/app.theme.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+
+class AppTheme {
+  // Light Mode
+  final Color primaryColor = Colors.black;
+  final Color scaffoldColor = const Color(0xfff5f5f5);
+  final Color headlineColor = const Color(0xff333333);
+
+  // Dark Mode
+  final Color primaryColorDark = Colors.white;
+  final Color scaffoldColorDark = const Color(0xff2a2a2a);
+  final Color headlineColorDark = const Color(0xffcdcdcd);
+
+  ThemeData get light {
+    return _buildTheme(isLightMode: true);
+  }
+
+  ThemeData get dark {
+    return _buildTheme(isLightMode: false);
+  }
+
+  ThemeData _buildTheme({bool isLightMode = true}) {
+    final ThemeData base = isLightMode ? ThemeData.light() : ThemeData.dark();
+    final currentPrimaryColor = isLightMode ? primaryColor : primaryColorDark;
+    final currentHeadlineColor = isLightMode ? headlineColor : headlineColorDark;
+
+    return base.copyWith(
+      brightness: isLightMode ? Brightness.light : Brightness.dark,
+      useMaterial3: true,
+      primaryColor: currentPrimaryColor,
+      scaffoldBackgroundColor: isLightMode ? scaffoldColor : scaffoldColorDark,
+      appBarTheme: base.appBarTheme.copyWith(
+        backgroundColor: Colors.transparent,
+        foregroundColor: currentPrimaryColor,
+        titleTextStyle: TextStyle(
+          fontSize: 22,
+          fontWeight: FontWeight.bold,
+          color: currentPrimaryColor,
+        ),
+      ),
+      outlinedButtonTheme: OutlinedButtonThemeData(
+        style: OutlinedButton.styleFrom(
+          side: BorderSide(width: 2.0, color: currentHeadlineColor),
+          foregroundColor: currentHeadlineColor,
+        ),
+      ),
+      textTheme: base.textTheme.copyWith(
+        headlineLarge: TextStyle(
+          fontFamily: 'VarelaRound',
+          color: currentHeadlineColor,
+          fontSize: 160,
+        ),
+      ),
+    );
+  }
+}

lib/src/core/utils/color.util.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+class ColorUtil {
+  static bool isLightMode(ThemeData theme) {
+    return theme.brightness == Brightness.light;
+  }
+
+  static bool isDarkMode(ThemeData theme) {
+    return theme.brightness == Brightness.dark;
+  }
+
+  static Color blackOrWhiteText(Color backgroundColor) {
+    return backgroundColor.computeLuminance() > 0.5 ? Colors.black : Colors.white;
+  }
+
+  static dynamic generateMaterialColor(int primaryColorInt, Color primaryColor) {
+    return MaterialColor(primaryColorInt, {
+      50: primaryColor.withOpacity(.1),
+      100: primaryColor.withOpacity(.2),
+      200: primaryColor.withOpacity(.3),
+      300: primaryColor.withOpacity(.4),
+      400: primaryColor.withOpacity(.5),
+      500: primaryColor.withOpacity(.6),
+      600: primaryColor.withOpacity(.7),
+      700: primaryColor.withOpacity(.8),
+      800: primaryColor.withOpacity(.9),
+      900: primaryColor.withOpacity(1),
+    });
+  }
+}

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

@@ -13,4 +13,11 @@ class CounterController {
     counterModel.value += 1;
     counterRepository.updateCounter(counterModel: counterModel);
   }
+
+  Future<void> decrement() async {
+    if (counterModel.value > 0) {
+      counterModel.value -= 1;
+      counterRepository.updateCounter(counterModel: counterModel);
+    }
+  }
 }

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

@@ -24,30 +24,69 @@ class _CounterPageState extends State<CounterPage> {
     });
   }
 
+  void _decrementCounter() {
+    setState(() {
+      counterController.decrement();
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     return Scaffold(
+      extendBodyBehindAppBar: true,
       appBar: AppBar(
         title: const Text('Counter Page'),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
-            const Text(
-              'You have pushed the button this many times:',
-            ),
             Text(
               '${counterController.counterModel.value}',
-              style: Theme.of(context).textTheme.headline4,
+              style: theme.textTheme.headlineLarge,
+            ),
+          ],
+        ),
+      ),
+      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: _decrementCounter,
+            ),
+            _CustomCircularButton(
+              icon: Icons.add,
+              onPressed: _incrementCounter,
             ),
           ],
         ),
       ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.add),
+    );
+  }
+}
+
+class _CustomCircularButton extends StatelessWidget {
+  const _CustomCircularButton({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,
       ),
     );
   }