포토네컷 ImagePicker

[name27]

ListView.builder

import 'dart:io';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.from(colorScheme: ColorScheme.dark()),
      home: MainPage(),
    );
  }
}

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

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

class _MainPageState extends State<MainPage> {
  var imagePicker = ImagePicker();
  Map<int, dynamic> imgMap = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('포토네컷'),
        centerTitle: true,
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: Center(
          child: ListView.builder(
        itemCount: 4,
        itemBuilder: (context, index) => Column(
          children: [
            imgMap[index] == null
                ? Container(
                    width: 250,
                    height: 135,
                    decoration: BoxDecoration(color: Colors.white12),
                    child: GestureDetector(
                      onTap: () async {
                        var image = await imagePicker.pickImage(
                            source: ImageSource.gallery);
                        if (image != null) {
                          imgMap[index] = image;
                          setState(() {});
                        }
                      },
                    ),
                  )
                : Container(
                    width: 250,
                    height: 135,
                    decoration: BoxDecoration(
                        color: Colors.white12,
                        image: DecorationImage(
                            image: FileImage(File(imgMap[index]!.path)),
                            fit: BoxFit.contain)),
                    child: GestureDetector(
                      onTap: () async {
                        var image = await imagePicker.pickImage(
                            source: ImageSource.gallery);
                        if (image != null) {
                          imgMap[index] = image;
                          setState(() {});
                        }
                      },
                      onDoubleTap: () {
                        imgMap.remove(index);
                        setState(() {});
                      },
                    ),
                  ),
            SizedBox(
              height: 15,
            )
          ],
        ),
      )),
    );
  }
}

[name27]

for문

import 'dart:io';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.from(colorScheme: ColorScheme.dark()),
      home: MainPage(),
    );
  }
}

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

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

class _MainPageState extends State<MainPage> {
  var imagePicker = ImagePicker();
  Map<int, dynamic> imgMap = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('포토네컷'),
          centerTitle: true,
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              for (int index = 0; index < 4; index++)
                imgMap[index] == null
                    ? Container(
                        width: 250,
                        height: 135,
                        decoration: BoxDecoration(color: Colors.white12),
                        child: GestureDetector(
                          onTap: () async {
                            var image = await imagePicker.pickImage(
                                source: ImageSource.gallery);
                            if (image != null) {
                              imgMap[index] = image;
                              setState(() {});
                            }
                          },
                        ),
                      )
                    : Container(
                        width: 250,
                        height: 135,
                        decoration: BoxDecoration(
                            color: Colors.white12,
                            image: DecorationImage(
                                image: FileImage(File(imgMap[index]!.path)),
                                fit: BoxFit.contain)),
                        child: GestureDetector(
                          onTap: () async {
                            var image = await imagePicker.pickImage(
                                source: ImageSource.gallery);
                            if (image != null) {
                              imgMap[index] = image;
                              setState(() {});
                            }
                          },
                          onDoubleTap: () {
                            imgMap.remove(index);
                            setState(() {});
                          },
                        ),
                      ),
            ],
          ),
        ));
  }
}

[name27]

fit: BoxFit.contain =>fit: BoxFit.cover

[name27]

{DecorationImage? image}삼함연산자 가능

import 'dart:io';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.from(colorScheme: ColorScheme.dark()),
      home: MainPage(),
    );
  }
}

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

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

class _MainPageState extends State<MainPage> {
  var imagePicker = ImagePicker();
  Map<int, dynamic> imgMap = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('포토네컷'),
          centerTitle: true,
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              for (int index = 0; index < 4; index++)
                Container(
                  width: 250,
                  height: 135,
                  decoration: BoxDecoration(
                      color: Colors.white12,
                      image: imgMap[index] == null
                          ? null
                          : DecorationImage(
                              image: FileImage(File(imgMap[index]!.path)),
                              fit: BoxFit.cover)),
                  child: GestureDetector(
                    onTap: () async {
                      var image = await imagePicker.pickImage(
                          source: ImageSource.gallery);
                      if (image != null) {
                        imgMap[index] = image;
                        setState(() {});
                      }
                    },
                    onDoubleTap: () {
                      imgMap.remove(index);
                      setState(() {});
                    },
                  ),
                ),
            ],
          ),
        ));
  }
}

[name27]

.asMap().entries.map((e)=>)

import 'dart:io';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.from(colorScheme: ColorScheme.dark()),
      home: MainPage(),
    );
  }
}

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

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

class _MainPageState extends State<MainPage> {
  var imagePicker = ImagePicker();
  List<XFile?> images = [null, null, null, null];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('포토네컷'),
          centerTitle: true,
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 60),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: images
                  .asMap()
                  .entries
                  .map(
                    (e) => Container(
                      margin: EdgeInsets.symmetric(vertical: 4),
                      height: 135,
                      decoration: BoxDecoration(
                          color: Colors.white12,
                          image: images[e.key] == null
                              ? null
                              : DecorationImage(
                                  image: FileImage(File(images[e.key]!.path)),
                                  fit: BoxFit.cover)),
                      child: InkWell(
                          onTap: () async {
                            var image = await imagePicker.pickImage(
                                source: ImageSource.gallery);
                            if (image != null) {
                              images[e.key] = image;
                              setState(() {});
                            }
                          },
                          onDoubleTap: () =>
                              setState(() => images[e.key] = null)),
                    ),
                  )
                  .toList(),
            ),
          ),
        ));
  }
}