Show event information in bottom modal

android/app/build.gradle

@@ -47,8 +47,9 @@ android {
         applicationId "edu.furman.now"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 23
         targetSdkVersion flutter.targetSdkVersion
+        compileSdkVersion 33
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }

android/app/src/main/AndroidManifest.xml

@@ -34,4 +34,5 @@
 
     <!-- Permissions -->
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 </manifest>

lib/src/screens/events/index.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:furman_now/src/utils/date_range.dart';
 import 'package:furman_now/src/utils/theme.dart';
 import 'package:furman_now/src/widgets/header.dart';
-import 'package:furman_now/src/widgets/home/events/events_list.dart';
+import 'package:furman_now/src/widgets/events/events_list.dart';
 import 'package:furman_now/src/widgets/scroll_view_height.dart';
 import 'package:intl/intl.dart';
 

lib/src/screens/home/index.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:furman_now/src/utils/greeting.dart';
 import 'package:furman_now/src/utils/theme.dart';
 import 'package:furman_now/src/widgets/header.dart';
-import 'package:furman_now/src/widgets/home/events/events_list.dart';
+import 'package:furman_now/src/widgets/events/events_list.dart';
 import 'package:furman_now/src/widgets/home/restaurants/restaurants_list.dart';
 import 'package:furman_now/src/widgets/home/transportation/transportation_card.dart';
 import 'package:furman_now/src/widgets/scroll_view_height.dart';

lib/src/screens/map/index.dart

@@ -1,5 +1,8 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:furman_now/src/utils/theme.dart';
 import 'package:furman_now/src/widgets/map/filter_chip.dart';
@@ -22,6 +25,9 @@ class _MapScreenState extends State<MapScreen>
     vsync: this,
   );
 
+  late CenterOnLocationUpdate _centerOnLocationUpdate;
+  late StreamController<double?> _centerCurrentLocationStreamController;
+
   var _rotation = 0.0;
 
   @override
@@ -34,6 +40,8 @@ class _MapScreenState extends State<MapScreen>
         });
       }
     });
+    _centerOnLocationUpdate = CenterOnLocationUpdate.always;
+    _centerCurrentLocationStreamController = StreamController<double?>();
   }
 
   @override
@@ -89,6 +97,20 @@ class _MapScreenState extends State<MapScreen>
                     zoom: 15,
                     minZoom: 12,
                     maxZoom: 18,
+                    plugins: [
+                      LocationMarkerPlugin(
+                        centerCurrentLocationStream:
+                          _centerCurrentLocationStreamController.stream,
+                        centerOnLocationUpdate: _centerOnLocationUpdate,
+                      ),
+                    ],
+                    onPositionChanged: (MapPosition position, bool hasGesture) {
+                      if (hasGesture) {
+                        setState(
+                          () => _centerOnLocationUpdate = CenterOnLocationUpdate.never,
+                        );
+                      }
+                    },
                   ),
                   layers: [
                     TileLayerOptions(
@@ -96,6 +118,7 @@ class _MapScreenState extends State<MapScreen>
                           "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
                       userAgentPackageName: 'edu.furman.now',
                     ),
+                    LocationMarkerLayerOptions(),
                   ],
                   nonRotatedChildren: [
                     AttributionWidget(
@@ -111,6 +134,7 @@ class _MapScreenState extends State<MapScreen>
                     ),
                   ],
                 ),
+                // Rotation reset fab
                 Positioned(
                   top: 12,
                   left: 0,
@@ -177,6 +201,24 @@ class _MapScreenState extends State<MapScreen>
                     ),
                   ),
                 ),
+                Positioned(
+                  right: 20,
+                  bottom: 20,
+                  child: FloatingActionButton(
+                    onPressed: () {
+                      // Automatically center the location marker on the map when location updated until user interact with the map.
+                      setState(
+                        () => _centerOnLocationUpdate = CenterOnLocationUpdate.always,
+                      );
+                      // Center the location marker on the map and zoom the map to level 18.
+                      _centerCurrentLocationStreamController.add(16);
+                    },
+                    child: const Icon(
+                      Icons.my_location,
+                      color: Colors.white,
+                    ),
+                  )
+                )
               ],
             ),
           ),

lib/src/utils/theme.dart

