Skip to content

Commit

Permalink
Publish web_embedding (#1777)
Browse files Browse the repository at this point in the history
## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[CLA]: https://cla.developers.google.com/
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md


Co-authored-by: Mark Thompson
<[email protected]>
Co-authored-by: David Iglesias <[email protected]>

Co-authored-by: Mark Thompson <[email protected]>
Co-authored-by: David Iglesias <[email protected]>
  • Loading branch information
3 people committed May 6, 2023
1 parent b703f1f commit 91cb685
Show file tree
Hide file tree
Showing 61 changed files with 14,950 additions and 0 deletions.
11 changes: 11 additions & 0 deletions web_embedding/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# web_embedding

This directory contains examples of how to embed Flutter in web apps (without iframes):

* **element_embedding_demo**: Modifies the index.html of a flutter app so it is
launched in a custom `hostElement`. This is the most basic embedding example.
* **ng-flutter**: A simple Angular app (and component) that replicates the above
example, but in an Angular style.

Check the `README.md` of each example for more details on how to run it, and the
"Points of Interest" it may contain.
48 changes: 48 additions & 0 deletions web_embedding/element_embedding_demo/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# Miscellaneous
*.class
*.log
*.pyc
*.swp
.DS_Store
.atom/
.buildlog/
.history
.svn/
migrate_working_dir/

# Keeping the repo
.metadata
pubspec.lock

# IntelliJ related
*.iml
*.ipr
*.iws
.idea/

# The .vscode folder contains launch configuration and tasks you configure in
# VS Code which you may wish to be included in version control, so this line
# is commented out by default.
#.vscode/

# Flutter/Dart/Pub related
**/doc/api/
**/ios/Flutter/.last_build_id
.dart_tool/
.flutter-plugins
.flutter-plugins-dependencies
.packages
.pub-cache/
.pub/
/build/

# Symbolication related
app.*.symbols

# Obfuscation related
app.*.map.json

# Android Studio will place build artifacts here
/android/app/debug
/android/app/profile
/android/app/release
25 changes: 25 additions & 0 deletions web_embedding/element_embedding_demo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# element_embedding_demo

This package contains the application used to demonstrate the
upcoming Flutter web feature: "Element Embedding".

This was first shown on the Flutter Forward event in Nairobi (Kenya), by Tim
Sneath. [See the replay here](https://www.youtube.com/watch?v=zKQYGKAe5W8&t=5799s).

## Running the demo

The demo is a Flutter web app, so it can be run as:

```terminal
$ flutter run -d chrome
```

## Points of Interest

* Check the new JS Interop:
* Look at `lib/main.dart`, find the `@js.JSExport()` annotation.
* Find the JS code that interacts with Dart in `web/js/demo-js-interop.js`.
* See how the Flutter web application is embedded into the page now:
* Find `hostElement` in `web/index.html`.

_(Built by @ditman, @kevmoo and @malloc-error)_
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 91cb685

Please sign in to comment.