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,
);
}),
);
}
Related
I want to open Whatsapp Web Desktop mode in my flutter app
As shown in picture
Required Result
I am used webview_flutter webview_flutter_plus packages but both results same.
my initial url is
https://web.whatsapp.com
The code i am using are as follow
class WhatsAppWebScreen extends StatefulWidget {
WhatsAppWebScreen({Key? key}) : super(key: key);
// late Completer<WebViewController> controller;
#override
State<WhatsAppWebScreen> createState() => _WhatsAppWebScreenState();
}
class _WhatsAppWebScreenState extends State<WhatsAppWebScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: const DrawerWidget(),
appBar: AppBar(
title: const Text("WhatsAppWeb"),
backgroundColor: Color(0xFF128D7E),
),
body: SingleChildScrollView(
child: Container(
height: 80.h,
child: WebViewPlus(
initialUrl: 'https://web.whatsapp.com',
userAgent:
"Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15",
javascriptMode: JavascriptMode.unrestricted,
),
),
),
);
}
}
Every Time i run this code the url redirects into
www.whatsapp.com
and results like this
enter image description here
I try many different user agents strings but the same result.
I used navigationdelegate parameter to prevent redirection of url. but then it shows blank screen
navigationDelegate: (request) {
if (request.url.startsWith('https://www.whatsapp.com/')) {
print('blocking navigation to $request}');
return NavigationDecision.prevent;
}
print('allowing navigation to $request');
return NavigationDecision.navigate;
},
onWebViewCreated: (webViewController) {
_controller.complete(webViewController);
},
How can i open whatsapp web desktop mode in my flutter app?
WebView(
initialUrl: 'https://web.whatsapp.com',
userAgent:"Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15",
javascriptMode: JavascriptMode.unrestricted,
),
Am using the showcase_view package and following everything mentioned in the example but it is not working at all not showing the showcase and also not showing an error.
Here is my code :
final _searchShowcase = GlobalKey();
BuildContext myContext;
void initState() {
WidgetsBinding.instance.addPostFrameCallback((_) {
ShowCaseWidget.of(myContext).startShowCase([_searchShowcase]);
super.initState();
}
#override
Widget build(BuildContext context) {
return ShowCaseWidget(
builder: Builder(builder: (context){
myContext =context;
return Scaffold(
body: SingleChildScrollView(
controller: _scrollController,
child: Container(
padding: EdgeInsets.only(bottom: 30, top: 30),
child: StickyHeader(
header: Showcase(
key: _searchShowcase,
title: '${translator.translate("search")}',
description: '${translator.translate("search")}',
child: SearchBarWidget()
),
content:Column(....)
);
);}
And the screen just opens normally without showing the showcase view or even doing any action.. where is the mistake here?
Make sure ShowCaseWidget is as close to root(MaterialApp/CupertinoApp) as possible.
https://stackoverflow.com/a/70879957/18645340 [Check this for more info]
Check the context.
Hope it helps!
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();
},
);
}
}
I want to build a 'Nightstand Clock' app, and I want the phone to display the clock as long as the app is active without turning off the screen.
Is there a way to do this in Flutter?
I found this SO answer, but using the 'screen' plugin didn't work for me.
After adding the dependency to 'pubspecc.yaml' and running flutter packages get my app doesn't run anymore and Android SDK is getting stuck at the 'resolving dependencies' stage.
Either way, is there any other way to do this in flutter except the 'screen' plugin?
From the same SO post,it mentioned that the screen plugin encountered some issues. I've checked the plugin and it seems that it was not updated since March 13, 2019. Another plugin that would give the same function you needed is wakelock plugin. It is still available currently maintained by the author. In fact, latest version 0.5.0+2 was release last March 7, 2021.
Hi, I am still maintaining it :) We recently added macOS support as
well 🚀 Also, Flutter is open source - they have first-party plugins,
however, they do say themselves that they will abandon their
first-party solutions if a better third party project exists. So why
would they want to create one for something that works perfectly fine?
– creativecreatorormaybenot Feb 8 at 16:17
I've tested the sample given in the wakelock package:
import 'package:flutter/material.dart';
import 'package:wakelock/wakelock.dart';
void main() {
runApp(WakelockExampleApp());
}
class WakelockExampleApp extends StatefulWidget {
#override
_WakelockExampleAppState createState() => _WakelockExampleAppState();
}
class _WakelockExampleAppState extends State<WakelockExampleApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Wakelock example app'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
const Spacer(
flex: 3,
),
OutlinedButton(
onPressed: () {
setState(() {
Wakelock.enable();
});
},
child: const Text('enable wakelock'),
),
const Spacer(),
OutlinedButton(
onPressed: () {
setState(() {
Wakelock.disable();
});
},
child: const Text('disable wakelock'),
),
const Spacer(
flex: 2,
),
FutureBuilder(
future: Wakelock.enabled,
builder: (context, AsyncSnapshot<bool> snapshot) {
final data = snapshot.data;
if (data == null) {
return Container();
}
return Text('The wakelock is currently '
'${data ? 'enabled' : 'disabled'}.');
},
),
const Spacer(
flex: 3,
),
],
),
),
),
);
}
}
Here is the output in Android:
Output in iOS:
Also, it seems that you've resolved the previous issue in your code. It would be nice to share a minimal, complete and verifiable example for the community to understand the issue very well.
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.