[Flutter/플러터] 영화추천 화면 만들기 -영화 선택 페이지 2

이전 글: 영화 선택 페이지 1

[Flutter/플러터] 영화추천 화면 만들기 -영화 선택 페이지 1

 

 

3. 영화 선택 페이지

3-2. 영화 선택 페이지 - 기능 별 코드 설명

3-2-5. 영화 선택 기능 구현하기

simulator 내에 'index=?' 글자는 이미지에 덧쓴거라 실제로는 안보이는게 맞다!

• 영화 선택 기능은 selectMovieTile 위젯으로 만들었다.
• 일부 코드 라인 별 설명은 이미지 내 주석으로 작성했다.
• GridView.builder: 동적으로 그리드 구성.
  
  • GridView.builder를 사용해 동적으로 여러개의 영화 목록을 그리드(격자 타일) 형태로 화면에 표시한다.
  • 일반적인 GridView와 달리, builder를 사용하면 itemCount에 따라 항목을 효율적으로 표현 가능하다.
  • 영화 갯수인 movies.length만큼 그리드가 생성된다.
  • gridDelegate는 그리드 레이아웃을 정의하는데 사용된다.
    • 여기서는 SliverGridDelegateWithFixedCrossAxisCount를 사용해 한 열에 3개의 항목이 배치되도록 만들었으며, 세부 옵션은 주석을 참고한다.
• InkWell: 선택(클릭) 가능한 효과.
  • InkWell 위젯을 이용하여, 타일(Tile) 각각을 선택할 수 있도록 만들었다.
  • onTap은 선택 시 호출되는 함수로, 타일을 선택하면 toggleSelection() 함수가 작동하도록 만들었다.
• Container: 박스 위젯.
  • Container 위젯은 Flutter에서 가장 기본적이면서도 다재다능한 레이아웃 위젯이다. 다양한 스타일링, 레이아웃, 크기 조정 등을 적용할 수 있어서, UI를 구성할 때 매우 유용하게 사용된다.
  • 여기서는 decoration 옵션을 이용하여 모서리를 둥글게 처리했다. (나중에 자세히 알아보자!)
• 여기서 중요한 부분은,
  • movies 갯수(movies.length)만큼 타일(Tile)을 생성한다는 것
  • itemBuilder로 인해 movies 갯수만큼 index로 번호를 부여한다는 것
  • selectedMovies 리스트에 movie가 포함되어 있는지(True), 아닌지(False)를 isSelected 변수로 만든 것
    • (isSelected 앞에 bool은 변수 타입을 의미하는데, bool 타입은 True, False 둘 중 하나의 값을 갖는다.)
  • return 부분에서 타일 하나를 어떻게 표시할건지 정의한다는 것
  • InkWell을 이용하여 타일을 클릭 가능하도록 한 것
•  'isSelected'(특정 조건), '?'(맞아?), ':'(아니야?)를 이용하여, 선택된 영화는 색을 변경하여 시각적으로 강조되도록 표시했다.
• 정리하자면, 타일을 클릭하면 toggleSelection() 함수가 작동하고, 선택된 영화는 색이 변해야 한다.
  • 그럼 toggleSelection()는 뭐고 선택된 영화는 selectedMovies에 포함되어 있는지?로 알 수 있다는데 그게 무어냐?!

3-2-6. 선택한 영화 상태 관리하기

void toggleSelection(String movie) {
    setState(() {
      print('movie: ' + movie.toString());
      if (selectedMovies.contains(movie)) { // 만약 타일이 선택되어 있는 상태라면
        selectedMovies.remove(movie); // selectedMovies 리스트에서 제거
      } else { //만약 타일이 선택되어 있지 않은 상태라면
        if (selectedMovies.length < 10) { //그리고 선택된 영화가 아직 10개가 안되었다면
          selectedMovies.add(movie); // selectedMovies 리스트에 포함
        }
        // else { // 10개가 다 찼다면 
          // (별다른 Action을 정의하지 않았기 때문에) selectedMovies 리스트에는 변화가 없다
        // }
      }
      print('selectedMovies: ' + selectedMovies.toString());
    });
  }

• toggleSelection(): 선택된 영화 처리.
  • 선택된 영화는 toggleSelection() 함수에서 상태관리 한다.
  • 구체적으로는, 선택된 영화들은 selectedMovies 리스트에 포함시키거나 제거하여 관리한다.
    • 만약 타일이 선택되어 있는 상태라면, selectedMovies 리스트에서 제거한다.
    • 만약 타일이 선택되어 있지 않은 상태라면,
      • 그리고 선택된 영화가 아직 10개가 안되었다면,
        • selectedMovies 리스트에 포함시킨다.
      • 10개가 다 찼다면 (별다른 Action을 정의하지 않았기 때문에) selectedMovies 리스트에는 변화가 없다.
• setState(): UI 상태를 업데이트.
  • setState() 함수는 Flutter에서 UI 상태를 갱신하는 역할을 한다.
  • 사용자가 영화 타일을 클릭할 때마다 toggleSelection() 함수가 호출되며, 이 함수 내부에서 선택된 영화 목록인 selectedMovies 리스트가 업데이트 된다.
  • selectedMovies가 업데이트 됨에 따라, selectMovieTile의 isSelected 변수가 업데이트 되고, 이를 통해 UI가 즉시 다시 그려지면서 선택 상태가 시각적으로 변한다.
• print() 함수를 이용하여 선택된 영화 index(번호)를 확인하면, 첫번째는 0번이, 두번째는 2번이 출력되는 것을 볼 수 있다.

3-2-7. 영화 타일 디자인 수정

• 사실 지금 단계에서 디자인이 중요한건 아니지만, 위젯 사용법을 좀 더 익히기 위해 내용을 추가했다.
• 따라서 이 부분은 건너뛰어도 상관없다.

• Padding: 여백 추가.
  • InkWell 위젯 상위에 Padding 위젯을 만들어 타일 간 간격을 여유롭게 만들었다.
  • Padding 위젯은 위와 같이 코드를 만들면 상하좌우 전체 여백을 한번에 조절 가능하다. 물론 각각 조절도 가능하다.
• Stack: 위젯 겹치기.
  • InkWell 위젯과 Container 위젯 사이에 Stack 위젯이 생겼다. Stack은 여러 위젯을 겹쳐서 배치하고 싶을 때 사용한다. 여기서는 영화 항목을 감싸는 배경 박스, 선택되었을 때 나타나는 체크 아이콘, 그리고 하단에 영화 제목이 각각 겹쳐서 표시된다.
    • 기존에 있던 Container는 숨김처리 해놓았다(초록색 부분). 선택된 영화는 노란색, 선택되지 않은 영화는 회색으로 표시된다.
    • 선택된 영화는 체크 아이콘이 보이도록 만들었다.
    • 하단의 텍스트('영화 ?')가 잘 보이도록 아래는 어둡게 그라데이션 박스를 겹쳤다.
    • 마지막으로 맨 아래 텍스트를 추가했다.
    • 눈치챘겠지만, 코드에서 아래로 갈수록 화면에서는 앞쪽에 보이는 구조다.
• 결과적으로, 영화가 선택된 경우에는 isSelected 값이 true가 되고, 이에 따라 배경색이 메인 색상(mainColor)인 노란색(Amber)으로 변경된다. 또한, 영화가 선택되었을 때 체크 아이콘이 표시된다.
  •  

---

• 이렇게 본문(body) 구성 중 영화 선택, 선택한 영화의 상태관리에 대해 알아보았다.
• 다음 글에서 본문(body) 구성 중 영화 선택 바에 대해 알아보자.