미카 프로젝트

Camera를 활용한 기능을 만들고 싶을때가 많은데요.

그럴때를 대비해서 하나 예제를 만들어 두었습니다.

먼저 pubspec.yaml에 camera pacakge를 import 합니다.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  camera:
  get: ^4.6.5

아래 코드를 프로젝트에 추가합니다. 

getx 기반으로 작성된 코드입니다.

import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class TakePhotoPage extends StatefulWidget{



  @override
  State<TakePhotoPage> createState() => _TakePhotoPageState();

  const TakePhotoPage({super.key});
}

class _TakePhotoPageState extends State<TakePhotoPage> {
  late final List<CameraDescription>cameras ;

  CameraController? _controller;
  late var _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    availableCamera();

  }
  void availableCamera() async{
    cameras = await availableCameras();
    if(cameras.isEmpty) return;

    setState(() {
      _controller = CameraController(cameras[0], ResolutionPreset.high);
      _initializeControllerFuture = _controller!.initialize();
    });
  }


  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();

  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body : SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: _controller == null?Container(): FutureBuilder<void>(
            future: _initializeControllerFuture,
            builder:(context, snapshot){
              if(snapshot.connectionState == ConnectionState.done){
                return CameraPreview(_controller!);
              }else{
                return const Center(child: CircularProgressIndicator());
              }
            }
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
        child:const Icon(Icons.camera_alt),
        onPressed: () async{
          final image = await _controller?.takePicture();
          if(image == null) return;
          // TODO: 사진 촬령후 image를 가지고 하고자 하는 작업 진행
          // ex)
          //   Get.back()  => 이전 화면으로 이동
          //   Get.off( NewPage()); // NewPage()로 이동

        },),
    );
  }
}

해피 코딩 !!