Flutter webview showing blank screen - flutter

I am trying to use WebView() on my flutter app. After I wrote the code there are not any errors, however, when running the debug mode on my simulator the page is blank. The AppBar is there and the text is on it also, but the body is a blank screen.
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class Audio extends StatefulWidget {
#override
_AudioState createState() => _AudioState();
}
class _AudioState extends State<Audio> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Audio"),
),
body: WebView(
key: UniqueKey(),
initialUrl: "http://google.com",
javascriptMode: JavascriptMode.unrestricted
),
);
}
}

This is pretty much an intended behavior. It seems that the initialUrl you've provided is an insecure HTTP connection.
The documentation "Insecure HTTP connections are disabled by default on iOS and Android" explains everything about this:
Starting with Android API
28
and iOS
9,
these platforms disable insecure HTTP connections by default.
With this change Flutter also disables insecure connections on mobile
platforms. Other platforms (desktop, web, etc) are not affected.
You can override this behavior by following the platform-specific
guidelines to define a domain-specific network policy. See the
migration guide below for details.
Much like the platforms, the application can still open insecure
socket connections. Flutter does not enforce any policy at socket
level; you would be responsible for securing the connection.
Here are the sample scenarios:
Scenario 1:
Using "http://google.com"
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(Audio());
}
class Audio extends StatefulWidget {
#override
_AudioState createState() => _AudioState();
}
class _AudioState extends State<Audio> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Audio"),
),
body: WebView(
key: UniqueKey(),
initialUrl: "http://google.com",
javascriptMode: JavascriptMode.unrestricted),
),
);
}
}
Scenario 2:
Using "google.com"
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(Audio());
}
class Audio extends StatefulWidget {
#override
_AudioState createState() => _AudioState();
}
class _AudioState extends State<Audio> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Audio"),
),
body: WebView(
key: UniqueKey(),
initialUrl: "google.com",
javascriptMode: JavascriptMode.unrestricted),
),
);
}
}
Scenario 3:
Using "https://www.google.com/"
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(Audio());
}
class Audio extends StatefulWidget {
#override
_AudioState createState() => _AudioState();
}
class _AudioState extends State<Audio> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Audio"),
),
body: WebView(
key: UniqueKey(),
initialUrl: "https://www.google.com/",
javascriptMode: JavascriptMode.unrestricted),
),
);
}
}

Related

WebView on Flutter

When trying to run the below code, we got the error
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(
const MaterialApp(
home: WebViewApp(),
),
);
}
class WebViewApp extends StatefulWidget {
const WebViewApp({super.key});
#override
State<WebViewApp> createState() => _WebViewAppState();
}
class _WebViewAppState extends State<WebViewApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView'),
),
body: const WebView(
initialUrl: 'https://flutter.dev',
),
);
}
}
In import 'package:webview_flutter/webview_flutter.dart';
we got the error:
Target of URI doesn't exist: 'package:webview_flutter/webview_flutter.dart'.
Try creating the file referenced by the URI, or try using a URI for a file that does exist.

Flutter app crash with appbunddle but works with apk

Everything's working fine with the apk but when deploy on the playstore I had to create an appbundle (.aab), I can download the app from the playstore but it crash when I try to open it
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: WebViewLoad()
)
);
}
}
class WebViewLoad extends StatefulWidget {
WebViewLoadUI createState() => WebViewLoadUI();
}
class WebViewLoadUI extends State<WebViewLoad>{
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 0,
),
body: WebView(
initialUrl: 'https://www.google.fr',
javascriptMode: JavascriptMode.unrestricted,
)
);
}
}
I ran this command to create the appbuild
flutter build appbuild --release --no-sound-null-safety
Any idea of what it doesn't work?

How to make device back button to go to the previous page in flutter webview

I have some simple code here that just displays a webpage. I want to make it so that, pressing the device back button takes you to the previous page on the webview. I tried looking for solutions online but was unable to integrate any of them into my code. Kindly help me out.
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
#override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Mobile App",
home: Scaffold(
body: SafeArea(
child: WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
))),
debugShowCheckedModeBanner: false,
);
}
}
Wrap Scaffold with this widget
WillPopScope(
onWillPop: controller.onBackPressedHandler,
child: Scaffold( ... )
Future<bool> onBackPressedHandler() {
return Future.value(false);} //return false disables default functionality
you can control back button functionality in onBackPressedHandler function.
For your case you should put this line of code inside it
webviewController.goBack();

how to allow mailto schemes in webview flutter

I am working on Flutter webview apps using Flutter Webview plugin.
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child : const WebView(
initialUrl: 'https://google.com',
javascriptMode: JavascriptMode.unrestricted,
),
)
)
);
}
}
However, if any links inside the opened web page is an app link, like: fb://profile, I will get net::ERR_UNKNOWN_URL_SCHEME.
In android, I found the solution is to override shouldOverrideUrlLoading as mentioned here, but what should I do in flutter?
I'm trying the solution mentioned here.
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child : const WebView(
initialUrl: 'https://google.com',
javascriptMode: JavascriptMode.unrestricted,
navigationDelegate: (NavigationRequest request) {
if (request.url.contains("mailto:")) {
launch(request.url);
return NavigationDecision.navigate;
}
},
),
)
)
);
}
}
But it is throwing errors like
Error: Not a constant expression.
if (request.url.contains("mailto:")) {
You can copy paste run full code below
Step 1: You can remove const keyword from const WebView
Step 2: You can use NavigationDecision.prevent
working demo
full code
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: WebView(
initialUrl:
'https://google.com', //'''https://www.scottseverance.us/mailto.html',
javascriptMode: JavascriptMode.unrestricted,
navigationDelegate: (NavigationRequest request) {
print(request.url);
if (request.url.contains("mailto:")) {
launch(request.url);
return NavigationDecision.prevent;
} else {
return NavigationDecision.navigate;
}
},
),
)));
}
}

Flutter webview failed to fit webpage with screen

i'm using webview_flutter: ^0.3.14+1.
Webview can't load web page https://m.bilibili.com/video/av57346110.html correctly. The web page is oversized
But if I open it with chrome, the web page fits screen correctly.
And I don't understand the difference between web browser and flutter webview.
Here's minimal codes to reproduce:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(),
body: Container(
child: WebView(
initialUrl: "https://m.bilibili.com/video/av57346110.html",
javascriptMode: JavascriptMode.unrestricted,
navigationDelegate: (NavigationRequest request) {
print("Loading... ${request.url}");
if(request.url.startsWith("http")) {
return NavigationDecision.navigate;
} else {
return NavigationDecision.prevent;
}
},
),
),
),
);
}
}
I implement this with same plugin 'webview_flutter' and it is working just fine.
Here is my code
WebView(
initialUrl: 'https://m.bilibili.com/video/av57346110.html',
javascriptMode: JavascriptMode.unrestricted,
allowsInlineMediaPlayback: true,
)