Flutter Study (4)

패키지(Package)

패키지란

• 다른 사람들이 만들어 둔 위젯 또는 기능들
• 개발 시간을 단축할 수 있음
• Flutter의 package는 pub.dev라는 사이트에서 검색 가능
  pub.dev

패키지 문서 보는 방법

• Readme와 Example을 보면 사용법을 익힐 수 있음
  

패키지 추천 사이트

• Awesome Flutter
• Flutter Gems

메모장 앱 만들기

기능

• 메모 작성 (Create)
• 메모 조회 (Read)
• 메모 수정 (Update)
• 메모 삭제 (Delete)
• CRUD는 가장 기본적인 데이터 처리 기능

메모 목록 조회

• HomePage는 메모의 유무, 개수에 따라 화면이 변하므로 StatefulWidget으로 변경
• 삼항 연산자를 사용해 메모가 있는 경우와 없는 경우를 다르게 보여줌

  memoList.isEmpty
  ? Center(child: Text("메모를 작성해 주세요"))
  : Center(child: Text("메모가 존재합니다"))

• 메모가 존재할 경우 ListView.builder를 보여줌

  ListView.builder(
  	itemCount: memoList.length, // memoList 개수 만큼 보여주기
    	itemBuilder: (context, index) {
        String memo = memoList[index]; // index에 해당하는 memo 가져오기
        return ListTile(
          // 메모 고정 아이콘
              leading: IconButton(
              icon: Icon(CupertinoIcons.pin),
              onPressed: () {
                      print('$memo : pin 클릭 됨');
                  },
            ),
            // 메모 내용 (최대 3줄까지만 보여주도록)
            title: Text(
              memo,
                  maxLines: 3,
                overflow: TextOverflow.ellipsis,
            ),
            onTap: () {
              // 아이템 클릭시
                  print('$memo : 클릭 됨');
            },
        );
      },
   ),

  • ListTile Widget을 사용하면 요소들을 손쉽게 배치 가능
    

메모 개별 조회

• 메모 목록에서 ListTile을 누르면 DetailPage로 넘어가도록 구현

  onTap: () {
  	// 아이템 클릭시
    	Navigator.push(
        	context,
          MaterialPageRoute(
          	builder: (_) => DetailPage(
            	index: index,
                momoList: memoList,
            )),
      );         
   },

• DetailPage에서 index와 memoList를 넘겨받도록 수정

  DetailPage({super.key required this.memoList, required this.index})
  
  final List<String> memoList;
  final int index;

• DetailPage에서 초기값 지정

  contentController.text = memoList[index];

메모 작성

• FloatingActionButton 클릭시 메모가 추가되도록 함 -> 이때 memoList에 빈 메모가 추가되도록 구현

  floatingActionButton: FloatingActionButton(
  	child: Icon(Icons.add),
    	onPressed: () {
      	// + 버튼 클릭시 메모 생성 및 수정 페이지로 이동
        	String memo = "";
            memoList.add(memo);
            Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) =>
                      DetailPage(
                      	index: memoList.indexOf(memo),
                        memoList: memoList,
                      ),
                ),
            );
       },
    ),

• 빈 메모 추가시 화면을 새로고침

  setState(() {
  	memoList.add(memo);
  });

메모 수정

• 메모를 작성할 때 텍스트 필드의 값으로 메모를 수정

  TextField(
  	...
    	onChanged: (value) {
    		memoList[index] = value;
    	}
   )

• setState를 사용하여 화면을 새로고침 할 수 없는 이유
  • 데이터를 변경한 것은 DetailPage, 화면을 새로고침 해야 하는 곳은 HomePage
  • setState는 현재 속한 페이지의 화면을 새로고침 해주는 것
  • HomePage의 setState 함수를 DetailPage로 넘겨주는 방법도 있지만 비효율적
  • 해결 방법 : 상태 관리(State Management)

메모 삭제

• 삭제 버튼 클릭시 다이얼로그를 보여줌

  IconButton(
  	onPressed: () {
    	showDialog(
        	context: context,
            builder: (context) {
            	return AlertDialog(
                	title: Text("정말로 삭제하시겠습니까?"),
                    actions: [
                    	TextButton(
                        	onPressed: () {
                            	Navigator.pop(context);
                          },
                          child: Text("취소"),
                      ),
                      TextButton(
                        	onPressed: () {
                            	// 삭제 로직
                              memoList.removeAt(index); // index에 해당하는 항목 삭제
                          	Navigator.pop(context); // 팝업 닫기
                          	Navigator.pop(context); // HomePage 로 가기
                          },
                          child: Text("확인"),
                      ),
                   ]
                );
            }
        );
      },
      ...
  )