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.
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:
- Add the following to your
WebView widget has a new parameter
opaque, set it to
- 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/pluginsin my repository but not
forked from flutter/plugins.
- 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!