Skip to content

Commit 91cb685

Browse files
domesticmouseMarkTechsonditman
authored
Publish web_embedding (#1777)
## 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]>
1 parent b703f1f commit 91cb685

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+14950
-0
lines changed

web_embedding/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# web_embedding
2+
3+
This directory contains examples of how to embed Flutter in web apps (without iframes):
4+
5+
* **element_embedding_demo**: Modifies the index.html of a flutter app so it is
6+
launched in a custom `hostElement`. This is the most basic embedding example.
7+
* **ng-flutter**: A simple Angular app (and component) that replicates the above
8+
example, but in an Angular style.
9+
10+
Check the `README.md` of each example for more details on how to run it, and the
11+
"Points of Interest" it may contain.
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Miscellaneous
2+
*.class
3+
*.log
4+
*.pyc
5+
*.swp
6+
.DS_Store
7+
.atom/
8+
.buildlog/
9+
.history
10+
.svn/
11+
migrate_working_dir/
12+
13+
# Keeping the repo
14+
.metadata
15+
pubspec.lock
16+
17+
# IntelliJ related
18+
*.iml
19+
*.ipr
20+
*.iws
21+
.idea/
22+
23+
# The .vscode folder contains launch configuration and tasks you configure in
24+
# VS Code which you may wish to be included in version control, so this line
25+
# is commented out by default.
26+
#.vscode/
27+
28+
# Flutter/Dart/Pub related
29+
**/doc/api/
30+
**/ios/Flutter/.last_build_id
31+
.dart_tool/
32+
.flutter-plugins
33+
.flutter-plugins-dependencies
34+
.packages
35+
.pub-cache/
36+
.pub/
37+
/build/
38+
39+
# Symbolication related
40+
app.*.symbols
41+
42+
# Obfuscation related
43+
app.*.map.json
44+
45+
# Android Studio will place build artifacts here
46+
/android/app/debug
47+
/android/app/profile
48+
/android/app/release
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# element_embedding_demo
2+
3+
This package contains the application used to demonstrate the
4+
upcoming Flutter web feature: "Element Embedding".
5+
6+
This was first shown on the Flutter Forward event in Nairobi (Kenya), by Tim
7+
Sneath. [See the replay here](https://www.youtube.com/watch?v=zKQYGKAe5W8&t=5799s).
8+
9+
## Running the demo
10+
11+
The demo is a Flutter web app, so it can be run as:
12+
13+
```terminal
14+
$ flutter run -d chrome
15+
```
16+
17+
## Points of Interest
18+
19+
* Check the new JS Interop:
20+
* Look at `lib/main.dart`, find the `@js.JSExport()` annotation.
21+
* Find the JS code that interacts with Dart in `web/js/demo-js-interop.js`.
22+
* See how the Flutter web application is embedded into the page now:
23+
* Find `hostElement` in `web/index.html`.
24+
25+
_(Built by @ditman, @kevmoo and @malloc-error)_
Loading

0 commit comments

Comments
 (0)