Flutter: How to make WebView transparent

Update: You should use flutter_inappwebview instead, read this article for more detail.

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.

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:

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"

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

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

That’s it.

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.

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