Flutter: How to make WebView transparent

Flutter is great for building UIs, but sometimes we just need to embed a website into our app by using WebView. While dark mode UI is being more and more common, the white background of the official WebView plugin can be annoying.

Image for post
Image for post

Just a little bit of “Googling” you can see that transparent background is a frequently requested feature of Flutter WebView, but for unknown reasons they didn’t merge the code for months at the time of writing this article. Also there are no official responses regarding the issue.

Since I have forked the official Flutter WebView plugin and added the feature, this article is going to tell you how to add it to your project:

webview_flutter:
git:
path: packages/webview_flutter
ref: webview-transparent-background
url: "git://github.com/crizant/plugins"

2. The WebView widget has a new parameter opaque, set it to false:

WebView(
// ...
opaque: false,
)

That’s it.

Note:

Do you know you can clap up to 50 times for an article? Go smash that button!

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

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