[Flutter] Image_picker 갤러리, 카메라에서 사진 선택하고 보여주기.

개요

• 플러터에서 갤러리에 접근하거나 사진을 찍어서 해당 사진을 활용해야 하는 경우가 있다. 이때 사용할 수 있는 플러그인을 알아보자

라이브러리

---

image_picker

• 이미지 피커 라이브러리 사이트.
• 안드로이드와 Ios에서 갤러리 혹은 카메라를 통해서 이미지를 선정하고 받아올 수 있다
• 요구사항
  • Android : SDK 21+
  • Ios : IOS 9+

설치

• image_picker를 사용하기 위해서 pubspec.yaml에 추가 해줘야 한다 아래의 코드를 터미널에서 실행시켜 주면 된다.

flutter pub add image_picker

• 그러면 pubspec.yaml파일 안에 다음과 같은 패키지가 추가될 것이다

dependencies: image_picker: ^0.8.6

• 그리고 사용하고자 하는 dart 파일 안에 임포트 해주면 된다

import 'package:image_picker/image_picker.dart';

사용법

• 이미지를 받아와서 캐시에 저장할 수 있는 클래스를 선언한다

final ImagePicker _picker = ImagePicker();

• 갤러리에서 이미지를 받아오는 Future 형태 함수를 선언

Future imagepick() async {

final image = await _picker.pickImage(source: ImageSource.gallery);

setState(() {

_image = File(image!.path); // dart:io단에서 설명하겠음

});

}

Dart:io

• 파일, 소켓, HTTP 및 기타 I/O 지원.

사용

• dart파일 상단에 아래의 라이브러리를 임포트

import 'dart:io';

사용법

• 앞서 말한 형태의 파일을 변수에 저장해주기 위해 선언

File _image;

• 앞서 캐시에 저장된 이미지를 File에 옮겨서 사용하기 위해서 경로를 지정해준다

setState(() { _image = File(camera!.path); // 이부분 ★★★ });

• 파일 출력 : 파일의 경로를 그대로 Image.file()에 넣어주면 된다

Image.file(File(_image!.path))

전체 소스코드

• 아래의 소스코드를 MaterialApp(안에) 넣어주면 된다.
• camera.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';


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

  @override
  State<CameraOpen> createState() => _CameraOpenState();
}

class _CameraOpenState extends State<CameraOpen> {
  final ImagePicker _picker = ImagePicker();
  File? _image;

  Future imagepick() async {
    final image = await _picker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = File(image!.path);
    });
  }

  Future camerapick() async {
    final camera = await _picker.pickImage(source: ImageSource.camera);
    setState(() {
      _image = File(camera!.path);
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 8,
            child: Container(

              color: _image==null ? Colors.blueGrey[50] : Colors.white,
              height: double.infinity,
              width: double.infinity,
              child: _image==null
                ? Center(child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                  children: [Icon(Icons.image_not_supported_outlined, size: 50,),
                    Text('no images', style: TextStyle(fontSize: 20),),
                  ],
                ))
              : Image.file(File(_image!.path),fit: BoxFit.fitWidth,
              )),
          ),
          Expanded(
            flex: 2,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                TextButton(
                  child: Icon(Icons.add),
                  onPressed: () async {
                    camerapick();
                  },
                ),
                TextButton(
                    child: Icon(Icons.image),
                    onPressed: () {
                      setState(() {
                        imagepick();
                      });
                    },
                ),

              ],
            ),
          )
        ],
      ),
    );
  }
}

~

.