How to display web pages responsively in a Flutter Android app?

Question

I would like to get web pages to display responsively in my Flutter apps, and am unable to do so. They display as if the screen/viewport was much wider. For example, a page that looks like this in Android Chrome:

ends up looking like this in my app (regardless of the package I use):

I have experimented with both the webview_flutter and flutter_webview_plugin packages, including experimenting with several flutter_webview_plugin functions, turning them on and off:

Future<Null> launch(String url, {
   bool withJavascript: true,
   bool enableAppScheme: true,
   bool withZoom: false,
   bool scrollBar: true,
   bool displayZoomControls: false,
   bool useWideViewPort: false,
});

I'm starting to think the solution isn't in Flutter or its packages, but maybe something like manipulating the Android manifest file (hence the android and android-webview tags)?

Solution

try changing the userAgent of https://pub.dev/packages/flutter_webview_plugin for a chrome one , you can find them here

Future<Null> launch(String url, {
   bool withJavascript: true,
   String userAgent : 'Mozilla/5.0 (Linux; <Android Version>; <Build Tag etc.>) AppleWebKit/<WebKit Rev> (KHTML, like Gecko) Chrome/<Chrome Rev> Mobile Safari/<WebKit Rev>'
});

Comments

[krishnakumarcn]

did you found any soultion.? facing the same issue.

[Muthu N]

Thanks, @ValdaXD; I look forward to trying this. Keeping in mind my newbie-ness, will I need some sort of conditional code if I someday compile for a tablet or iOS device, or will the one userAgent string work well everywhere?

[ValdaXD]

Yeah, the User Agent string is accepted by the webpage and the webpage doesn't even try to tell if it is right , try checking the articles about this , like howtogeek.com/114937/htg-explains-whats-a-browser-user-agent , it should work on Ios, android, an obviously web browsers

[Muthu N]

Sadly for me, the page displayed the same way. But +1 for the clarity and completeness of your response. I appreciate the link(s).