코딩하는 제리

[Flutter/Project](Instagram Clone) 갤러리 사진 선택 미리보기 본문

Flutter/Project_InstaClone(완)

[Flutter/Project](Instagram Clone) 갤러리 사진 선택 미리보기

JerryCho 2021. 2. 1. 17:57


SharePostScreen으로 새 화면을 띄워 이미지를 보여주기 위해서는

local_image_provider를 통해 만들어진 갤러리 이미지를 File로 변경해야한다.

하지만 다이렉트로 localImage -> File로 변경이 불가능하기에

localImage -> bytes -> File 형식으로 변경한다.


소스코드 및 pubspec.yaml

// widgets/my_gallery.dart

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/models/gallery_state.dart';
import 'package:flutter_project_IJ/screens/share_post_screen.dart';
import 'package:local_image_provider/device_image.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:provider/provider.dart';

class MyGallery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<GalleryState>(
      builder: (BuildContext context, GalleryState galleryState, Widget child) {
        return GridView.count(
          crossAxisCount: 3,
          children: getImages(context, galleryState),
        );
      },
    );
  }

  List<Widget> getImages(BuildContext context, GalleryState galleryState) {
    return galleryState.images
        .map((localImage) => InkWell(
              onTap: () async {
                // 로컬 이미지를 File 형식으로 바로 변경할 수 없기에
                // 로컬 이미지를 byte 이미지로 변경해야함.
                Uint8List bytes = await localImage.getScaledImageBytes(
                    galleryState.localImageProvider, 0.3);

                final String timeInMilli =
                    DateTime.now().millisecondsSinceEpoch.toString();
                try {
                  // 이미지 저장 경로 및 파일이름
                  // getTemporaryDirectory()).path -> 임시경로(path_provider)
                  final path = join(
                      (await getTemporaryDirectory()).path, '$timeInMilli.png');
                  // .. -> File 생성 후 writeAsBytesSync(bytes) 실행.
                  // File을 bytes 목록으로 작성 후 imageFile 변수에 저장.
                  File imageFile = File(path)..writeAsBytesSync(bytes);
                  // 사진 선택시 미리보기 화면으로 넘어감.
                  // byte로 변환된 imageFile을 SharePostScreen 클래스로 넘김.
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (_) => SharePostScreen(imageFile)));
                } catch (e) {}
              },
              child: Image(
                // 갤러리 이미지 표시.
                image: DeviceImage(localImage),
              ),
            ))
        .toList();
  }
}
Comments