I have Test page that loads data from HTML for each question of the Test. Whenever I get video as a iFrame from the HTML, I parse it to data URI and then will display that video in a WebView. I use this same page for all the questions. When I click next question I used the following code to display new video in the same webview.
webviewController.loadUrl(newUrl)
This works completely fine until I have two or more videos in the same page. When there is two or more videos in the same page. The videos in the upcoming page shows the same previous video.
Below is code how I render my Video from html.
Widget renderVideo(dom.Element iframe) {
String initialUrl =
Uri.dataFromString(iframe, mimeType: 'text/html')
.toString();
if (testBloc.webViewController != null) {
testBloc.webViewController.loadUrl(initialUrl);
}
return Container(
width: 300,
height: 350,
child: WebView(
initialUrl: initialUrl,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController controller) {
testBloc.webViewController = controller;
controller.loadUrl(initialUrl);
},
),
);
}
So everytime there is iframe this method will be called in a page. So when there is only one video in the page this will be called once. When there is two or more videos in the page, this is will be called two or more times creating as many as webviews. Whenever I encounter two or more videos in single page, the upcoming pages webview will display the same video that came in the multiple video page.
For example:
Page 1: It has one video. It will be displayed in the webview.
Page 2: If it has two or more video. It will be displayed in as many webviews.
Page 3: And then the page followed by the multi video page does not display its own video. Instead it
displays the video of the page 2. All the upcoming pages from here also display the video of the page 2.
I could not find why this is happening and how to resolve this. Can anyone guide me here.
I am sorry If I have not explained it properly or if I have elaborated it big. Maybe reading the example might make you understand the problem clearly.
Thanks in advance.
You might've need to wrap loadUrl() inside setState() to update the WebViewController's loadUrl. This should rebuild the WebView with the new URL.
setState((){
testBloc.webViewController.loadUrl(newUrl)
});
Related
I am using the pdf package in flutter for generating pdf from the app. I need to add a clickable kind of thing(hyperlink, button) in pdf but the package doesn't provide any widget for that purpose. Also, the basic flutter widgets couldn't be used for generating the pdf files(restricted by the package). Is there any way to solve it?
Use the Stack widget to put any widget above the pdf ?
The problem is solved now, the pdf package provides the UrlLink for the purpose of opening a link when tapped on the page.
This is the short documentation for the same.
I did it like this-
pw.UrlLink(destination: imageUrl, child: pw.Text('LINK', style: pw.TextStyle(fontSize: size)))
I use "webview_flutter: ^1.0.7" plugin in my flutter app to open a webview but I have a problem when a website launch a video after a click anywhere on the screen an it's open in fullscreen. How to disable it without disable javascript ? I want to play the video but not in fullscreen
I can't use "AutoMediaPlaybackPolicy" because there is an action
One way would be to update html file:
String hmtlCode = (await http.get(initialUrl)).body;
# edit this code (either append to string, or find and replace)
https://itqna.net/questions/80033/how-disable-full-screen-html5-video-any-browser (html example how to disable full screen)
and then feed this html to webview
String hmtlCode = ....;
String url = Uri.dataFromString(hmtlCode, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString();
WebView(
initialUrl: url,
...
I want to show a composed SVG image in flutter and I am currently using the flutter_svg library.
My picture consists of different layers that can be put together using the app's GUI (creating an avatar).
In principle it works very well with a stack of SVGPictures, but when loading, the problem arises that some of the SVGs are displayed a little later than others and the graphics look broken in this short time - for example, the upper body of an avatar is not loaded but the rest of the body -> the avatar has a hole in the middle ...
Is there a way to display a composition from SVGPictures only when all parts are loaded and can be displayed? Ideally, a dummy should also be displayed for this long.
SVGs with a lot of layers will definitely cause a bit of lag while loading, hence if you want to load them all smoothly, you can try preloading SVGs.
final svg = SvgPicture.asset('assets/vector.svg');
final svgAnother = SvgPicture.asset('assets/vector.svg');
#override
Widget build(BuildContext context) {
return Stack(
children:[
svg, // Load preloaded svg smoothly
svgAnother,
],
);
}
Description :
I'm working on slide show app. Where I can import a video , add on it sound + text (subtitles and stuff) Then render it & save it locally or share it on social media.
I've managed doing the first part with this package.
But I have 3 problems :
First: However I'm just putting text widgets overlaid onto the video player.
Second : How can I input a certain sound on the video?
Third : After all that , How can I render the output video which I can save it locally or share it?
I think you could theoretically make it seem like you are combining video and audio based on how you render them, however to do the third it looks like you would need to get into video editing. Doing it from scratch could be quite a task, and I know in java there is ffmeg but not sure about dart. Here is another stackoverflow discussion that has more on the matter
Video Editor in Flutter using dart
There is now a high-level render package that heavily optimizes the approach of repaint boundary capturing.
Wrap you widget with Renderwidget:
import 'package:render/render.dart';
final controller = RenderController();
#override
Widget build(BuildContext context) {
return Render(
controller: controller,
child: Container(),
);
}
And then capture the motion with the controller:
final result = await renderController.captureMotion(
duration,
format: Format.gif,
);
final file = result.output;
My application has the following structure:
- InheritedWidget for dependencies
--> Splash Screen Page
--> Login Pages
--> Main Pages
When the app runs for the first time, I can use var link = await getInitialLink(); to get the value for the link that opened the app.
However, I cannot get the same result if I open the app on the background.
I tried to use
getLinksStream().listen((link) => (link) {
try {
var _latestUri;
if (link != null) _latestUri = Uri.parse(link);
print("=== Formated successfully a link!");
} on FormatException {
print("--- A link got here but was invalid");
}
});
For getting the link in the Splash Screen, but if the app is already open in the Login or Main pages, it won't go through the Splash Screen again.
Then, I tried to put it in the InheritedWidget, but alas, didn't get any result whatsoever.
So my question is: Where and how should I set up uni_links so that I can catch all incoming links even if the app is open?
Or better, is there an alternative for App Links/Universal Links that I can use?
Though it's not the best and most elegant way, I got around this.
First, I was not using getLinksStream correctly
Instead of
(link) => (link) {...}
It's
(link) {...}
Then, I need to put this subscription in my Splash Screen and do not dispose of it, so that it can listen to new events.
If anybody has a better solution, please free to add it
For this situation, you need to use both of getInitialUri() and getUriLinksStream(),
If app launchs directly u will get uri from getInitialUri, if app already running on background u will get uri from getUriLinksStream.