feat(examples/starwars): add web support

zino-hofmann · Jul 24, 2020 · 3b5bc93 · 3b5bc93
1 parent bc96dd8
commit 3b5bc93
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 9 deletions.
diff --git a/examples/starwars/.flutter-plugins-dependencies b/examples/starwars/.flutter-plugins-dependencies
@@ -0,0 +1 @@
+{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"connectivity","path":"/Users/mjr/flutter/.pub-cache/hosted/pub.dartlang.org/connectivity-0.4.8+2/","dependencies":[]},{"name":"path_provider","path":"/Users/mjr/flutter/.pub-cache/hosted/pub.dartlang.org/path_provider-1.6.5/","dependencies":[]}],"android":[{"name":"connectivity","path":"/Users/mjr/flutter/.pub-cache/hosted/pub.dartlang.org/connectivity-0.4.8+2/","dependencies":[]},{"name":"path_provider","path":"/Users/mjr/flutter/.pub-cache/hosted/pub.dartlang.org/path_provider-1.6.5/","dependencies":[]}],"macos":[{"name":"connectivity_macos","path":"/Users/mjr/flutter/.pub-cache/hosted/pub.dartlang.org/connectivity_macos-0.1.0+2/","dependencies":[]},{"name":"path_provider_macos","path":"/Users/mjr/flutter/.pub-cache/hosted/pub.dartlang.org/path_provider_macos-0.0.4/","dependencies":[]}],"linux":[],"windows":[],"web":[]},"dependencyGraph":[{"name":"connectivity","dependencies":["connectivity_macos"]},{"name":"connectivity_macos","dependencies":[]},{"name":"path_provider","dependencies":["path_provider_macos"]},{"name":"path_provider_macos","dependencies":[]}],"date_created":"2020-03-29 14:38:58.208164","version":"1.15.17"}
diff --git a/examples/starwars/README.md b/examples/starwars/README.md
@@ -3,5 +3,6 @@ Start the server:
 flutter packages pub run graphql_starwars_test_server
 ```
 
-And then `flutter run`
+And then `flutter run`, or `flutter run -d chrome` for web support:
 
+![flutter for web image](./for_web.png)
diff --git a/examples/starwars/for_web.png b/examples/starwars/for_web.png
diff --git a/examples/starwars/lib/main.dart b/examples/starwars/lib/main.dart
@@ -1,33 +1,35 @@
 import 'dart:io';
 
 import 'package:flutter/material.dart';
+import 'package:universal_platform/universal_platform.dart';
 
 import './client_provider.dart';
 import './episode/episode_page.dart';
 import './reviews/review_page.dart';
 import './reviews/review_page_list.dart';
 
 String get host {
-  if (Platform.isAndroid) {
+// https://github.com/flutter/flutter/issues/36126#issuecomment-596215587
+  if (UniversalPlatform.isAndroid) {
     return '10.0.2.2';
   } else {
-    return 'localhost';
+    return '127.0.0.1';
   }
 }
 
-final String GRAPHQL_ENDPOINT = 'http://$host:3000/graphql';
-final String SUBSCRIPTION_ENDPOINT = 'ws://$host:3000/subscriptions';
+final graphqlEndpoint = 'http://$host:3000/graphql';
+final subscriptionEndpoint = 'ws://$host:3000/subscriptions';
 
 void main() => runApp(MyApp());
 
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ClientProvider(
-      uri: GRAPHQL_ENDPOINT,
-      subscriptionUri: SUBSCRIPTION_ENDPOINT,
+      uri: graphqlEndpoint,
+      subscriptionUri: subscriptionEndpoint,
       child: MaterialApp(
-        title: 'Graphql Starwas Demo',
+        title: 'Graphql Starwars Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),

diff --git a/examples/starwars/pubspec.yaml b/examples/starwars/pubspec.yaml
@@ -8,7 +8,9 @@ dependencies:
     path: ../../packages/graphql_flutter
   graphql:
     path: ../../packages/graphql
-  graphql_starwars_test_server: ^0.0.4
+  graphql_starwars_test_server: ^0.1.0
+  universal_platform: ^0.1.3
+    # https://github.com/flutter/flutter/issues/36126#issuecomment-596215587
 
 flutter:
   uses-material-design: true
@@ -18,3 +20,6 @@ dependency_overrides:
     path: ../../packages/graphql_flutter
   graphql:
     path: ../../packages/graphql
+  graphql_starwars_test_server:
+    path: /Users/mjr/Documents/code/libraries/angel-starwars-server
+
diff --git a/examples/starwars/web/favicon.png b/examples/starwars/web/favicon.png
diff --git a/examples/starwars/web/icons/Icon-192.png b/examples/starwars/web/icons/Icon-192.png
diff --git a/examples/starwars/web/icons/Icon-512.png b/examples/starwars/web/icons/Icon-512.png
diff --git a/examples/starwars/web/index.html b/examples/starwars/web/index.html
@@ -0,0 +1,33 @@
+<!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="starwars_app">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" type="image/png" href="favicon.png"/>
+
+  <title>starwars_app</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>
diff --git a/examples/starwars/web/manifest.json b/examples/starwars/web/manifest.json
@@ -0,0 +1,23 @@
+{
+    "name": "starwars_app",
+    "short_name": "starwars_app",
+    "start_url": ".",
+    "display": "minimal-ui",
+    "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"
+        }
+    ]
+}