<aside> ❓ 1. 패키지 image_picker를 활용하여 다음의 UI를 만들어주세요.

• gif

• Requirements

  • 네모 컷 위젯을 한 번 탭하면 이미지를 선택할 수 있도록 갤러리를 불러옵니다.
  • 이 때 이미지를 선택할 경우 해당 네모 컷 위젯에 선택된 이미지로 대체됩니다.
    • 다시 한 번 클릭해서 이미지를 바꿀 수 있습니다.
  • 네모 컷 위젯을 더블클릭하면 기존의 이미지가 없어지도록 합니다.
  • 최대한 코드를 줄여볼 수 있도록 합니다. </aside>

• List.generate를 사용하여 사진을 넣을 위젯들을 생성하고, List.generate로 생성할 위젯들은 photoItem 파일으로 분리해 photoItem에 함수와 선택한 이미지를 넘겨주는 방식으로 이미지를 선택했을 때 리스트를 업데이트하도록 구현했습니다

• main.dart

  import 'package:flutter/material.dart';
  
  import 'photo4cut.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        theme: ThemeData.dark(),
        home: Photo4cut(),
      );
    }
  }
  

• photoItem.dart

  import 'dart:io';
  
  import 'package:flutter/material.dart';
  import 'package:image_picker/image_picker.dart';
  
  class PhotoItem extends StatelessWidget {
    const PhotoItem({Key? key, required this.onImageSelected, this.selectedImage,}) : super(key: key);
  
    // 이미지 선택 시 호출할 함수
    final Function(XFile?) onImageSelected;
    final XFile? selectedImage;
  
    @override
    Widget build(BuildContext context) {
      return GestureDetector(
        onTap: () async {
          var image = await ImagePicker().pickImage(source: ImageSource.gallery);
          onImageSelected(image);
        },
        onDoubleTap: () {
          onImageSelected(null);
        },
        child: Container(
          width: 300,
          height: 150,
          color: Colors.grey[900],
          child: selectedImage == null
              ? null
              : Image.file(File(selectedImage!.path), fit: BoxFit.cover),
        ),
      );
    }
  }
  

• photo4cut.dart

  import 'package:flutter/material.dart';
  import 'package:image_picker/image_picker.dart';
  
  import 'photoItem.dart';
  
  class Photo4cut extends StatefulWidget {
    const Photo4cut({Key? key}) : super(key: key);
  
    @override
    State<Photo4cut> createState() => _Photo4cutState();
  }
  
  class _Photo4cutState extends State<Photo4cut> {
    // 이미지가 담길 변수를 null로 미리 초기화해두기
    List<XFile?> selectedImageList = List<XFile?>.filled(4, null);
  
    @override
    Widget build(BuildContext context) {
  
      return Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          centerTitle: true,
          title: Text('포토네컷'),
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: List.generate(4, (index) => Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: PhotoItem(
                    selectedImage: selectedImageList[index],
                    // 이미지 선택 시 selectedImageList 업데이트
                    onImageSelected: (XFile? image) {
                      setState(() {
                        selectedImageList[index] = image;
                      });
                    },
                  ),
                ),
              ),
            ),
          ),
        ),
      );
    }
  }