Improve maps: dark mode support and better layout (0.4.0)

The Google Maps widget now has a proper spot in the app. This greatly enhances the usability of the map for locating a bus stop. Dark mode is also now supported on the map widget Bug fixes: - Search results now show the top result when the query is changed, as opposed to maintaining scroll position
jeffsieu · Nov 25, 2019 · 4b491a3 · 4b491a3
1 parent 8e311ee
commit 4b491a3
Show file tree

Hide file tree

Showing 5 changed files with 440 additions and 181 deletions.
diff --git a/assets/maps/map_style_dark.json b/assets/maps/map_style_dark.json
@@ -0,0 +1,161 @@
+[
+  {
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#242f3e"
+      }
+    ]
+  },
+  {
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#746855"
+      }
+    ]
+  },
+  {
+    "elementType": "labels.text.stroke",
+    "stylers": [
+      {
+        "color": "#242f3e"
+      }
+    ]
+  },
+  {
+    "featureType": "administrative.locality",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#d59563"
+      }
+    ]
+  },
+  {
+    "featureType": "poi",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#d59563"
+      }
+    ]
+  },
+  {
+    "featureType": "poi.park",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#263c3f"
+      }
+    ]
+  },
+  {
+    "featureType": "poi.park",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#6b9a76"
+      }
+    ]
+  },
+  {
+    "featureType": "road",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#38414e"
+      }
+    ]
+  },
+  {
+    "featureType": "road",
+    "elementType": "geometry.stroke",
+    "stylers": [
+      {
+        "color": "#212a37"
+      }
+    ]
+  },
+  {
+    "featureType": "road",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#9ca5b3"
+      }
+    ]
+  },
+  {
+    "featureType": "road.highway",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#746855"
+      }
+    ]
+  },
+  {
+    "featureType": "road.highway",
+    "elementType": "geometry.stroke",
+    "stylers": [
+      {
+        "color": "#1f2835"
+      }
+    ]
+  },
+  {
+    "featureType": "road.highway",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#f3d19c"
+      }
+    ]
+  },
+  {
+    "featureType": "transit",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#2f3948"
+      }
+    ]
+  },
+  {
+    "featureType": "transit.station",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#d59563"
+      }
+    ]
+  },
+  {
+    "featureType": "water",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#17263c"
+      }
+    ]
+  },
+  {
+    "featureType": "water",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#515c6d"
+      }
+    ]
+  },
+  {
+    "featureType": "water",
+    "elementType": "labels.text.stroke",
+    "stylers": [
+      {
+        "color": "#17263c"
+      }
+    ]
+  }
+]
diff --git a/lib/routes/home_page.dart b/lib/routes/home_page.dart
@@ -27,14 +27,14 @@ class StopsApp extends StatelessWidget {
           accentColor: Colors.deepOrangeAccent,
           brightness: Brightness.light,
           textTheme: TextTheme(
-              display1: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, letterSpacing: 3, color: Colors.orangeAccent),
-              headline: TextStyle(fontWeight: FontWeight.w300, fontSize: 28),
+            display1: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, letterSpacing: 3, color: Colors.deepOrangeAccent),
+            headline: TextStyle(fontWeight: FontWeight.w300, fontSize: 28),
           ),
         ),
         darkTheme: ThemeData(
           fontFamily: 'Source Sans Pro',
           primarySwatch: Colors.blue,
-          toggleableActiveColor: Colors.deepOrangeAccent,
+          toggleableActiveColor: Colors.orangeAccent,
           accentColor: Colors.orangeAccent,
           brightness: Brightness.dark,
           textTheme: TextTheme(
@@ -109,7 +109,8 @@ class _HomePageState extends BottomSheetPageState<HomePage> {
               Container(
                 padding: const EdgeInsets.only(
                     left: 16.0, top: 8.0, right: 8.0, bottom: 8.0),
-                child: Icon(Icons.search, color: Theme.of(context).hintColor)),
+                child: Icon(Icons.search, color: Theme.of(context).hintColor),
+              ),
               Expanded(
                 child: TextField(
                   enabled: false,
@@ -123,6 +124,11 @@ class _HomePageState extends BottomSheetPageState<HomePage> {
                   ),
                 ),
               ),
+              IconButton(
+                tooltip: 'Search on map',
+                icon: Icon(Icons.map, color: Theme.of(context).hintColor),
+                onPressed: _pushSearchRouteWithMap,
+              ),
             ],
           ),
         ),
@@ -212,14 +218,20 @@ class _HomePageState extends BottomSheetPageState<HomePage> {
   }
 
   Future<void> refreshLocation() async {
-    setState(() { });
+    setState(() {  });
   }
 
   void _pushSearchRoute() {
     busStopDetailSheet.rubberAnimationController.animateTo(to: busStopDetailSheet.rubberAnimationController.lowerBound);
     final Route<void> route = MaterialPageRoute<void>(builder: (BuildContext context) => SearchPage());
     Navigator.push(context, route);
   }
+
+  void _pushSearchRouteWithMap() {
+    busStopDetailSheet.rubberAnimationController.animateTo(to: busStopDetailSheet.rubberAnimationController.lowerBound);
+    final Route<void> route = MaterialPageRoute<void>(builder: (BuildContext context) => SearchPage(showMap: true));
+    Navigator.push(context, route);
+  }
 }
 
 class _NeverFocusNode extends FocusNode {