Flutter에서 카메라 전환

the last blog post에서는 카메라 패키지를 사용하여 Flutter에서 사진을 찍는 방법을 보여줍니다. 이 블로그 게시물에서는 휴대폰의 여러 카메라 간에 전환하는 방법을 설명하여 카메라에 대해 자세히 설명합니다.

previous blog post 의 결과로 이 예제를 시작하겠습니다. 해당 블로그 게시물에서 카메라의 미리 보기를 표시하고 사진을 찍는 데 필요한 모든 단계를 설명합니다. 단계 중 하나는 첫 번째 카메라로 컨트롤러를 초기화하는 것입니다. 다음으로, 앱은 다음 코드 줄을 사용하여 시작하는 동안 전화기에서 사용 가능한 모든 카메라를 찾습니다.

  cameras = await availableCameras();

저는 항상 같은 카메라 설명을 사용하여 컨트롤러를 초기화합니다. 불행히도 이는 사용자가 다른 카메라와 상호 작용할 수 없음을 의미합니다. 그래서 그것을 바꾸자! 첫 번째 단계는 각 카메라에 대한 버튼을 추가하는 것입니다. 새 장치의 카메라 수가 증가함에 따라 다른 접근 방식을 사용할 수도 있지만 동일한 아이디어를 사용할 수 있습니다.

class CameraSelectionWidget extends StatelessWidget {
  final CameraDescription selectedCamera;

  const CameraSelectionWidget({Key? key, required this.selectedCamera}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<Widget> toggles = [];
    for (final CameraDescription cameraDescription in cameras) {
      toggles.add(
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Radio<CameraDescription>(
                    groupValue: selectedCamera,
                    value: cameraDescription,
                    onChanged: (value) {
                      //
                    },
                  ),
                  Icon(
                    getCameraLensIcon(cameraDescription.lensDirection, context),
                  ),
                ],
              ),
            )
          ],
        ),
      );
    }
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: toggles,
      ),
    );
  }
}

IconData getCameraLensIcon(CameraLensDirection direction, BuildContext context) {
  switch (direction) {
    case CameraLensDirection.back:
      return Icons.camera_rear;
    case CameraLensDirection.front:
      return Icons.camera_front;
    case CameraLensDirection.external:
      return Icons.camera;
  }
}

이 위젯은 옆에 라디오 버튼이 있는 사용 가능한 모든 카메라를 표시합니다. 카메라가 사용 중이면 라디오 버튼이 활성화됩니다. 또한 카메라의 방향에 따라 아이콘을 결정합니다. 그러나 다른 카메라를 선택해도 아직 아무 것도 변경되지 않습니다. 이를 위해 컨트롤러를 업데이트하기 위한 콜백을 제공해야 합니다.

  void updateController(CameraDescription description) {
    controller?.dispose().then((value) {
      setState(() {});
      controller = CameraController(description, ResolutionPreset.max);
      controller!.initialize().then((_) {
        setState(() {});
      });
    });
  }

여기서 컨트롤러를 다시 초기화하고 카메라가 초기화되면 위젯을 업데이트합니다. 카메라 선택 위젯에서 이 메서드를 호출하려면 카메라 선택 위젯에 메서드를 제공해야 합니다. 또한 미리 보기를 스택으로 래핑합니다. 이렇게 하면 미리 보기 위에 카메라 선택을 그릴 수 있습니다.

Stack(
    children: [
      SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: CameraPreview(controller!),
      ),
      CameraSelectionWidget(
        selectedCamera: controller!.description,
        onChanged: updateController,
      ),
    ],
    )

함수를 처리하려면 생성자 메서드에 추가해야 하며, 그런 다음 라디오 버튼의 onchanged가 트리거될 때 메서드를 호출할 수 있습니다.

class CameraSelectionWidget extends StatelessWidget {
  final CameraDescription selectedCamera;
  final Function(CameraDescription) onChanged;

  const CameraSelectionWidget({Key? key, required this.selectedCamera, required this.onChanged}) : super(key: key);

// and the change in the radio button:

  Radio<CameraDescription>(
    groupValue: selectedCamera,
    value: cameraDescription,
    onChanged: (value) {
      onChanged(value!);
    },
  ),

이 단계는 Flutter 애플리케이션에서 카메라 간에 전환하는 데 필요한 전부입니다! 이 모든 것은 camera package에 대한 많은 사람들의 작업 덕분에 가능했습니다! 이 예제의 코드는 여기Github에서 사용할 수 있습니다. 여전히 질문, 의견, 제안, 발언이 있으면 알려주세요!

게시물 Switching camera’s in Flutter이 Barttje에 처음 나타났습니다.