@@ -8,6 +8,16 @@ ThemeData _baseTheme = ThemeData(
     unselectedItemColor: Colors.grey[500],
   ),
   textTheme: TextTheme(
+    headline1: TextStyle(
+      color: Colors.grey[800],
+      fontWeight: FontWeight.w900,
+      fontSize: 22,
+    ),
+    subtitle1: TextStyle(
+      color: Colors.grey[500],
+      fontWeight: FontWeight.w500,
+      fontSize: 16,
+    ),
     subtitle2: TextStyle(
       color: Colors.grey[500],
       fontWeight: FontWeight.w500,

lib/src/widgets/events/event_card.dart

@@ -0,0 +1,111 @@
+import 'package:flutter/material.dart';
+import 'package:furman_now/src/services/events/event.dart';
+import 'package:furman_now/src/utils/theme.dart';
+import 'package:furman_now/src/widgets/events/event_modal.dart';
+import 'package:intl/intl.dart';
+
+class EventCard extends StatelessWidget {
+  const EventCard
+    (
+      this.event,
+      {
+        Key? key
+      }
+    ) : super(key: key);
+
+  final Event event;
+
+  String get eventHour {
+    var formatter = DateFormat('hh:mm');
+    return formatter.format(event.time);
+  }
+
+  String get eventAmPm {
+    var formatter = DateFormat('a');
+    return formatter.format(event.time);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        showEventsModal(
+          context,
+          event,
+        );
+        // showModalBottomSheet<void>(
+        //     context: context,
+        //     builder: (BuildContext context) {
+        //       return EventModal(event: event);
+        //     }
+        // );
+      },
+      child: Container(
+        decoration: const BoxDecoration(
+          color: Color(0xfff9f9fb),
+          borderRadius: BorderRadius.all(Radius.circular(10))
+        ),
+        child: IntrinsicHeight(
+          child: Row(
+            children: [
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text(eventHour, style: furmanTextStyle(const TextStyle(fontWeight: FontWeight.w700))),
+                    Text(eventAmPm, style: Theme.of(context).textTheme.subtitle2),
+                  ],
+                ),
+              ),
+              VerticalDivider(
+                width: 2,
+                thickness: 2,
+                color: Colors.grey[200],
+              ),
+              Flexible(
+                child: Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(event.title, style: furmanTextStyle(const TextStyle(fontWeight: FontWeight.w600))),
+                      const SizedBox(height: 6),
+                      RichText(text: TextSpan(
+                        style: Theme.of(context).textTheme.subtitle2,
+                        children: [
+                          WidgetSpan(
+                            alignment: PlaceholderAlignment.middle,
+                            child: Padding(
+                              padding: const EdgeInsets.only(right: 5.0),
+                              child: Icon(Icons.place_outlined, size: 20, color: Colors.grey[500])
+                            ),
+                          ),
+                          TextSpan(text: event.location),
+                        ],
+                      )),
+                      const SizedBox(height: 2),
+                      RichText(text: TextSpan(
+                        style: Theme.of(context).textTheme.subtitle2,
+                        children: [
+                          WidgetSpan(
+                            alignment: PlaceholderAlignment.middle,
+                            child: Padding(
+                                padding: const EdgeInsets.only(left: 1.0, right: 6.0),
+                                child: Icon(Icons.sell_outlined, size: 18, color: Colors.grey[500])
+                            ),
+                          ),
+                          TextSpan(text: event.category),
+                        ],
+                      )),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/widgets/events/event_modal.dart

@@ -0,0 +1,245 @@
+import 'package:flutter/material.dart';
+import 'package:furman_now/src/services/events/event.dart';
+import 'package:furman_now/src/services/events/events_service.dart';
+import 'package:intl/intl.dart';
+
+void showEventsModal(BuildContext context, Event event) {
+  showModalBottomSheet(
+    context: context,
+    isScrollControlled: true,
+    backgroundColor: Colors.transparent,
+    builder: (context) {
+      return _EventModal(event: event);
+    },
+  );
+}
+
+class _EventModal extends StatefulWidget {
+  final Event event;
+
+  const _EventModal({
+    required this.event,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  State<_EventModal> createState() => _EventModalState();
+}
+
+class _EventModalState extends State<_EventModal> {
+  var childSize = Size.zero;
+  BoxConstraints? _parentConstraints;
+  final _key = GlobalKey();
+  
+  double _maxChildHeight = 0.75;
+
+  void updateMaxHeight() {
+    if (_parentConstraints != null) {
+      print(_key.currentContext?.size?.height);
+      var listHeight = _key.currentContext?.size?.height;
+      var parentHeight = _parentConstraints?.maxHeight;
+      if (listHeight != null && parentHeight != null) {
+        setState(() {
+          _maxChildHeight = (listHeight + 150) / parentHeight;
+        });
+      }
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance
+      .addPostFrameCallback((_) => updateMaxHeight());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () => Navigator.of(context).pop(),
+      child: Container(
+        color: const Color.fromRGBO(0, 0, 0, 0.001),
+        child: LayoutBuilder(
+          builder: (BuildContext context, BoxConstraints constraints) {
+            _parentConstraints = constraints;
+            return GestureDetector(
+              onTap: () {},
+              child: DraggableScrollableSheet(
+                  initialChildSize: _maxChildHeight,
+                  minChildSize: 0.1,
+                  maxChildSize: _maxChildHeight,
+                  builder: (_, controller) {
+                    return Container(
+                      color: Colors.grey.shade100,
+                      margin: const EdgeInsets.only(
+                          bottom: kBottomNavigationBarHeight),
+                      child: Column(
+                        children: [
+                          const Align(
+                            alignment: Alignment.topRight,
+                            child: CloseButton(),
+                          ),
+                          Flexible(
+                            child: NotificationListener<OverscrollIndicatorNotification>(
+                              onNotification: (OverscrollIndicatorNotification overscroll) {
+                                overscroll.disallowIndicator();
+                                return true;
+                              },
+                              child: _EventModalContent(
+                                key: _key,
+                                controller: controller,
+                                event: widget.event,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    );
+                  }
+              ),
+            );
+          }
+        ),
+      ),
+    );
+  }
+}
+
+class _EventModalContent extends StatelessWidget {
+  final ScrollController controller;
+  final Event event;
+
+  const _EventModalContent({
+    required this.controller,
+    required this.event,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView(
+      shrinkWrap: true,
+      padding: const EdgeInsets.symmetric(horizontal: 40),
+      controller: controller,
+      children: <Widget>[
+        // Title
+        Text(
+          event.title,
+          style: Theme.of(context).textTheme.headline1,
+        ),
+        const SizedBox(height: 10),
+        // Location
+        RichText(text: TextSpan(
+          style: Theme.of(context).textTheme.subtitle1,
+          children: [
+            WidgetSpan(
+              alignment: PlaceholderAlignment.middle,
+              child: Padding(
+                  padding: const EdgeInsets.only(right: 5.0),
+                  child: Icon(
+                      Icons.place_outlined, size: 24,
+                      color: Colors.grey[500])
+              ),
+            ),
+            TextSpan(text: event.location),
+          ],
+        )),
+        const SizedBox(height: 5),
+        if (event is ClpEvent) ...[
+          // Organization
+          RichText(text: TextSpan(
+            style: Theme.of(context).textTheme.subtitle1,
+            children: [
+              WidgetSpan(
+                alignment: PlaceholderAlignment.middle,
+                child: Padding(
+                    padding: const EdgeInsets.only(right: 5.0),
+                    child: Icon(
+                        Icons.group_outlined,
+                        size: 24,
+                        color: Colors.grey[500]
+                    ),
+                ),
+              ),
+              TextSpan(text: (event as ClpEvent).organization),
+            ],
+          )),
+          const SizedBox(height: 5),
+          // Time
+          RichText(text: TextSpan(
+            style: Theme.of(context).textTheme.subtitle1,
+            children: [
+              WidgetSpan(
+                alignment: PlaceholderAlignment.middle,
+                child: Padding(
+                    padding: const EdgeInsets.only(
+                        right: 5.0),
+                    child: Icon(
+                        Icons.access_time_outlined,
+                        size: 24,
+                        color: Colors.grey[500])
+                ),
+              ),
+              WidgetSpan(
+                  alignment: PlaceholderAlignment.top,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment
+                        .start,
+                    children: [
+                      Text(
+                        DateFormat("EEEE, MMMM d")
+                            .format(
+                            (event as ClpEvent)
+                                .startTime),
+                        style: Theme
+                            .of(context)
+                            .textTheme
+                            .subtitle1,
+                      ),
+                      Text(
+                        "${DateFormat.jm().format(
+                            (event as ClpEvent)
+                                .startTime)} - ${DateFormat
+                            .jm().format(
+                            (event as ClpEvent)
+                                .endTime)}",
+                        style: Theme
+                            .of(context)
+                            .textTheme
+                            .subtitle1,
+                      ),
+                    ],
+                  )
+              ),
+            ],
+          )),
+          const SizedBox(height: 5),
+          // Description
+          Row(
+            crossAxisAlignment: CrossAxisAlignment
+                .start,
+            children: [
+              Padding(
+                  padding: const EdgeInsets.only(
+                      right: 5.0),
+                  child: Icon(Icons.notes, size: 24,
+                      color: Colors
+                          .grey[500])
+              ),
+              Flexible(
+                child: Text(
+                  (event as ClpEvent)
+                      .description,
+                  style: Theme
+                      .of(context)
+                      .textTheme
+                      .subtitle1,
+                ),
+              ),
+            ],
+          ),
+        ]
+      ],
+    );
+  }
+}

lib/src/widgets/home/events/event_card.dart

@@ -1,97 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:furman_now/src/services/events/event.dart';
-import 'package:furman_now/src/utils/theme.dart';
-import 'package:google_fonts/google_fonts.dart';
-import 'package:intl/intl.dart';
-
-class EventCard extends StatelessWidget {
-  const EventCard
-    (
-      this.event,
-      {
-        Key? key
-      }
-    ) : super(key: key);
-
-  final Event event;
-
-  String get eventHour {
-    var formatter = DateFormat('hh:mm');
-    return formatter.format(event.time);
-  }
-
-  String get eventAmPm {
-    var formatter = DateFormat('a');
-    return formatter.format(event.time);
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      decoration: const BoxDecoration(
-        color: Color(0xfff9f9fb),
-        borderRadius: BorderRadius.all(Radius.circular(10))
-      ),
-      child: IntrinsicHeight(
-        child: Row(
-          children: [
-            Container(
-              padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Text(eventHour, style: furmanTextStyle(const TextStyle(fontWeight: FontWeight.w700))),
-                  Text(eventAmPm, style: Theme.of(context).textTheme.subtitle2),
-                ],
-              ),
-            ),
-            VerticalDivider(
-              width: 2,
-              thickness: 2,
-              color: Colors.grey[200],
-            ),
-            Flexible(
-              child: Container(
-                padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(event.title, style: furmanTextStyle(const TextStyle(fontWeight: FontWeight.w600))),
-                    const SizedBox(height: 6),
-                    RichText(text: TextSpan(
-                      style: Theme.of(context).textTheme.subtitle2,
-                      children: [
-                        WidgetSpan(
-                          alignment: PlaceholderAlignment.middle,
-                          child: Padding(
-                            padding: const EdgeInsets.only(right: 5.0),
-                            child: Icon(Icons.place_outlined, size: 20, color: Colors.grey[500])
-                          ),
-                        ),
-                        TextSpan(text: event.location),
-                      ],
-                    )),
-                    const SizedBox(height: 2),
-                    RichText(text: TextSpan(
-                      style: Theme.of(context).textTheme.subtitle2,
-                      children: [
-                        WidgetSpan(
-                          alignment: PlaceholderAlignment.middle,
-                          child: Padding(
-                              padding: const EdgeInsets.only(left: 1.0, right: 6.0),
-                              child: Icon(Icons.sell_outlined, size: 18, color: Colors.grey[500])
-                          ),
-                        ),
-                        TextSpan(text: event.category),
-                      ],
-                    )),
-                  ],
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}

pubspec.lock

@@ -146,6 +146,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_compass:
+    dependency: transitive
+    description:
+      name: flutter_compass
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.7.0"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -160,6 +167,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.2.0"
+  flutter_map_location_marker:
+    dependency: "direct main"
+    description:
+      name: flutter_map_location_marker
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.1.4"
   flutter_svg:
     dependency: "direct main"
     description:
@@ -172,6 +186,11 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
   frontend_server_client:
     dependency: transitive
     description:
@@ -179,6 +198,48 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.3"
+  geolocator:
+    dependency: transitive
+    description:
+      name: geolocator
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "9.0.1"
+  geolocator_android:
+    dependency: transitive
+    description:
+      name: geolocator_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.1.0"
+  geolocator_apple:
+    dependency: transitive
+    description:
+      name: geolocator_apple
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.2.1"
+  geolocator_platform_interface:
+    dependency: transitive
+    description:
+      name: geolocator_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.6"
+  geolocator_web:
+    dependency: transitive
+    description:
+      name: geolocator_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.6"
+  geolocator_windows:
+    dependency: transitive
+    description:
+      name: geolocator_windows
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.1"
   glob:
     dependency: transitive
     description:

pubspec.yaml

@@ -48,6 +48,7 @@ dependencies:
   palette_generator: ^0.3.3+2
   flutter_svg: ^1.1.4
   auto_route: ^5.0.1
+  flutter_map_location_marker: ^4.1.4
 
 dev_dependencies:
   flutter_test: