feat: Add datetime pickers separately. #1

README.md

@@ -206,3 +206,5 @@ Now we're ready to rock 🎸!
 
 ## 2. `Material` Date/Time Pickers
 
+
+

lib/main.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+import 'material.dart';
+
 void main() => runApp(const App());
 
 /// App class
@@ -27,10 +29,7 @@ class _HomePageState extends State<HomePage> {
 
   /// List of pages
   final List<Widget> _pages = <Widget>[
-    const Text(
-      'Material widget',
-      style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
-    ),
+    const MaterialExamplePage(),
     const Text(
       'Inline widget',
       style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),

lib/material.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+class MaterialExamplePage extends StatefulWidget {
+  const MaterialExamplePage({super.key});
+
+  @override
+  State<MaterialExamplePage> createState() => _MaterialExamplePageState();
+}
+
+class _MaterialExamplePageState extends State<MaterialExamplePage> {
+  DateTime dateTime = DateTime.now();
+
+  Future<DateTime?> pickDate() => showDatePicker(context: context, initialDate: dateTime, firstDate: DateTime(1900), lastDate: DateTime(2100));
+
+  Future<TimeOfDay?> pickTime() => showTimePicker(context: context, initialTime: TimeOfDay(hour: dateTime.hour, minute: dateTime.minute));
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Padding(
+        padding: const EdgeInsets.only(right: 8.0, left: 8.0),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Text(
+                  DateFormat('yyyy-MM-dd').format(dateTime),
+                  style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
+                ),
+                Text(
+                  DateFormat(' kk:mm').format(dateTime),
+                  style: const TextStyle(fontSize: 30),
+                ),
+              ],
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 16.0),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: [
+                  ElevatedButton(
+                      child: const Text("Date", style: TextStyle(fontSize: 20),),
+                      onPressed: () async {
+                        final newDate = await pickDate();
+                        if (newDate == null) return; // person pressed 'CANCEL'
+
+                        // 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,
+                        );
+                      }),
+                  ElevatedButton(
+                      child: const Text("Time", style: TextStyle(fontSize: 20),),
+                      onPressed: () async {
+                        final newTime = await pickTime();
+                        if (newTime == null) return; // person pressed 'CANCEL'
+
+                        // 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,
+                        );
+                      })
+                ],
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

pubspec.lock

@@ -75,6 +75,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  intl:
+    dependency: "direct main"
+    description:
+      name: intl
+      sha256: "3bc132a9dbce73a7e4a21a17d06e1878839ffbf975568bc875c60537824b0c4d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.18.1"
   js:
     dependency: transitive
     description:

pubspec.yaml

@@ -35,6 +35,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
+  intl: ^0.18.1
 
 dev_dependencies:
   flutter_test: