Develop Reference

Flutter WebView: If no internet show different content

I have a flutter web view app. I would like to have an offline screen with text and the button "try again".
If there is no internet connection (in real-time, no need to refresh and click to check connection), once he lost connection, show the screen with text and try again button. Then if the connection is successfully get the user back to the page where he was.
My current main.dart:
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(
const MaterialApp(
home: WebViewApp(),
),
);
}
class WebViewApp extends StatefulWidget {
const WebViewApp({Key? key}) : super(key: key);
#override
State<WebViewApp> createState() => _WebViewAppState();
}
class _WebViewAppState extends State<WebViewApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
toolbarHeight: 0,
),
body: const WebView(
javascriptMode: JavascriptMode.unrestricted,
initialUrl: 'https://google.com',
),
);
}
}

You can use a package like internet connection checker. Example this
One. And check for internet status like
bool result = await InternetConnectionChecker().hasConnection;
if(result == true) {
return Webview();
} else {
print('No internet :( Reason:');
return Center(
child: Text(" no internet"),
);
}

flutter webview plugin display as high resolution

I am attempting to create a android application to be installed on a android TV device i manage to display it using flutter_webview plugin, but all of the image are blurry and not displayed as its resolution. Any workaround with this problem?
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Builder(builder: (BuildContext context) {
return const WebView(
initialUrl: "https://apple.com",
javascriptMode: JavascriptMode.unrestricted,
);
}),
);
}

Not able to view web page in webview on Android emulator

I am trying to run the WebView Sample of Flutter in android emulator which is provided by Android studio itself. Now the problem I am facing is while I am running the sample I am not able to view the web page in WebView itself.
When the app runs for the first time it asks me to open the initialUrl into either into the chrome or web browser see below screenshots.
However, when I run the same sample in my mobile device it works fine and I can see the web page insdie WebView
Code
class _WikipediaExplorerState extends State<WikipediaExplorer> {
Completer<WebViewController> _controller = Completer<WebViewController>();
final Set<String> _favorites = Set<String>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Wikipedia Explorer'),
// This drop down menu demonstrates that Flutter widgets can be shown over the web view.
actions: <Widget>[
NavigationControls(_controller.future),
Menu(_controller.future, () => _favorites),
],
),
body: WebView(
initialUrl: 'https://en.wikipedia.org/wiki/Kraken',
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
),
floatingActionButton: _bookmarkButton(),
);
}
_bookmarkButton() {
return FutureBuilder<WebViewController>(
future: _controller.future,
builder:
(BuildContext context, AsyncSnapshot<WebViewController> controller) {
if (controller.hasData) {
return FloatingActionButton(
onPressed: () async {
var url = await controller.data.currentUrl();
_favorites.add(url);
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Saved $url for later reading.')),
);
},
child: Icon(Icons.favorite),
);
}
return Container();
},
);
}
}

how to add Desktop Version of Website in Flutter app?

i need to show desktop version of website in my app. for me it shows the mobile version of app:
code:
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import './landing_page.dart';
class ComicsPage extends StatefulWidget {
#override
_ComicsPageState createState() => _ComicsPageState();
}
class _ComicsPageState extends State<ComicsPage> {
TextEditingController controller = TextEditingController();
FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
var urlString = "https://avengers.marvelhq.com/comics";
launchUrl() {
setState(() {
urlString = controller.text;
flutterWebviewPlugin.reloadUrl(urlString);
});
}
#override
void initState() {
super.initState();
flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
print(wvs.type);
});
}
#override
Widget build(BuildContext context) {
String newUA= "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101
Firefox/40.1";
return WebviewScaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.cancel,size: 45.0),
onPressed: () => Navigator.of(context).pushAndRemoveUntil(new
MaterialPageRoute(builder: (BuildContext context) => new LandingPage()),
(Route route) => route == null),
)
],
title: const Text('Marvel Comics'),
),
url: urlString,
withZoom: true,
withJavascript: true,
withLocalStorage: true,
scrollBar: true,
enableAppScheme: true,
userAgent: newUA,
clearCookies: false,
clearCache: false,
);
}
}
i need to view like this sample image
especially for this site: click here
i tried to change useragent to desktop version(Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1). it not works.. give me solution.

