I'm running a Flutter application with a list of products need to be displayed.
I've an asset folders (loaded in pubspec.yaml) which contains certain of my product images.
I wan't to show the image or a placeholder if not exists
Attempt one :
Image buildImg() {
var img = `assets/img/${product.id}.png`;
if(File(img).existsSync()){
return Image.asset(img);
}else{
return Image.asset('assets/img/placeholder.png');
}
}
Result: condition is always false
Attempt two :
Image buildImg() async {
try{
var img = rootBundle.load(`assets/img/${product.id}.png`);
return Image.memory(img.buffer.asUint8List());
}catch (_){
return Image.asset('assets/img/placeholder.png');
}
}
Result: Working but a lot of warns in terminal.
Is there a better way to dynamically load assets ? Thank's
the Image widget has an error builder which is called when the provided path is not valid,
simply use this code
Image.asset("image path.png" , errorBuilder: (context, error, stackTrace) => Image.asset('placeholder path.png'),),
Related
I'm making a reactive model with Getx on a product list, but when I start the list it comes with no value and causes an index error even though there are actually values in the list it appears empty at first, which somehow gets fixed automatically. (this is inside a build of a statelesswidget)
return GetX<CartController>(
init: CartController(),
builder: (controller) {
try {
return Text(
"${StringConvert.toMoney(controller.totalByProduct[productId])}",
style: kSmallTextBold,
);
} catch (e) {
return const Text("Error...");
}
},
);
}
I did try catch to manage this, but the catch part doesn't show up;
this is relevant part of the controller
var totalByProduct = [].obs;
fetchTotal() {
List products = storage.read(StorageKeys.cartProducts);
double currentValue = 0.0;
List currentTotals = [];
for (var item in products) {
currentTotals.add(item['total'] * item['amount']);
currentValue += item['total'] * item['amount'];
}
total.value = currentValue;
totalByProduct.value = currentTotals;
}
I believe it's not the right way to do this, so what do I need to know to fix this correctly?
If helps this is the error:
With a method to read the storage (sharedPreferences) in async mode, with a FutureBuilder it was possible to correct the error, because in the initial state the list takes the value assigned explicitly. Even if it then receives the correct value, accessing the index in its initial state causes the error, this explains why even with the error it works.
in my app,I want to use SVG images from the asset file.
but I want to check them in-the app, if the image asset is different from my image network from the server, I download the image network and replace it in my image asset and again read it from the asset to show them.
how can I do that?
bool showSvg = false;
void compareSvg(){
if(value['svgimage']['name'] != Image.profileSvg){
// how download svg network and replace it to assetfile
}else{
showSvg = true; });}
and its my code example :
showSvg
?SvgPicture.asset(Image.profileSvg)
:SvgPicture.asset(Image.newProfileSvg),
You can not compare images (technically you can, but it very complicated task) and replace assets file. You need to cache you image after first downloading, and set your asset as placeholder before your image are downloaded. Look in to dock here.
Edited:
Okay. I don't get your answer about svg, but if true here solution
Add this pub for file caching to your project. And this code may help:
File? _downloaded;
void _fetchImage() async {
const key = "profile";
const url =
"http://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg";
final file = await DefaultCacheManager().getSingleFile(url, key: key);
setState(() {
_downloaded = file;
});
}
Widget _svgImageFetcher() {
_fetchImage();
Widget networkSvg;
if (_downloaded == null) {
networkSvg = SvgPicture.asset("assets/images/profile.svg");
} else {
networkSvg = SvgPicture.file(_downloaded!);
}
return Column(children: [Expanded(child: networkSvg)]);
}
Just put _svgImageFetcher() Widget where you want to display image. And change default svg image and url.
The dart-epub plugin mentions an example on how to get Cover Image:
// Book's cover image (null if there is no cover)
Image coverImage = epubBook.CoverImage;
How can I display this? I keep getting an error
The following _TypeError was thrown building:
type 'Image' is not a subtype of type 'ImageProvider<Object>'
Update: I figured it out
Import the image and epub package as
import 'package:image/image.dart' as image;
import 'package:epub/epub.dart' as epub;
Open the epub file
// Change the location to wherever your epub file is located
var targetFile = new File('location/epubFile.epub');
List<int> bytes = await targetFile.readAsBytes();
epub.EpubBook epubBook = await epub.EpubReader.readBook(bytes);
Save the Cover Image to some location (ideally same folder as the epub file so it easier to delete together)
// Save the Cover Image to some location
if (await File('location/epubFileCoverImage.png').exists()) {
print("File exists");
} else {
try {
File('location/epubFileCoverImage.png')
.writeAsBytesSync(image.encodePng(epubBook.CoverImage));
} catch (e) {
print("Error Saving Cover Image");
print(e);
coverError = true;
}
}
Use Exception handling as there may be errors loading the Cover Image for some epub files
Finally to display it in the Widget tree:
coverError ? Image.asset("assets/Error.png")
: Image.file(File('location/epubFileCoverImage.png')),
In my Flutter app, I return asset (product image) name by:
class Product {
// ...
final int id;
// ...
String get assetName => '$id-0.jpg';
}
And later, I use the asset name like:
// ...
image: AssetImage(product.assetName),
// ...
Now, the problem is some of the images are *.jpg and some are *.png like:
Is there a way to tell the Flutter image loader to try to load '$id-0.jpg' and if the file doesn't exist, then try to load '$id-0.png'? Perhaps I can do that with regular expressions, but I cannot figure out how.
You can determine if an asset exists with rootBundle.load and a try-catch block. rootBundle.load will throw an exception if the asset is not found.
ByteData image;
try{
image = await rootBundle.load(assetNameHere.jpg);
}
catch(e) {
image = await rootBundle.load(assetNameHere.png);
}
I don't know the exception that this will throw on the asset not existing, so I can't tell you which error to catch on, but you can figure that out and modify your code to only do the png code on that exception type instead of everything.
With this method, since you're already forced to load the image into memory, you can store the ByteData and use MemoryImage instead of AssetImage.
I have this page where the camera is initialized and ready with a button that will record and stop the video, so I tried this :
FlatButton(
onPressed: () => {
!isRecording
? {
setState(() {
isRecording = true;
}),
cameraController.prepareForVideoRecording(),
cameraController.startVideoRecording('assets/Videos/test.mp4')
}
: cameraController.stopVideoRecording(),
},
............
but throws this error : nhandled Exception: CameraException(videoRecordingFailed, assets/Videos/test.mp4: open failed: ENOENT (No such file or directory)).
I don't understand, I don't want to open this file I want to save it there, Is there sth wrong with my code ?
In the new version, static method startRecordingVideo doesn't take any string parameter.
When you want to start the recording just see whether a video is already getting recorded, if not start
if (!_controller.value.isRecordingVideo) {
_controller.startVideoRecording();
}
and when you want to finish the recording you can call the static method stopVideoRecording() and it will give you a object of the class XFile, it will have the path to your video.
if (_controller.value.isRecordingVideo) {
XFile videoFile = await _controller.stopVideoRecording();
print(videoFile.path);//and there is more in this XFile object
}
This thing has worked for me. I am new to flutter please improve my answer if you know more.
You are trying to save a video in your assets folder which is not possible ,
What you need to do is to save to device locally either common folders like downloads or app directory.
Here is an example of how to go about it
dependencies:
path_provider:
Flutter plugin for getting commonly used locations on host platform
file systems, such as the temp and app data directories.
We will be saving the video to app directory.
We need to get the path to the directory where the file is or will be. Usually a file is put in the application's document directory, in the application's cache directory, or in the external storage directory. To get the path easily and reduce the chance of type, we can use PathProvider
Future<String> _startVideoRecording() async {
if (!controller.value.isInitialized) {
return null;
}
// Do nothing if a recording is on progress
if (controller.value.isRecordingVideo) {
return null;
}
//get storage path
final Directory appDirectory = await getApplicationDocumentsDirectory();
final String videoDirectory = '${appDirectory.path}/Videos';
await Directory(videoDirectory).create(recursive: true);
final String currentTime = DateTime.now().millisecondsSinceEpoch.toString();
final String filePath = '$videoDirectory/${currentTime}.mp4';
try {
await controller.startVideoRecording(filePath);
videoPath = filePath;
} on CameraException catch (e) {
_showCameraException(e);
return null;
}
//gives you path of where the video was stored
return filePath;
}