Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Add section about how to use Material components in an app using WebView #3521

Merged
merged 3 commits into from
Feb 9, 2021
Merged

Add section about how to use Material components in an app using WebView #3521

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b5f40de
Add section about Material components
Feb 5, 2021
988c804
Fix identation
Feb 5, 2021
4d50f7a
Link to flutter.dev
Feb 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/webview_flutter/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 2.0.0-nullsafety.5

* Add section to the wiki explaining how to use Material components.

## 2.0.0-nullsafety.4

* Update integration test to workaround an iOS 14 issue with `evaluateJavascript`.
Expand Down
26 changes: 23 additions & 3 deletions packages/webview_flutter/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ You can now include a WebView widget in your widget tree. See the
[WebView](https://pub.dev/documentation/webview_flutter/latest/webview_flutter/WebView-class.html)
widget's Dartdoc for more details on how to use the widget.



## Android Platform Views
The WebView is relying on
[Platform Views](https://flutter.dev/docs/development/platform-integration/platform-views) to embed
Expand Down Expand Up @@ -66,5 +64,27 @@ android {
// Required by the Flutter WebView plugin.
minSdkVersion 19
}
}
}
```

#### Enable Material Components for Android

To use Material Components when the user interacts with input elements in the WebView,
follow the steps described in the [Getting Started guide for Android](https://material.io/develop/android/docs/getting-started). For example:
Copy link
Contributor

@stuartmorgan stuartmorgan Feb 8, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about changing this to "in the [Enabling Material Components instructions](https://flutter.dev/docs/deployment/android#enabling-material-components)" and removing everything else? That way we aren't maintaining two copies of the instructions.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done


1. Add the dependency on Android's Material in `<my-app>/android/app/build.gradle`:
```groovy
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
// ...
}
```

To find out the latest version, visit [Google Maven](https://maven.google.com/web/index.html#com.google.android.material:material).

2. Set the theme in `<my-app>/android/app/src/main/res/values/styles.xml`:
```diff
-<style name="LaunchTheme" parent="Theme.AppCompat">
+<style name="LaunchTheme" parent="Theme.MaterialComponents.NoActionBar">
```
2 changes: 1 addition & 1 deletion packages/webview_flutter/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
name: webview_flutter
description: A Flutter plugin that provides a WebView widget on Android and iOS.
version: 2.0.0-nullsafety.4
version: 2.0.0-nullsafety.5
homepage: https://github.com/flutter/plugins/tree/master/packages/webview_flutter

environment:
Expand Down