i know this late answer but maybe someone will need it
BTW i also face this problem before in flutter
after do this trick it was work for me
just try eval this code JavaScript after your page is Loaded
like this
//to load desktop mode
String js =
"document.querySelector('meta[name=\"viewport\"]').setAttribute('content', 'width=1024px, initial-scale=' + (document.documentElement.clientWidth / 1024));";
#override
Widget build(BuildContext context) {
final flutterWebViewPlugin = new FlutterWebviewPlugin();
flutterWebViewPlugin.onProgressChanged.listen((event) {
debugPrint("Progress $event");
//this will make show in desktop mode
flutterWebViewPlugin.evalJavascript(js);
});
return WebviewScaffold(
appBar: AppBar(
title: Text("Desktop Mode"),
),
url: "My Url",
withJavascript: true,
useWideViewPort: true,
displayZoomControls: false,
scrollBar: true,
withZoom: true,
);
}
Link Of WebView Plugin here

Change the user agent parameter from null to the value mentioned below
WebView(
userAgent: "Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/20100101 Firefox/4.0",
initialUrl: html,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},

Is there WebView in Flutter? [duplicate]

This question already has answers here:
How to add a Webview in Flutter?
(10 answers)
Closed 2 years ago.
I am looking for WebView in flutter. How can I show my Html contents in flutter ?
Actually our books format is Html so I need WebView or a way to parse Html in flutter programming.

A Flutter plugin that provides a webview widget is available now for Developers Preview
usage
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView example'),
),
body: const WebView(
initialUrl: 'https://flutter.io',
javaScriptMode: JavaScriptMode.unrestricted,
),
);
full code

You can use
> flutter_webview_plugin
It is a plugin that allow Flutter to communicate with a native WebView.
Note: The webview is not integrated in the widget tree, it is a native view on top of the flutter view. you won't be able to use snackbars, dialogs ...

You can use my plugin flutter_inappwebview, which is a Flutter Plugin that allows you to add inline webviews integrated with the widget tree or open an in-app browser window! It offers a lot of events, methods, and options compared to other webview plugins!
Main Classes:
InAppWebView: Flutter Widget for adding an inline native WebView integrated into the flutter widget tree. To use InAppWebView class on iOS you need to opt-in for the embedded views preview by adding a boolean property to the app's Info.plist file, with the key io.flutter.embedded_views_preview and the value YES.
ContextMenu: This class represents the WebView context menu.
HeadlessInAppWebView: Class that represents a WebView in headless mode. It can be used to run a WebView in background without attaching an InAppWebView to the widget tree.
InAppBrowser: In-App Browser using native WebView.
ChromeSafariBrowser: In-App Browser using Chrome Custom Tabs on Android / SFSafariViewController on iOS.
InAppLocalhostServer: This class allows you to create a simple server on http://localhost:[port]/. The default port value is 8080.
CookieManager: This class implements a singleton object (shared instance) which manages the cookies used by WebView instances.
HttpAuthCredentialDatabase: This class implements a singleton object (shared instance) which manages the shared HTTP auth credentials cache.
WebStorageManager: This class implements a singleton object (shared instance) which manages the web storage used by WebView instances.
Quick example:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
InAppWebViewController webView;
String url = "";
double progress = 0;
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('InAppWebView Example'),
),
body: Container(
child: Column(children: <Widget>[
Container(
padding: EdgeInsets.all(20.0),
child: Text(
"CURRENT URL\n${(url.length > 50) ? url.substring(0, 50) + "..." : url}"),
),
Container(
padding: EdgeInsets.all(10.0),
child: progress < 1.0
? LinearProgressIndicator(value: progress)
: Container()),
Expanded(
child: Container(
margin: const EdgeInsets.all(10.0),
decoration:
BoxDecoration(border: Border.all(color: Colors.blueAccent)),
child: InAppWebView(
initialUrl: "https://flutter.dev/",
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
)
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
setState(() {
this.url = url;
});
},
onLoadStop: (InAppWebViewController controller, String url) async {
setState(() {
this.url = url;
});
},
onProgressChanged: (InAppWebViewController controller, int progress) {
setState(() {
this.progress = progress / 100;
});
},
),
),
),
ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Icon(Icons.arrow_back),
onPressed: () {
if (webView != null) {
webView.goBack();
}
},
),
RaisedButton(
child: Icon(Icons.arrow_forward),
onPressed: () {
if (webView != null) {
webView.goForward();
}
},
),
RaisedButton(
child: Icon(Icons.refresh),
onPressed: () {
if (webView != null) {
webView.reload();
}
},
),
],
),
])),
),
);
}
}
Screenshot:

If you just want to show a static html content, you can try this package: flutter_html_view. Flutter just supports a full-screen webview, an inline webview has not been supported yet.