feat: Add increasing counter. #1

Author: LuchoTurtle

README.md

@@ -27,6 +27,7 @@
     - [2.3 Forcing `24-hour` type input in `TimePicker`](#23-forcing-24-hour-type-input-in-timepicker)
   - [3. (Option 2) `Cupertino` Pickers](#3-option-2-cupertino-pickers)
     - [3.1 Fixing scrolling behaviour on `Flutter Web`](#31-fixing-scrolling-behaviour-on-flutter-web)
+  - [4. (Optional) Number of times the `dateTime` field has been updated](#4-optional-number-of-times-the-datetime-field-has-been-updated)
 
 
 # Why? 🤷‍
@@ -772,3 +773,79 @@ If you run the app in your browser,
 it should work properly now! 😀
 
 
+## 4. (Optional) Number of times the `dateTime` field has been updated
+
+In our specific case,
+for analytical purposes,
+we are interested in knowing 
+*how many times a person has updated their timers*.
+This feedback can be used to better understand 
+how people are using our app and how to make it *better*.
+
+Let's implement a simple timer to show this is easy to add!
+In a real-world scenario, 
+you'd make an API call instead of doing everything locally.
+We're doing so for simplification purposes.
+
+We'll implement this on the `Material` page,
+since the same procedure occurs in the `Cupertino` one, as well.
+
+Go to `lib/material.dart`
+and add a new `counter` field.
+
+```dart
+  int counter = 0;
+```
+
+Inside the `Column` `child` parameter,
+add this new widget on top of the array.
+
+```dart
+  child: Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+
+      // Add this
+      Padding(
+        padding: const EdgeInsets.only(bottom: 32.0),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              "You've updated this $counter time(s).",
+              style: const TextStyle(fontSize: 25),
+            ),
+          ],
+        ),
+      ),
+
+      //...
+    ]
+  )
+```
+
+We are simply adding a text that shows the current `counter` value.
+
+Next, all we need to do now 
+is to change every `setState` instance
+(where the `dateTime` field is being updated)
+to **increment this counter**.
+
+```dart
+    setState(() {
+      dateTime = newDateTime;
+      counter = counter + 1;
+    });
+```
+
+And you're all done! 😎
+
+Super easy, right?
+
+<p align='center'>
+    <img width="250" src="https://github.com/dwyl/flutter-date-time-tutorial/assets/17494745/dd12cbf8-7a94-4d5a-bb52-7bb0f2e1787d">
+</p>
+
+
+
+

lib/material.dart

@@ -16,6 +16,7 @@ class MaterialExamplePage extends StatefulWidget {
 
 class _MaterialExamplePageState extends State<MaterialExamplePage> {
   DateTime dateTime = DateTime.now();
+  int counter = 0;
 
   /// Opens date picker and returns possible `DateTime` object.
   Future<DateTime?> pickDate() => showDatePicker(context: context, initialDate: dateTime, firstDate: DateTime(1900), lastDate: DateTime(2100));
@@ -41,9 +42,10 @@ class _MaterialExamplePageState extends State<MaterialExamplePage> {
 
     // Update datetime object that's shown with new date
     final newDateTime = DateTime(date.year, date.month, date.day, time.hour, time.minute);
-    setState(
-      () => dateTime = newDateTime,
-    );
+    setState(() {
+      dateTime = newDateTime;
+      counter = counter + 1;
+    });
   }
 
   @override
@@ -54,6 +56,18 @@ class _MaterialExamplePageState extends State<MaterialExamplePage> {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
+            Padding(
+              padding: const EdgeInsets.only(bottom: 32.0),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(
+                    "You've updated this $counter time(s).",
+                    style: const TextStyle(fontSize: 25),
+                  ),
+                ],
+              ),
+            ),
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
@@ -85,9 +99,10 @@ class _MaterialExamplePageState extends State<MaterialExamplePage> {
 
                         // Update datetime object that's shown with new date
                         final newDateTime = DateTime(newDate.year, newDate.month, newDate.day, dateTime.hour, dateTime.minute);
-                        setState(
-                          () => dateTime = newDateTime,
-                        );
+                        setState(() {
+                          dateTime = newDateTime;
+                          counter = counter + 1;
+                        });
                       }),
                   ElevatedButton(
                       key: materialTimeButtonKey,
@@ -102,9 +117,10 @@ class _MaterialExamplePageState extends State<MaterialExamplePage> {
 
                         // Update datetime object that's shown with new time
                         final newDateTime = DateTime(dateTime.year, dateTime.month, dateTime.day, newTime.hour, newTime.minute);
-                        setState(
-                          () => dateTime = newDateTime,
-                        );
+                        setState(() {
+                          dateTime = newDateTime;
+                          counter = counter + 1;
+                        });
                       })
                 ],
               ),