WebView Hell in Flutter
Continuing to talk about a video a little bit about more personal topics, that is, about my work, about what I think I wanted to talk to you about what I call the nightmare of webviews here in Flutter since something so simple or at least I see it from that perspective I have never made a browser but in general terms I dare to say that it is easy to make a web browser to interpret html which is where we all start, that is to say all of us usually start in software development or at least I or most people dare to say is creating a world with HTML which is not a programming language and we already know all that but no matter how much it is we are coding something then from there javascript css we go to a programming language it may be good we already started with javascript But we can go to php python or Node directly so that is why at least my vision is that always the html CSS javascript part is something simple therefore when we want to use it in this type of applications in this case Remember that this is the free development that I took out an application for Flutter that I follow giving here certain characteristics and obviously as its core is here html.
Because it is a web page, a web application and obviously I want to take advantage of that content so that you can see from here easily what the detail is, notice that here I always have some somewhat strange structures in this case this is on a Mac as you can see I am on a Mac Because in Windows or Android and even iOS although I have not launched the application to date the html content is seen rendered like this not exactly the same because the issue of styles is also something else. I am going to go to a page I am still working on a page that is a little nicer for example This one looks pretty decent with its CSS and here I am directly placing the html and it is precisely.
The horror of webviews in Flutter
Because it is a nightmare to work with the Webview I do not understand why people from Google or Flutter do not implement a webview that is good that is part of the API to precisely do this type of operations since I do not think it is that complicated already in native Android it exists in native iOS I think it also exists and therefore I do not know why they do not use or create an internal API to consume that native web video of each of the operating systems and in Windows I have not created an active application in Windows nor in macos for that I am using Flutter, but well there must be something too so it is a bit like what seems quite strange to me and well as you can imagine, we use a one point one pub extension since this is a bit like Flash in which we install flash then from there we start to install little packages and there we feed our project as we want.
Many webview pubs for Flutter
Yes of course what is the problem that well when we go here the result is quite horrible This is a page that I found in which I am going crazy looking for a webview for Mac and it has really become quite complicated so here we have on this page I found several:
https://fluttergems.dev/webview/
But look at the strange thing about the matter or what seems strange to me this is for Android and iOS I used these in the DesarrolloLibre project:
webview_flutter: 4.7.0
webview_windows:
desktop_webview_window:
# webview_all:Some gave me errors and others, others say they work for Mac and have not been tested; what I want to note here is that we have a lot of them and several do not work as expected.
Funny because there is one that says it is open for all platforms but it has not been tested on MacOS
I tried others and they gave an error when running the app or installing them.
But what I am referring to is that it becomes a bit of a nightmare in that sense because there is not one that is standardized.
Variable HTML content
Another problem that exists in these webviews is that I have this html content and many of them either don’t show it to me or it’s not clear to me or they simply don’t handle it and I can’t render it from an html content. In this case, it’s rendering it from a URL, which is very different from having the html content that is not a complete web page, that is, that is only an HTML content. From a web app, all this is very easy, since it’s all HTML, but, from a webview, with so many plugins, so many ways that we have to use the HTML content, it’s a real nightmare…
Using a webview that processes HTML and a URL on all platforms, an impossible task
With all that said, you can realize why I put the title of this post; and understand the underlying problem of all this, something as simple as being able to use HTML content in a Flutter app either through a URL or HTML content for various operating systems becomes a very complex task.
Current plugins either do not work on all platforms, or only work when a URL is provided and some even say that they work on a certain platform but they tell you that it is in beta, or that it has not been tested or similar messages.
I understand that if for example this here as you put it again it is another package it was not this one exactly if you put that it is available for maest as that package said and here it also appeared to you and here it appears next to it no testing I understand that you see that you have never used the package on Mac that is what I would understand I do not know if it refers to that you have not created the unit integration tests I do not know I would understand that you have never tested it so well if they have not tested it I do not understand how they put it here
In the link above, you can see the most common webview pubs, apart from what was mentioned, another problem is that the official documentation is basically null.
Conclusion
I wanted to give you a little bit of my perspective on all this and you can draw your own conclusions based on the development you want to carry out. In the free development project, I need to use HTML, both at the link level and as the HTML code I want to inject and I had to carry out many developments to simply render HTML content for the reasons mentioned above, creating custom methods with a number of conditionals to return the result based on the platform used and the supported webview:
if(Platform.isAndroid){
}- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter