[flutter] 플러터(Flutter)로 갤러리 앱 개발하기

18 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter)를 사용하여 갤러리 앱을 어떻게 개발하는지에 대해 알아보겠습니다.

1. 필요한 패키지 설치하기

플러터에서 갤러리 앱을 개발하기 위해서는 다음과 같은 패키지가 필요합니다.

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.4+4
  permission_handler: ^8.1.4
  photo_view: ^0.11.0

2. 권한 처리하기

갤러리에 접근하기 위해서는 권한이 필요합니다. permission_handler 패키지를 사용하여 권한을 처리할 수 있습니다.

import 'package:permission_handler/permission_handler.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    _checkPermission();

    return MaterialApp(
      // 앱 내용
    );
  }

  void _checkPermission() async {
    if (await Permission.storage.request().isGranted) {
      // 권한이 승인된 경우
    } else {
      // 권한 요청
    }
  }
}

3. 갤러리 이미지 불러오기

image_picker 패키지를 사용하여 갤러리에서 이미지를 선택할 수 있습니다.

import 'package:image_picker/image_picker.dart';

final picker = ImagePicker();
final pickedFile = await picker.getImage(source: ImageSource.gallery);
if (pickedFile != null) {
  // 이미지 선택 완료
}

4. 그리드 뷰로 이미지 화면에 표시하기

선택한 이미지들을 그리드 뷰로 화면에 표시할 수 있습니다.

import 'package:flutter/material.dart';

class ImageGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
      itemBuilder: (BuildContext context, int index) {
        return Image.network('이미지 주소');
      },
    );
  }
}

이렇게 위의 네 가지 단계를 거쳐 플러터로 갤러리 앱을 개발할 수 있습니다. 만약 추가적인 기능이 필요하다면 photo_view 패키지를 사용하여 이미지를 확대/축소할 수 있습니다.

목차

1. 필요한 패키지 설치하기

2. 권한 처리하기

3. 갤러리 이미지 불러오기

4. 그리드 뷰로 이미지 화면에 표시하기

참고 자료