Ryan_detail

ryan_list.dart

import 'package:flutter/material.dart';
import 'package:flutter_listview/screen/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 ExRyan extends StatefulWidget {
  const ExRyan({super.key});

  @override
  State<ExRyan> createState() => _ExRyanState();
}

class _ExRyanState extends State<ExRyan> {

  void makePopup(context, imagePath, name, index){
    // flutter 내 showDialog 라는 메소드 --> 팝업창 생성 가능!
    // builder - context widget return
    showDialog(context: context, builder: (context) {
      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(
                  imagePath,
                  width: 200,
                  height: 200,
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              Text(
                name,
                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(() {
                        imgList.removeAt(index);
                        ryanName.removeAt(index);
                      });
                      Navigator.pop(context);
                    }, icon: Icon(Icons.close), label: Text('삭제하기'),
                        style: ElevatedButton.styleFrom(backgroundColor: Colors.grey)),
                    SizedBox(width: 10,),
                    ElevatedButton.icon(onPressed: (){Navigator.pop(context);}, icon: Icon(Icons.close), label: Text('close')),
                  ],
                ),
              )
            ],
          ),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 아이템 추가 버튼 만들기
      floatingActionButton: 
      FloatingActionButton(onPressed: (){

        // 버튼 클릭시 아이템 추가 --> 아이템을 itemBuilder 에서 그려주고 있는 중
        // --> imgList, ryanName 이라는 List를 바탕으로 아이템을 그려주는 중
        // --> imgList, ryanName 에 값이 추가 되면 그려주지 않을까?

        setState(() {
          imgList.add('image/ryan1.jpg');
          ryanName.add('리틀 라이언');
        });

      },child: Icon(Icons.add),),

      body: SafeArea(child:
          // 이벤트(onpressed, ontap 을 강제로 부여하는(하위위젯) 위젯 - GestureDetector)
      ListView.builder(
          itemCount: imgList.length,
          itemBuilder: (_, index) {

            return GestureDetector(
              onTap: (){
                // makePopup(context, imgList[index], ryanName[index]);

                // detail페이지 이동
                Navigator.push(context, MaterialPageRoute(builder: (_) =>
                    DetailPage(index: index,
                    imgPath: imgList[index],
                    ryanName: ryanName[index],)));
              },

              onLongPress: (){

                setState(() {
                  imgList.removeAt(index);
                  ryanName.removeAt(index);
                });

                print("hello");
              },


              child: Card(

                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Row(
                    children: [
                      Expanded(child: Image.asset(imgList[index])),
                      Expanded(
                        child: Column(
                          children: [
                            Text(ryanName[index]),
                            Text('${index+1}번째 라이언'),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          })),
    );
  }
}

detail_page.dart

import 'package:flutter/material.dart';

class DetailPage extends StatelessWidget {
  const DetailPage({super.key, required this.index, required this.imgPath, required this.ryanName});

  final int index;
  final String imgPath;
  final String ryanName;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // n번째 라이언 입니다.
      appBar: AppBar(title: Text('${index + 1}번째 라이언 입니다.'),),
      body: Center(
        child: Column(
          children: [
            Image.asset(imgPath),
            SizedBox(
              width: 10,
            ),
            // 라이언 이름
            Text(ryanName, style: TextStyle(fontSize: 24),)


          ],
        ),
      ),
    );
  }
}