Flutter: How to make WebView transparent

  1. Add the following to your pubspec.yaml :
webview_flutter:
git:
path: packages/webview_flutter
ref: webview-transparent-background
url: "git://github.com/crizant/plugins"
WebView(
// ...
opaque: false,
)

Note:

  1. Since the original solution is from jaumard, he didn’t fix the suggestions by other contributors for months so I forked from his repository and did some modifications. Therefore you will see forked from jaumard/plugins in my repository but not forked from flutter/plugins.
  2. Although I forked from jaumard, I did rebased the repository from flutter/plugins, and will continue to do it from time to time (until the feature is added officially), so that you guys can also enjoy the latest official features/bug fixes, besides the transparent background.

--

--

--

A JavaScript/Node/Flutter developer who love technical stuffs.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Part 2 A Closer Look at the Techniques

Deconstructing Engineering Manager Role

BEM vs SMACSS (war till death)

Content delivery networks: what are they and how do we work with NS1’s customers on CDN strategy?

Learn Powerful MongoDB Aggregation Pipelines From Practical Examples

Nexus Repository Manager Setup for Jenkins Plugin Development

Minimalist Writing Devices, #3: Raspberry Pi 400

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Crizant Lai

Crizant Lai

A JavaScript/Node/Flutter developer who love technical stuffs.

More from Medium

How to Resize an Icon / Icon Button In Flutter?

Envify - Your Secret Vault in Flutter

Envify - Your Secret Vault in Flutter.

Flutter — Adaptive Layout

Flutter Version Management