Flutter deep linking + multi-platform controls example (#37)

* wip

* Finished flutter deep linking examples

* remove gitignored files

Co-authored-by: Adil Malik <[email protected]>

Author: amalik2

.gitignore

@@ -75,6 +75,8 @@ fastlane/Preview.html
 fastlane/screenshots
 .dart_tool
 .packages
+.flutter-plugins
+.flutter-plugins-dependencies
 
 storybook-static/
 *.log

README.md

@@ -31,12 +31,13 @@ If you wanted to use those query parameters, your application would need to pars
 Examples of parsing query parameters:
  - [Android](examples/android-material-ui/app/app/src/main/java/com/intuit/august2020/storybookdemoapp/MainActivity.kt#L42)
  - [iOS](examples/ios-material-ui/app/iOSStoryBookDemo/iOSStoryBookDemo/AppDelegate.swift#L83)
+ - [Flutter](examples/flutter/app/lib/main.dart#L60)
 
 You can read more about how to setup deep linking for Android [here](https://developer.android.com/training/app-links/deep-linking).
 
 For iOS, [this article](https://medium.com/wolox/ios-deep-linking-url-scheme-vs-universal-links-50abd3802f97) explains how to set up deep linking. Note that for the examples in this repo, we use URL schemes instead of Universal Links since they are simpler to set up.
 
-Deep linking should also work on Flutter, but there are no examples for this yet.
+For Flutter, the [uni_links](https://pub.dev/packages/uni_links) package makes it easy to set up deep linking support for both Android and iOS.
 
 ### 2. Launch Parameters
 appetize.io allows you to pass in custom launch parameters which will be sent to your mobile application when it first starts up. In your application, you must create a handler that determines what to render based on what those launch parameters are.  
@@ -81,9 +82,8 @@ If you are using deep linking, your `.storybook` folder should also have a `prev
 Examples of how to use this module as both a build tool and as a component library can be found [in this folder](examples/). The `app` folder inside each example contains the source code of the application the example is for.
 
 - [Android storybook with controls](https://storybookjs.github.io/native/@storybook/native-controls-example/index.html?path=/story/button--example)
-- [Android storybook with deep linking](https://storybookjs.github.io/native/@storybook/native-android-material-deep-link-example/index.html)
+- [Flutter storybook with controls](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html?path=/story/android--button)
 - [iOS storybook with deep linking](https://storybookjs.github.io/native/@storybook/native-ios-example-deep-link/index.html?path=/story/button--example)
-- [Flutter storybook with launch parameters](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html?path=/story/android--button)
 
 More example static storybooks can be found [here](https://storybookjs.github.io/native/)
 

examples/controls/package.json

@@ -2,7 +2,7 @@
   "name": "@storybook/native-controls-example",
   "version": "1.1.1",
   "private": true,
-  "description": "A demo app showing how to use controls",
+  "description": "An Android demo app showing how to use controls",
   "repository": "",
   "author": "Adil Malik <[email protected]>",
   "license": "MIT",

examples/flutter/.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
-    stories: ["../stories/*.stories.jsx"],
+    stories: ["../src/*.stories.jsx"],
     addons: [
         "@storybook/addon-docs",
         "@storybook/addon-controls",

examples/flutter/app/android/app/build.gradle

@@ -44,14 +44,6 @@ android {
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }
-
-    buildTypes {
-        release {
-            // TODO: Add your own signing config for the release build.
-            // Signing with the debug keys for now, so `flutter run --release` works.
-            signingConfig signingConfigs.debug
-        }
-    }
 }
 
 flutter {

examples/flutter/app/android/app/src/main/AndroidManifest.xml

@@ -46,6 +46,13 @@
                 <data android:mimeType="text/plain" />
             </intent-filter>
 
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="sb-native" android:host="deeplink" />
+            </intent-filter>
+
         </activity>
         <!-- Don't delete the meta-data below.
              This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->

examples/flutter/app/android/app/src/main/kotlin/flutter/company/com/flutter_storybook/JsonUtils.java

@@ -0,0 +1,19 @@
+package flutter.company.com.flutter_storybook;
+
+import android.net.Uri;
+
+import org.json.JSONException;
+import org.json.JSONObject;
+
+public class JsonUtils {
+
+    public static String convertQueryStringToJSON(Uri uri) throws JSONException {
+        JSONObject object = new JSONObject();
+        for (String param : uri.getQueryParameterNames()) {
+            object.put(param, uri.getQueryParameter(param));
+        }
+
+        return object.toString();
+    }
+
+}

examples/flutter/app/android/app/src/main/kotlin/flutter/company/com/flutter_storybook/MainActivity.kt

@@ -1,35 +1,6 @@
 package flutter.company.com.flutter_storybook
 
-import android.content.Intent
-import android.os.Bundle
-import io.flutter.app.FlutterActivity
-import io.flutter.plugin.common.MethodChannel
-
+import io.flutter.embedding.android.FlutterActivity;
 
 class MainActivity : FlutterActivity() {
-    private var sharedText: String? = null
-
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        val intent = intent
-        val action = intent.action
-        val type = intent.type
-        if (Intent.ACTION_SEND == action && type != null) {
-            if ("text/plain" == type) {
-                sharedText = intent.getStringExtra(Intent.EXTRA_TEXT)
-            }
-        } else {
-            // If appetize sends text another way, use their API
-            val pageName = intent.getStringExtra("page")
-            if(pageName != null) {
-                sharedText = "{\"page\":\"$pageName\"}"
-            }
-        }
-        MethodChannel(flutterView, "app.channel.shared.data").setMethodCallHandler { call, result ->
-            if (call.method.contentEquals("getSharedData")) {
-                result.success(sharedText)
-                sharedText = null
-            }
-        }
-    }
 }

examples/flutter/app/ios/Flutter/AppFrameworkInfo.plist

@@ -3,7 +3,7 @@
 <plist version="1.0">
 <dict>
   <key>CFBundleDevelopmentRegion</key>
-  <string>$(DEVELOPMENT_LANGUAGE)</string>
+  <string>en</string>
   <key>CFBundleExecutable</key>
   <string>App</string>
   <key>CFBundleIdentifier</key>

examples/flutter/app/ios/Flutter/Debug.xcconfig

@@ -1,2 +1,2 @@
-#include "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
 #include "Generated.xcconfig"