[chapter 72 of the flutter problem series] a solution to the problem that pictures taken in the flutter using the camera plug-in are stretched

This is a 【Flutter Question Series No 72 piece 】, If it works , Welcome to the column .

Flutter SDK：2.5.0,Dart SDK：2.14,Android Studio ：2021.2.1 Pathc 1.

One ： Problem description

To customize the camera page in the project , So we use the official Camera plug-in unit , The code to build the camera view is as follows

  ///  Build camera view 
  Widget _cameraView() {
    
    return CameraPreview(cameraController);
  }

But when taking pictures , But there is a problem that the image is stretched , As shown in the figure below

After testing , Although the actual shooting effect is normal , But this kind of situation like the long leg effect is not what we want , How to solve this problem ？

Two ： Solution

It's used here Transform Component's scale attribute , Get the ratio of the aspect ratio of the camera to the pixel ratio of the device , As Transform Zoom ratio of , The modified code is as follows

  ///  Build camera view 
  Widget _cameraView() {
    
  	//  Equipment size 
    final Size size = MediaQuery.of(context).size;
    //  Device pixel ratio 
    final double deviceRatio = size.width / size.height;
    //  Camera aspect ratio 
    final double aspectRatio = cameraController.value.aspectRatio;
    return Center(
      child: Transform.scale(
        scale: aspectRatio / deviceRatio,
        child: AspectRatio(
          aspectRatio: aspectRatio,
          child: Center(child: CameraPreview(cameraController)),
        ),
      ),
    );
  }

The effect picture after modification is as follows

You can see , The image is no longer stretched ,good.

Has your problem been solved ？ Feel free to leave a comment in the comments section .

A gift of rose , Fragrance in hand , If you think the article is good , I hope you can give me one button three times , thank .

---

Conclusion

Google Of Flutter More and more fire , end 2022 year 6 month 29 Japan GitHub Target star has reached 142K,Flutter Determination is a trend , So as a front-end Developer , There is no reason not to study as soon as possible .

No matter you are Flutter Novices are still getting started , You might as well pay attention to , In the future, I will Flutter Common components in （ Contains source code analysis 、 Usage and precautions of components ） As well as possible problems CSDN Blog , I hope I can learn at the same time , It can also help more people .