Lukas Fürst
Lukas Fürst

Reputation: 143

Flutter turns picture, windows-explorer displays it wrong, Android Studio correct

I have a problem in my flutter project.

When I take a picture, it is displayed -90 deg turned, in Android Studio/IntelliJ it is displayed correctly, and in windows explorer, it is again -90 deg turned.

This is my code for taking the picture:

  Future<void> _savePictureInBackground(Future<XFile> picture) async {
    // Get the directory to save the image
    final directory = await getApplicationDocumentsDirectory();
    final imagePath = join(directory.path, '${DateTime.now()}.png');

    // Save the picture to the specified path
    await (await picture).saveTo(imagePath);
  }

  Future<XFile> _computePicture() {
    Future<XFile> picture = controller!.takePicture();
    _savePictureInBackground(picture);
    return picture;
  }

  Future<void> _takePicture() async {
    try {
      if (!controller!.value.isInitialized) {
        print('Error: Camera is not initialized.');
        return;
      }

      int savelocation = 0;

      if (selectedSquareId <= 5) {
        savelocation = selectedSquareId;
      } else {
        int maxId = myActualPicture.keys.reduce((a, b) => a > b ? a : b);
        if (maxId <= 5) {
          maxId = 6;
        } else {
          maxId++;
        }
        savelocation = maxId;
      }

      myActualPictureFutures[savelocation] = _computePicture();

    } catch (e) {
      print('Error taking picture: $e');
    }
    setState(() {
      selectedSquareId++;
    });
  }

This is how it is shown in Flutter (the big is the camera feed - left down in the corner you can see the displayed picture): in Flutter

This is how I display the picture with a futurebuilder:

Container(
    width: 100,
    height: 75,
    decoration: BoxDecoration(
      border: Border.all(color: Colors.red, width: 2),
    ),
    child: Stack(
      children: [
        if (myActualPictureFutures.containsKey(id))
          FutureBuilder<XFile>(
            future: myActualPictureFutures[id],
            builder: (BuildContext context, AsyncSnapshot<XFile> snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Center(child: CircularProgressIndicator()); // Show loading indicator while processing
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}'); // Display error if something goes wrong
              } else if (snapshot.hasData) {
                return Container(
                  width: 100,
                  height: 75,
                  child: Image(
                    image: XFileImage(snapshot.data!),
                    fit: BoxFit.cover,
                  ),
                );
              } else {
                return Text('No Image Available');
              }
            },
          )
        else
          Container(
            color: Colors.black,
            width: 100,
            height: 75,
          ),
      ],
    ),
  )

This is how the picture is shown in Android Studio: Android Studio

And this is picture in windows explorer: picture in windows explorer

What can I do, that the picture is shown correctly turned?

Upvotes: 0

Views: 14

Answers (0)

Related Questions