[14] Flutter 이미지 넣기

image_listview.dart

var 타입은 List <String> 을 대신할 수 있다.

코드

• image_listview

import 'package:flutter/material.dart';
import 'package:fluuter_listview/model/image_model.dart';
import 'image_detail.page.dart';
var ryanName = [
  '리틀 라이언',
  '반짝 라이언',
  '하트하트 라이언',
  '춘식이와의 만남',
  '룸메는 춘식이',
  '좋아요'
];
var imgList = [
  'image/ryan1.jpg',
  'image/ryan2.png',
  'image/ryan3.jpg',
  'image/ryan4.png',
  'image/ryan5.png',
  'image/ryan6.jpg',
];
class ImageListview extends StatefulWidget {
  const ImageListview({super.key});
  @override
  State<ImageListview> createState() => _ImageListviewState();
}
class _ImageListviewState extends State<ImageListview> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          setState(() {
            imgList.add("image/ryan1.jpg");
            ryanName.add("리틀라이언");
          });
        },
      ),
      body: SafeArea(
        child: ListView.builder(
          itemCount: imgList.length,
          itemBuilder: (context, index) {
            // 하위 위젯에게 클릭과 같은 이벤트를 부여하는 위젯 - GestureDetector
            return GestureDetector(
              onTap: () {
                print("hello $index");
                //img_model 객체생성(new생략 가능)
                ImgModel im = ImgModel(index, imgList[index], ryanName[index]);
                // 상세 페이지 이동 (예시로 만들어 둔 ImageDetailPage)
                Navigator.push(context, MaterialPageRoute(
                    builder: (_) => ImageDetailPage(imgModel:im,)),
                );
                // 팝업창 띄우기
                // 내장함수 showDialog
                showDialog(
                  context: context,
                  builder: (_) {
                    // 위젯을 리턴하는 이유 : Dialog 창 디자인
                    return Dialog(
                      child: Container(
                        width: MediaQuery.of(context).size.width * 0.7,
                        height: 380,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Colors.white,
                        ),
                        child: Column(
                          children: [
                            const SizedBox(height: 32),
                            ClipRRect(
                              borderRadius: BorderRadius.circular(10),
                              child: Image.asset(
                                imgList[index],
                                width: 200,
                                height: 200,
                              ),
                            ),
                            const SizedBox(height: 10),
                            Text(
                              ryanName[index],
                              style: const TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.bold,
                                color: Colors.grey,
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  ElevatedButton.icon(
                                    onPressed: () {
                                      setState(() {
                                        ryanName.removeAt(index);
                                        imgList.removeAt(index);
                                      });
                                      // dialog도 하나의 페이지로 인식 --> 이전
                                      Navigator.pop(context);
                                    },
                                    icon: const Icon(Icons.close),
                                    label: const Text('삭제하기'),
                                    style: ElevatedButton.styleFrom(
                                      backgroundColor: Colors.grey,
                                    ),
                                  ),
                                  const SizedBox(width: 10),
                                  ElevatedButton.icon(
                                    onPressed: () {
                                      Navigator.pop(context);
                                    },
                                    icon: const Icon(Icons.close),
                                    label: const Text('close'),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                );
              },
              child: Card(
                child: Row(
                  children: [
                    Expanded(child: Image.asset(imgList[index])),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(ryanName[index]),
                          Text("${index + 1}번째 라이언"),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

• image_detail_page

import 'package:flutter/material.dart';
import 'package:fluuter_listview/model/image_model.dart';
// class ImageDetailPage extends StatelessWidget {
//   const ImageDetailPage({
//     super.key,
//     required this.ryanName,
//     required this.imgPath,
//     required this.index,
//   });
class ImageDetailPage extends StatelessWidget {
  const ImageDetailPage({super.key, required this.imgModel,
  });
  // index, ryanName정보, 이미지 경로
  // final int index;
  // final String ryanName;
  // final String imgPath;
  final ImgModel imgModel;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("${imgModel.index} 번째 라이언")),
      body: Center(
        child: Column(
            children: [
              Image.asset(imgModel.imgPath),
              Text('world')
            ]),
      ),
    );
  }
}