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;
Related
I have been following posts of people trying to use precacheImage to avoid flickering when loading AssetImage first time. Some key code below:
late Image logo;
#override
void initState() {
super.initState();
logo = Image.asset("path_to_logo");
}
#override
void didChangeDependencies() {
precacheImage(logo.image, context);
super.didChangeDependencies();
}
Then later logo is used as a child widget:
Widget build(BuildContext context) {
...
logo
...
}
I also tried to use precacheImage before current page loads in main.dart but that didn't do any difference. The image is empty for a brief while when first time loaded and then all content is shifted to correct position once the asset image loads.
Using sdk: '>=2.19.0-168.0.dev <3.0.0'
Any ideas what could be wrong?
EDIT:
I found out that since I have support for multiple device pixel ratios, the precaching caches only 1x dimensions because I am using the generic path, but the device can be e.g. using 3x and ImageCache also seems to have some internal scale property when it caches images.
This ticket might be about the issue I am facing: https://github.com/flutter/flutter/issues/3905
I picked the image from camera and gallery in the edit profile page and I need to make it effective to the dashboard and drawer of the app immediately and also when user closes his app and comes back the photo must be there in the app. How can I achieve this.
Now I will store the image in a variable of type File, but it doesn't effect immediately and also it collpases when app is closed.
The Image you are picking, store the image in a variable of type File in setState({}).
First, your problem is divided into two parts:
Once the image is picked, it should appear in the different
places in your app.
One way to do that using the provider package as state management. Then create a class that extends change notifier. after that define a function that updates the image and notifies listeners. Something like this
class YourClass extends ChangeNotifier {
String? _image;
String? get image => _image;
void updateImageAndSave(String providedImage) {
_image = providedImage;
saveTolocaleStorage(providedImage); //To save your image to any locale storage of your prefrence.
notifyListeners();
}
void updateImage(String providedImage) {
_image = providedImage;
notifyListeners();
}
}
Note I use string because I actually provide the path, not the image itself. but you can change that.
After that, you use the consumer widget right above anywhere you want to be updated once the updateImage() function is called.
Note the image is nullable so you need to check if the image is null to show your temporary widget(your placeholder).
Read the image from your local storage.
Once you have done the above part, read the image from your locale storage on the app startup. Then, update the image in your change notifier. This will display the image at all the different places you specified in your app
i am trying to find a way to take a screenshot of entire screen. Flutter library is only allowing me to make a screenshot of a widget, but i want a screenshot of entire android.
I did find this link:
How to programmatically take a screenshot on Android?
and this is resolwing my problem, but i tried to use that java code as it is in documentation:
https://flutter.dev/docs/development/platform-integration/platform-channels?tab=android-channel-java-tab
sadly i am not able to run that code, maybie im making some kind of mistakes? i find a error, while i whas following docs instruction, after that program whas working (not exacly, java whas not able to find my battery, but code whas compiling), and then i copy first answer from that stack link and i tried to pase it in "MainActivity" folder, sadly program whas not working, my "old" java code whas comipilng, from the docs, not the new one.
If you know the solution how to make a photo of entire android screen using some kind of buttor in flutter, or how to implement code from that link into my MainActivity.java folder, please help
Try this package native_screenshot
https://pub.dev/packages/native_screenshot
You can simply run this function to take the screenshot of your phone:
Future<void> _capturePng() async {
String path = await NativeScreenshot.takeScreenshot();
print(path);
}
You can learn more about this package here
It work fine with Android and IOS
Hope it will be useful
You can use screenshot plugin:https://pub.dev/packages/screenshot to take a widget screenshot.
A screenshot is a simple plugin to capture widgets as Images. This plugin wraps your widgets inside RenderRepaintBoundary
Use this package as a library
Add this to your package's pubspec.yaml file:
dependencies:
screenshot: ^0.2.0
Now in your Dart code, Import it:
import 'package:screenshot/screenshot.dart';
This handy plugin can be used to capture any Widget including full-screen screenshots & individual widgets like Text().
Create Instance of Screenshot Controller
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
File _imageFile;
//Create an instance of ScreenshotController
ScreenshotController screenshotController = ScreenshotController();
#override
void initState() {
// TODO: implement initState
super.initState();
}
...
}
Wrap the widget that you want to capture inside Screenshot Widget. Assign the controller to screenshotController that you have created earlier
Screenshot(
controller: screenshotController,
child: Text("This text will be captured as image"),
),
Take the screenshot by calling the capture method. This will return a File
screenshotController.capture().then((File image) {
//Capture Done
setState(() {
_imageFile = image;
});
}).catchError((onError) {
print(onError);
});
Duplicate: How to take a screenshot of the current widget - Flutter
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,
],
);
}
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)
});