Flutter로 사진 찍기

이 블로그 게시물에서는 camera package을 사용하여 Flutter에서 사진을 찍는 방법을 보여드리겠습니다. 또한 결과 파일을 처리하는 방법에 대한 예를 제공합니다. 이 예에서는 그림을 표시하기 위해 다른 페이지를 엽니다. 카메라 패키지의 기능 대부분이 작동하더라도 플러그인은 아직 개발 중이며 일부 API는 변경될 수 있습니다.

프로젝트 설정

코딩을 시작하기 전에 프로젝트에 camera package을 추가하겠습니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  camera: ^0.9.4+14

다음 명령을 실행하여 종속성을 설치하는 것을 잊지 마십시오.

flutter pub get

Android 및 IO 설정이 올바른지 확인하기에 좋은 시기이기도 합니다. Android의 경우 android/app/build.gradle 파일의 minSdkVersion이 21 이상인지 확인해야 합니다. IO의 경우 10.0 미만 버전용으로 컴파일하는 경우에만 변경하면 됩니다. 이러한 변경 사항이 포함된 지침이 나열됩니다here.

카메라 미리보기

카메라 미리보기를 표시하려면 먼저 카메라를 초기화해야 합니다. availableCameras 메서드를 호출하여 이 작업을 수행합니다. 이 방법은 카메라 패키지에서 제공합니다. 이 메서드는 애플리케이션을 실행하는 장치에서 사용 가능한 카메라를 반환합니다. 메서드가 비동기식이므로 로드될 때까지 응용 프로그램 시작을 지연시킵니다.

List<CameraDescription> cameras = [];

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  cameras = await availableCameras();
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: CameraApp(),
    ),
  );
}

이제 카메라 목록이 생겼습니다. 이것을 사용하여 새CameraController를 생성해 보겠습니다. 새 카메라 컨트롤러를 만들려면 카메라와 해상도가 필요합니다. 이 예에서는 최대 해상도와 첫 번째 카메라를 사용합니다. 카메라 미리보기로 보기를 업데이트하려면 컨트롤러가 초기화될 때까지 기다려야 setState 메서드를 호출할 수 있습니다. 이 방법을 사용하면 위젯이 업데이트되어 카메라의 현재 미리보기를 표시합니다.

카메라 컨트롤러의 현재 보기를 표시하기 위해 CameraPreview 위젯을 사용할 수 있습니다. 이 위젯은 카메라의 현재 결과를 보여줍니다. CameraPreview가 전체 화면을 차지하도록 SizedBox를 사용합니다.

class CameraApp extends StatefulWidget {
  const CameraApp({Key? key}) : super(key: key);

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

class _CameraAppState extends State<CameraApp> {
  late CameraController controller;

  @override
  void initState() {
    super.initState();
    controller = CameraController(cameras[0], ResolutionPreset.max);
    controller.initialize().then((_) {
      setState(() {});
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!controller.value.isInitialized) {
      return Container();
    }
    return Scaffold(
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: CameraPreview(controller),
      ),
    );
  }
}

사진 찍기

이제 애플리케이션이 카메라 뷰의 현재 결과를 보여줍니다. 사진을 찍자. 사진을 찍기 전에 먼저 위젯에 버튼을 추가해 보겠습니다.

return Scaffold(
  body: SizedBox(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    child: CameraPreview(controller),
  ),
  floatingActionButton: FloatingActionButton(
    child: const Icon(Icons.camera),
    onPressed: () {
        // todo
    },
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);

버튼을 누르면 사진을 찍을 수 있습니다. 컨트롤러에서 해당 메소드를 호출하여 사진을 찍을 수 있습니다. 이 메서드는 파일을 반환합니다. 이 파일은 다양한 방법으로 사용될 수 있지만 카메라의 결과를 보여주기 위해 디스플레이 위젯에 파일을 제공합니다.

controller.takePicture().then((value) {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => ImageDisplayWidget(
        imagePath: value.path,
      ),
    ),
  );
});

ImageDisplayWidget은 단순히 이미지 위젯에 파일을 표시하여 이미지를 표시합니다.

class ImageDisplayWidget extends StatelessWidget {
  final String imagePath;

  const ImageDisplayWidget({Key? key, required this.imagePath}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Image.file(File(imagePath))),
    );
  }
}

이것은 Flutter 애플리케이션에서 사진을 찍는 데 필요한 모든 것입니다! 이 예제의 코드는 여기Github에서 찾을 수 있습니다. 여전히 질문, 의견, 제안 또는 기타 의견이 있으면 언제든지 알려주세요!

게시물 Taking pictures with Flutter이 Barttje에 처음 나타났습니다.