Add web support to place_tracker (#550)

* enable web for place_tracker * add place_tracker symlink * add generated_plugin_registrant.dart * update google_maps_flutter_web to fix pins not showing * add place_tracker to peanut.yaml * upgrade place_tracker dep * use a 32 pixel square * Apply zoom to selected category when the PlaceMapState updates. This fixes a grey screen issue in web, after saving a place. * pub upgrade * run pub upgrade * use published versions of packages * remove lib/generated_plugin_registrant.dart * add newline * add web API key to README Co-authored-by: David Iglesias Teixeira <ditman@gmail.com>
2025-11-08 13:58:47 +00:00 · 2020-09-23 11:06:25 -07:00
parent 5e6eb5dbec
commit 2236f122b4
12 changed files with 166 additions and 28 deletions
--- a/place_tracker/.gitignore
+++ b/place_tracker/.gitignore
@@ -69,3 +69,6 @@
 !**/ios/**/default.pbxuser
 !**/ios/**/default.perspectivev3
 !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
+
+# Flutter Web files
+lib/generated_plugin_registrant.dart
--- a/place_tracker/README.md
+++ b/place_tracker/README.md
@@ -61,6 +61,13 @@ Specify your API key in `AppDelegate.swift`:
 }
 ```

+### Web
+Add your API key to `web/index.html` in the `<head>` tag:
+
+```
+<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY_HERE>"></script>
+```
+
 For additional help setting up the plugin, see the plugin's
 [README](https://pub.dev/packages/google_maps_flutter)
 page.
--- a/place_tracker/lib/place_map.dart
+++ b/place_tracker/lib/place_map.dart
@@ -15,6 +15,7 @@ class MapConfiguration {
  final List<Place> places;

  final PlaceCategory selectedCategory;
+
  const MapConfiguration({
    @required this.places,
    @required this.selectedCategory,
@@ -133,7 +134,21 @@ class PlaceMapState extends State<PlaceMap> {
    });

    // Zoom to fit the initially selected category.
-    await _zoomToFitPlaces(
+    _zoomToFitSelectedCategory();
+  }
+
+  @override
+  void didUpdateWidget(PlaceMap oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    // Zoom to fit the selected category.
+    if (mounted) {
+      _zoomToFitSelectedCategory();
+    }
+  }
+
+  /// Applies zoom to fit the places of the selected category
+  void _zoomToFitSelectedCategory() {
+    _zoomToFitPlaces(
      _getPlacesForCategory(
        Provider.of<AppState>(context, listen: false).selectedCategory,
        _markedPlaces.values.toList(),
@@ -414,11 +429,13 @@ class PlaceMapState extends State<PlaceMap> {
    switch (category) {
      case PlaceCategory.favorite:
        return BitmapDescriptor.fromAssetImage(
-            createLocalImageConfiguration(context), 'assets/heart.png');
+            createLocalImageConfiguration(context, size: Size.square(32)),
+            'assets/heart.png');
        break;
      case PlaceCategory.visited:
        return BitmapDescriptor.fromAssetImage(
-            createLocalImageConfiguration(context), 'assets/visited.png');
+            createLocalImageConfiguration(context, size: Size.square(32)),
+            'assets/visited.png');
        break;
      case PlaceCategory.wantToGo:
      default:
@@ -437,6 +454,7 @@ class _AddPlaceButtonBar extends StatelessWidget {

  final VoidCallback onSavePressed;
  final VoidCallback onCancelPressed;
+
  const _AddPlaceButtonBar({
    Key key,
    @required this.visible,
--- a/place_tracker/pubspec.lock
+++ b/place_tracker/pubspec.lock
@@ -7,42 +7,42 @@ packages:
      name: async
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "2.4.2"
+    version: "2.5.0-nullsafety"
  boolean_selector:
    dependency: transitive
    description:
      name: boolean_selector
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "2.0.0"
+    version: "2.1.0-nullsafety"
  characters:
    dependency: transitive
    description:
      name: characters
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.0.0"
+    version: "1.1.0-nullsafety.2"
  charcode:
    dependency: transitive
    description:
      name: charcode
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.1.3"
+    version: "1.2.0-nullsafety"
  clock:
    dependency: transitive
    description:
      name: clock
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.0.1"
+    version: "1.1.0-nullsafety"
  collection:
    dependency: transitive
    description:
      name: collection
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.14.13"
+    version: "1.15.0-nullsafety.2"
  convert:
    dependency: transitive
    description:
@@ -57,6 +57,13 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "2.1.5"
+  csslib:
+    dependency: transitive
+    description:
+      name: csslib
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.16.2"
  cupertino_icons:
    dependency: "direct main"
    description:
@@ -70,7 +77,7 @@ packages:
      name: fake_async
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.1.0"
+    version: "1.1.0-nullsafety"
  flutter:
    dependency: "direct main"
    description: flutter
@@ -82,19 +89,31 @@ packages:
      name: flutter_plugin_android_lifecycle
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.0.8"
+    version: "1.0.9"
  flutter_test:
    dependency: "direct dev"
    description: flutter
    source: sdk
    version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  google_maps:
+    dependency: transitive
+    description:
+      name: google_maps
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.4.5"
  google_maps_flutter:
    dependency: "direct main"
    description:
      name: google_maps_flutter
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "0.5.30"
+    version: "0.5.32"
  google_maps_flutter_platform_interface:
    dependency: transitive
    description:
@@ -102,20 +121,41 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "1.0.4"
+  google_maps_flutter_web:
+    dependency: "direct main"
+    description:
+      name: google_maps_flutter_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.0+2"
+  html:
+    dependency: transitive
+    description:
+      name: html
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.14.0+3"
+  js_wrapping:
+    dependency: transitive
+    description:
+      name: js_wrapping
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.5.0"
  matcher:
    dependency: transitive
    description:
      name: matcher
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "0.12.8"
+    version: "0.12.10-nullsafety"
  meta:
    dependency: transitive
    description:
      name: meta
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.1.8"
+    version: "1.3.0-nullsafety.2"
  nested:
    dependency: transitive
    description:
@@ -129,14 +169,14 @@ packages:
      name: path
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.7.0"
+    version: "1.8.0-nullsafety"
  pedantic:
    dependency: "direct dev"
    description:
      name: pedantic
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.9.0"
+    version: "1.9.2"
  plugin_platform_interface:
    dependency: transitive
    description:
@@ -150,7 +190,14 @@ packages:
      name: provider
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "4.3.2"
+    version: "4.3.2+2"
+  sanitize_html:
+    dependency: transitive
+    description:
+      name: sanitize_html
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.3.0"
  sky_engine:
    dependency: transitive
    description: flutter
@@ -162,21 +209,21 @@ packages:
      name: source_span
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.7.0"
+    version: "1.8.0-nullsafety"
  stack_trace:
    dependency: transitive
    description:
      name: stack_trace
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.9.5"
+    version: "1.10.0-nullsafety"
  stream_channel:
    dependency: transitive
    description:
      name: stream_channel
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "2.0.0"
+    version: "2.1.0-nullsafety"
  stream_transform:
    dependency: transitive
    description:
@@ -190,42 +237,42 @@ packages:
      name: string_scanner
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.0.5"
+    version: "1.1.0-nullsafety"
  term_glyph:
    dependency: transitive
    description:
      name: term_glyph
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.1.0"
+    version: "1.2.0-nullsafety"
  test_api:
    dependency: transitive
    description:
      name: test_api
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "0.2.17"
+    version: "0.2.19-nullsafety"
  typed_data:
    dependency: transitive
    description:
      name: typed_data
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.2.0"
+    version: "1.3.0-nullsafety.2"
  uuid:
    dependency: "direct main"
    description:
      name: uuid
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "2.2.0"
+    version: "2.2.2"
  vector_math:
    dependency: transitive
    description:
      name: vector_math
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "2.0.8"
+    version: "2.1.0-nullsafety.2"
 sdks:
-  dart: ">=2.9.0-14.0.dev <3.0.0"
+  dart: ">=2.10.0-0.0.dev <2.10.0"
  flutter: ">=1.16.3 <2.0.0"
--- a/place_tracker/pubspec.yaml
+++ b/place_tracker/pubspec.yaml
@@ -11,7 +11,8 @@ dependencies:
    sdk: flutter

  cupertino_icons: ^0.1.3
-  google_maps_flutter: ^0.5.27
+  google_maps_flutter: ^0.5.0
+  google_maps_flutter_web: ^0.1.0
  provider: ^4.0.0
  uuid: ^2.0.4

--- a/place_tracker/web/favicon.png
+++ b/place_tracker/web/favicon.png
--- a/place_tracker/web/icons/Icon-192.png
+++ b/place_tracker/web/icons/Icon-192.png
--- a/place_tracker/web/icons/Icon-512.png
+++ b/place_tracker/web/icons/Icon-512.png
--- a/place_tracker/web/index.html
+++ b/place_tracker/web/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="place_tracker">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" type="image/png" href="favicon.png"/>
+
+  <!-- // Other stuff -->
+
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEKgpAdjMVMv9IKX-BBsjzwgYMxfZonbw"></script>
+
+  <title>place_tracker</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+<body>
+  <!-- This script installs service_worker.js to provide PWA functionality to
+       application. For more information, see:
+       https://developers.google.com/web/fundamentals/primers/service-workers -->
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function () {
+        navigator.serviceWorker.register('flutter_service_worker.js');
+      });
+    }
+  </script>
+  <script src="main.dart.js" type="application/javascript"></script>
+</body>
+</html>
--- a/place_tracker/web/manifest.json
+++ b/place_tracker/web/manifest.json
@@ -0,0 +1,23 @@
+{
+    "name": "place_tracker",
+    "short_name": "place_tracker",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}
--- a/web/peanut.yaml
+++ b/web/peanut.yaml
@@ -12,5 +12,6 @@ directories:
 - vision_challenge/web
 - form_app/web
 - web_dashboard/web
+- place_tracker/web

 post-build-dart-script: _tool/peanut_post_build.dart
--- a/web/place_tracker
+++ b/web/place_tracker
@@ -0,0 +1 @@
+../place_tracker