[Flutter/Project](Instagram Clone) camera preview 비율 변경

---

비율에 따른 camera preview 생성.

많은 디바이스에 같은 화면을 적용시키기 위해서는 필요할 듯 싶다.

stackoverflow.com/questions/59207590/how-to-set-34-aspect-ratio-flutter-camera-preview

How to set 3:4 Aspect Ratio Flutter camera preview

---

소스코드 및 pubspec.yaml

// take_photo.dart

import 'dart:io';

import 'package:camera/camera.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/constants/screen_size.dart';
import 'package:flutter_project_IJ/models/camera_state.dart';
import 'package:flutter_project_IJ/screens/share_post_screen.dart';
import 'package:flutter_project_IJ/widgets/my_progress_indicator.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:provider/provider.dart';

class TakePhoto extends StatefulWidget {
  const TakePhoto({
    Key key,
  }) : super(key: key);

  @override
  _TakePhotoState createState() => _TakePhotoState();
}

class _TakePhotoState extends State<TakePhoto> {
  Widget _progress = MyProgressIndicator();

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (BuildContext context, CameraState cameraState, Widget child) {
        return Column(
          children: [
            Container(
              color: Colors.black,
              // height: size.width,
              // width: size.width,
              child: (cameraState.isReadyToTakePhoto)
                  ? _getPreview(cameraState)
                  : _progress,
            ),
            Expanded(
              child: OutlineButton(
                onPressed: () {
                  // 카메라 준비 확인.
                  if (cameraState.isReadyToTakePhoto) {
                    _attemptTakePhoto(cameraState, context);
                  }
                },
                shape: CircleBorder(),
                borderSide: BorderSide(
                  color: Colors.black12,
                  width: 20,
                ),
              ),
            )
          ],
        );
      },
    );
  }

  Widget _getPreview(CameraState cameraState) {
    return
      Transform.scale(
      scale: 1.0,
      child: AspectRatio(
        aspectRatio: 3.0 / 4.0,
        child: OverflowBox(
          alignment: Alignment.center,
          child: FittedBox(
            fit: BoxFit.fitWidth,
            child: Container(
              width: size.width,
              height: size.width / cameraState.controller.value.aspectRatio,
              child: Stack(
                children: [
                  CameraPreview(cameraState.controller),
                ],
              ),
            ),
          ),
        ),
      ),
    );
    //   ClipRect(
    //   // OverflowBox로 넘어간 부분을 제거.
    //   child: OverflowBox(
    //     alignment: Alignment.center,
    //     child: FittedBox(
    //       // 가로사이즈에 맞춤.
    //       fit: BoxFit.fitWidth,
    //       child: Container(
    //         width: size.width,
    //         height: size.width/cameraState.controller.value.aspectRatio,
    //         child: CameraPreview(cameraState.controller),
    //       ),
    //     ),
    //   ),
    // );
  }

  void _attemptTakePhoto(CameraState cameraState, BuildContext context) async {
    final String timeInMilli = DateTime.now().millisecondsSinceEpoch.toString();
    try {
      // 이미지 저장 경로 및 파일이름
      // getTemporaryDirectory()).path -> 임시경로(path_provider)
      final path =
          join((await getTemporaryDirectory()).path, '$timeInMilli.png');
      // 사진 촬영
      await cameraState.controller.takePicture(path);

      File imageFile = File(path);
      // 사진 촬영 후 미리보기 화면으로 넘어감.
      Navigator.push(context,
          MaterialPageRoute(builder: (_) => SharePostScreen(imageFile)));
    } catch (e) {}
  }
}