Add an end to end example of for building a DevTools extension (#6299)

packages/devtools_extensions/README.md

@@ -10,6 +10,10 @@ package, your extension will show up in its own DevTools tab:
 
 ![Example devtools extension](_readme_images/example_devtools_extension.png)
 
+Follow the instructions below to get started, and use the
+[end-to-end example](https://github.com/flutter/devtools/tree/master/packages/devtools_extensions/example/)
+for reference.
+
 ## Setup your package to provide a DevTools extension
 
 DevTools extensions must be written as Flutter web apps. This is because DevTools embeds

packages/devtools_extensions/example/README.md

@@ -0,0 +1,46 @@
+# Example DevTools Extension
+
+This is an end-to-end example of a DevTools extension, including
+- the parent `package:foo` that provides the DevTools extension to end-user
+applications (`foo/packages/foo`)
+- the end-user application (`app_that_uses_foo`) that depends on `package:foo`,
+which will trigger a load of the `package:foo` DevTools extension when debugging
+this app with DevTools
+- the `package:foo` DevTools extension (`foo/packages/foo_devtools_extension`),
+which is a Flutter web app that will be embedded in DevTools when debugging an
+app the uses `package:foo`
+
+
+This example will show you how to:
+1. Structure your package for optimal extension development and publishing
+    ```
+    foo/  # formerly the repository root of your pub package
+    packages/
+        foo/  # your pub package
+        extension/
+            devtools/
+            build/
+                ...  # pre-compiled output of foo_devtools_extension
+            config.yaml
+        foo_devtools_extension/  # source code for your extension
+    ```
+2. Configure your extension using the `foo/extension/devtools/config.yaml` file
+    ```yaml
+    name: foo
+    issue_tracker: <link_to_your_issue_tracker.com>
+    version: 0.0.1
+    material_icon_code_point: '0xe0b1'
+    ```
+3. Use `package:devtools_extensions` and `package:devtools_app_shared` to
+develop your DevTools extension (see source code under `foo_devtools_extension`).
+4. Ship your extension with your pub package by including the pre-built assets
+in the `foo/extension/devtools/build` directory.
+    - For this example, the pre-built assets for `foo_devtools_extension` were added
+    to `foo/extension/devtools/build` by running the following command from the
+    `foo_devtools_extension/` directory:
+        ```sh
+        flutter pub get &&
+        dart run devtools_extensions build_and_copy \
+            --source=. \
+            --dest=../foo/extension/devtools 
+        ```

packages/devtools_extensions/example/app_that_uses_foo/README.md

@@ -0,0 +1,4 @@
+# app_that_uses_foo
+
+This is an example application that uses a package, `package:foo`, that includes a
+DevTools extension.

packages/devtools_extensions/example/app_that_uses_foo/ios/.gitignore

@@ -0,0 +1,34 @@
+**/dgph
+*.mode1v3
+*.mode2v3
+*.moved-aside
+*.pbxuser
+*.perspectivev3
+**/*sync/
+.sconsign.dblite
+.tags*
+**/.vagrant/
+**/DerivedData/
+Icon?
+**/Pods/
+**/.symlinks/
+profile
+xcuserdata
+**/.generated/
+Flutter/App.framework
+Flutter/Flutter.framework
+Flutter/Flutter.podspec
+Flutter/Generated.xcconfig
+Flutter/ephemeral/
+Flutter/app.flx
+Flutter/app.zip
+Flutter/flutter_assets/
+Flutter/flutter_export_environment.sh
+ServiceDefinitions.json
+Runner/GeneratedPluginRegistrant.*
+
+# Exceptions to above rules.
+!default.mode1v3
+!default.mode2v3
+!default.pbxuser
+!default.perspectivev3

packages/devtools_extensions/example/app_that_uses_foo/ios/Flutter/AppFrameworkInfo.plist

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+  <key>CFBundleDevelopmentRegion</key>
+  <string>en</string>
+  <key>CFBundleExecutable</key>
+  <string>App</string>
+  <key>CFBundleIdentifier</key>
+  <string>io.flutter.flutter.app</string>
+  <key>CFBundleInfoDictionaryVersion</key>
+  <string>6.0</string>
+  <key>CFBundleName</key>
+  <string>App</string>
+  <key>CFBundlePackageType</key>
+  <string>FMWK</string>
+  <key>CFBundleShortVersionString</key>
+  <string>1.0</string>
+  <key>CFBundleSignature</key>
+  <string>????</string>
+  <key>CFBundleVersion</key>
+  <string>1.0</string>
+  <key>MinimumOSVersion</key>
+  <string>11.0</string>
+</dict>
+</plist>

packages/devtools_extensions/example/app_that_uses_foo/ios/Flutter/Debug.xcconfig

@@ -0,0 +1 @@
+#include "Generated.xcconfig"

packages/devtools_extensions/example/app_that_uses_foo/ios/Flutter/Release.xcconfig

@@ -0,0 +1 @@
+#include "Generated.xcconfig"