포토네컷 앱 제작

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

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

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  var imagePicker = ImagePicker();
  var selectedimage1 = null;
  var selectedimage2 = null;
  var selectedimage3 = null;
  var selectedimage4 = null;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        centerTitle: true,
        title: Text('포토네컷'),
        elevation: 0,
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.white,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Expanded(
              child: InkWell(
                onTap: () async {
                  var xfile =
                      await imagePicker.pickImage(source: ImageSource.gallery);
                  if (xfile != null) {
                    selectedimage1 = xfile;
                    setState(() {});
                  }
                },
                child: Container(
                  decoration: BoxDecoration(
                    image: selectedimage1 != null
                        ? DecorationImage(
                            fit: BoxFit.fill,
                            image: FileImage(File(selectedimage1.path)))
                        : null,
                    color: Colors.white30,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 5,
            ),
            Expanded(
              child: InkWell(
                onTap: () async {
                  var xfile =
                      await imagePicker.pickImage(source: ImageSource.gallery);
                  if (xfile != null) {
                    selectedimage2 = xfile;
                    setState(() {});
                  }
                },
                child: Container(
                  decoration: BoxDecoration(
                    image: selectedimage2 != null
                        ? DecorationImage(
                            fit: BoxFit.fitWidth,
                            image: FileImage(File(selectedimage2.path)))
                        : null,
                    color: Colors.white30,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 5,
            ),
            Expanded(
              child: InkWell(
                onTap: () async {
                  var xfile =
                      await imagePicker.pickImage(source: ImageSource.gallery);
                  if (xfile != null) {
                    selectedimage3 = xfile;
                    setState(() {});
                  }
                },
                child: Container(
                  decoration: BoxDecoration(
                    image: selectedimage3 != null
                        ? DecorationImage(
                            fit: BoxFit.cover,
                            image: FileImage(File(selectedimage3.path)))
                        : null,
                    color: Colors.white30,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 5,
            ),
            Expanded(
              child: InkWell(
                onTap: () async {
                  var xfile =
                      await imagePicker.pickImage(source: ImageSource.gallery);
                  if (xfile != null) {
                    selectedimage4 = xfile;
                    setState(() {});
                  }
                },
                child: Container(
                  decoration: BoxDecoration(
                    image: selectedimage4 != null
                        ? DecorationImage(
                            image: FileImage(File(selectedimage4.path)))
                        : null,
                    color: Colors.white30,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 5,
            ),
          ],
        ),
      ),
    );
  }
}

왜 갤러리에 사진이 없는지는 모르겠네..

클라썸에 올라온 공지를 보고 FileImage로도 바꿨는데..

그래서 갤러리말고 카메라로 했는데 카메라도 저 화면 하나만 나와서 Boxfit만 다르게 줬습니다..