I build a for loop in Flutter on which I make some stuff with many images:
for (var i = 0; i < resultList.length; i++) {
File imageFile = await _getImageFileFromAssets(resultList[i]);
final appDir = await syspath.getApplicationDocumentsDirectory();
final fileName = path.basename(imageFile.path);
final savedImage =
await File(imageFile.path).copy('${appDir.path}/$fileName');
// Creating thumbnails
final thumb =
image.decodeImage(File(savedImage.path).readAsBytesSync());
final thumbImage = image.copyResize(thumb, width: 500);
new File('${appDir.path}/$fileName-thumb-500.jpg')
.writeAsBytesSync(image.encodeJpg(thumbImage));
final finalThumbImage =
File('${appDir.path}/$fileName-thumb-500.jpg');
picturesData.add(Picture(
album: albumID,
path: savedImage.path,
thumbPath: finalThumbImage.path,
timestamp: Timestamp.now()));
setState(() {
loadingScreen = true;
});
}
While the loop is working, I show a loading screen Widget with an loading animation:
return loadingScreen == true ? LoadingScreen() : Scaffold()
What I expect A clean loading screen while the for loop duration with smooth animation
What I get Extreme flickering and lagging on the animation. After each image was edited, the animation stops. So I get something like a stop motion animation.
What could be the issue here?
Related
I'm using this Rotate function in Flutter application but if I use this rotated image the background color will be black but I need the background color in the image to be white.
Future rotateImage(String imagePath, double rotationValue) async {
File imageFile = File(imagePath);
var decodedImage = await decodeImageFromList(imageFile.readAsBytesSync());
List<int> imageBytes = await imageFile.readAsBytes();
var originalImage = img.decodeImage(Uint8List.fromList(imageBytes));
img.Image fixedImage = img.copyRotate(originalImage!,
angle: rotationValue, interpolation: img.Interpolation.average);
var fixedFile = await imageFile.writeAsBytes(img.encodePng(
fixedImage,
));
return fixedFile;
}
It would be appreciated if anyone could help me
I have implmented image picker, it is working great on both ios and android.
However, after i have captured an image, it is taking quite long for it to appear on my Image.file(image) widget.
I cannot decrease the quality of image, as it matters in the app.
So i need something like CachedNetworkImage but to load from file, not from internet, any ideas?
I just want to show an progress bar or indicator, just to let the user know that there is a process.
File? image;
Future pickImage(ImageSource source, BuildContext context) async {
try {
final image = await ImagePicker().pickImage(source: source);
if (image == null) return;
var imageTemporary = File(image.path);
if (source == ImageSource.camera) {
final img.Image? capturedImage =
img.decodeImage(await File(image.path).readAsBytes());
final img.Image orientedImage = img.bakeOrientation(capturedImage!);
imageTemporary =
await File(image.path).writeAsBytes(img.encodeJpg(orientedImage));
}
setState(() {
this.image = imageTemporary;
});
} on PlatformException catch (e) {print(e.toString());}
}
Thats my function to call image picker.
And passing it to ElevatedButton like:
I'm using import 'package:image/image.dart' as imgs; this package
I can perfectly create a GIF but i cannot set the delay transition for every frame, Here's my code:
List<int>? generateGIF(Iterable<imgs.Image> images) {
final imgs.Animation animation = imgs.Animation();
for (imgs.Image image in images) {
animation.addFrame(image);
}
return imgs.encodeGifAnimation(animation);
}
My question is, how to put a delay for each frame?.
for example, 1000 milliseconds to each frame transition.
try this,
List<int>? generateGIF(Iterable<imgs.Image> images) {
final imgs.Animation animation = imgs.Animation();
for (imgs.Image image in images) {
image.duration = 1;
animation.addFrame(image);
}
return imgs.encodeGifAnimation(animation);
}
My flutter app crashes when pressing of back button while picking an image.How can I solve that?
Here is Image picking part
_openGallery(BuildContext context) async{
var picture = await ImagePicker.pickImage(source: ImageSource.gallery);
this.setState((){
imageFile = picture;
});
if (picture==null) {
Navigator.of(context).pop();
} else{
final File newImage = await imageFile.copy('$_localPath/name.jpg');
}
Navigator.of(context).pop();
}
I'm making a kind-of painting app that has you paint over a background image. There's a couple of tools like pen and then there's eraser. Ideally, we would just paint over the background color, but it's an image. We had the idea of removing the points that were under our finger as we panned across the screen but the offsets and the local position didn't match (they were like 40 (units?) off).
onPanUpdate: (DragUpdateDetails details) {
//Adds the point you are tapping on to the '_points' list as Offset(x,y). Later we draw those points.
if (tool == 'pen') {
RenderBox object = context.findRenderObject();
Offset _localPosition =
object.globalToLocal(details.globalPosition);
_points = List.from(_points)..add(_localPosition);
} else if (tool == 'eraser') {
RenderBox object = context.findRenderObject();
Offset _localPosition =
object.globalToLocal(details.globalPosition);
_points = List.from(_points)
..removeWhere(
(offset) {
if (offset == null) return false;
if (offset.dx.round() == _localPosition.dx.round() &&
offset.dy.round() == _localPosition.dy.round()) {
return true;
}
return false;
},
);
//This part is not working.
}
setState(() {});
},
If there's another method that I could use, that would be great but I can't see one as of now.