[Flutter/Project](Instagram Clone) 갤러리 이미지 BoxFit 및 scale 축소 추가

---

my_gallery.dart/getImages 메서드

 

BoxFit 추가 설명

coding-jerry.tistory.com/14

[Flutter/Project](Instagram Clone) 온라인 이미지 불러오기

 

---

소스코드 및 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.5);

                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(
                // 이미지 1대1 사이즈 맞춤.
                fit: BoxFit.cover,
                // 갤러리 이미지 표시.
                // 원본의 10% 사이즈로 표시(메모리 부족).
                image: DeviceImage(localImage, scale: 0.1),
              ),
            ))
        .toList();
  }
}