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

 

3. 영화 선택 페이지

3-1. 영화 선택 페이지 - 기본 구조

• 기본 구조를 먼저 살펴보고, 구체적인 내용은 이어서 설명하고자 한다.

• 영화 선택 페이지의 구조는 위 그림과 같다.
• 한 페이지(화면)가 'Scaffold'라는 것으로 만들어져 있다.
  • Scaffold는 친절하게도 화면의 상단(appBar), 본문(body), 하단 버튼(bottomNavigationBar)으로 구분이 되어있다. 그래서 각 부분을 원하는 형태로 채워넣기만 하면 된다.
  • 먼저 상단에는 '앱 이름' 혹은 '해당 페이지의 기능'을 쓰는게 일반적이다.
  • 가장 중요한 본문은 'Column'으로 만들었고, 크게 3 영역으로 구분했다.
    • Padding으로 감싸진 Text에는 '재미있게 본 영화를 선택해주세요.'라고 유저에게 요청할 내용이 담겨있다.
    • progressBar에는 내가 선택한 영화가 몇개까지 선택이 되었는지 bar 형태로 확인할 수 있다.
    • selectMovieTile은 여러개 영화를 타일(Tile) 배열로 보여주고, 유저가 영화를 선택할 수 있다.
  • 하단 버튼은 10개 영화 선택이 끝나면 다음 페이지로 이동할 수 있도록, '다음' 버튼이 있다.
• 이제 이 화면이 어떻게 만들어졌는지 하나씩 차근차근 알아보자.

---

 

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

3-2-1. 변수 설정

// 전역 변수(Global Variable)
Color mainColor = Colors.amber;

// 지역 변수(Local Variable)
List<String> movies = List.generate(12, (index) => '영화 $index'); // 지금은 샘플로 12개만 생성
List<String> selectedMovies = [];

• 코드에서 변수 3개(mainColor, movies, selectedMovies)를 미리 만들었다. 
• 이때 mainColor 변수는 class의 바깥에 위치하는 전역 변수(Global Variable)이다.
• movie, selectedMovies 두 개 변수는 클래스 안쪽에 위치하는 지역 변수(Local Variable)이다.
  • 전역 변수: 앱의 어디서든 접근할 수 있는 변수로, 앱 전체에서 공유되는 변수다. 특정 함수나 클래스에 속하지 않고, 일반적으로 파일의 최상단에 선언된다.
  • 지역 변수: 지역 변수는 특정 함수나 클래스, 또는 블록 내에서만 사용 가능한 변수다. 이 변수들은 정의된 범위(scope) 내에서만 접근할 수 있으며, 범위를 벗어나면 메모리에서 사라진다.
• 따라서 mainColor 변수는 여기저기에서 다 사용 가능하고, movie, selectedMovies 변수는 _SelectMoviePageState 클래스 내에서만 사용 가능하다.
• 그럼 여러곳에서 다 쓸 수 있는 전역 변수로 만들면 되는거 아니야? 왜 굳이 나눠서 써? 라는 의문이 들 수 있다.
  • 지역 변수의 장점은 메모리 효율성이 좋고, 코드 관리가 쉽다는 점이다.

3-2-2. Scaffold로 기본 레이아웃 구성하기

• Flutter에서 페이지를 구성할 때 가장 기본적으로 사용하는 위젯이 Scaffold이다.
• Scaffold는 상단바(AppBar), 본문(body), 하단 버튼(BottomAppBar)을 쉽게 배치할 수 있는 구조로 되어있다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 상단바
    appBar: appBar(), 
    // 본문 내용은 Column으로 구성
    body: Column( 
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
      	// 1_본문 첫번째 내용으로 유저에게 설명할 내용을 적음
        const Padding( 
          padding: EdgeInsets.all(15),
          child: Text(
            '재미있게 본 영화를 선택해주세요.(10개)',
          ),
        ),
        // 2_영화 몇개 선택했는지 bar로 표시
        progressBar(context, selectedMovies), 
        // 3_영화 선택 목록
        selectMovieTile(), 
      ],
    ),
    // 하단 버튼
    bottomNavigationBar: bottomAppBarButton(context), 
  );
}

• appBar: 상단에 표시되는 앱바로, 제목을 표시.
• body: 영화 목록을 선택할 수 있는 그리드와 진행 상황 표시 바로 구성된 본문 영역.
• bottomNavigationBar: 사용자가 영화를 10개 선택하면 활성화되는 '다음' 버튼.

3-2-3. AppBar 구성하기

• 상단의 AppBar는 Flutter에서 제공하는 기본적인 상단 바 구성 요소로, 앱 이름인 '영화 추천 앱'을 표시한다.

AppBar appBar() {
  return AppBar(
    backgroundColor: mainColor, // 상단바 배경색
    title: const Text('영화 추천 앱'), // 상단바 제목
  );
}

• 앞서 만든 mainColor를 AppBar의 배경색(backgroundColor)으로 설정한다.
• 앱의 상단에 깔끔한 제목(title)과 함께 노란색 배경색이 들어간 앱바를 구성할 수 있다.

3-2-4. 하단의 '다음' 버튼 구성하기

• 하단의 '다음' 버튼은 사용자가 10개의 영화를 모두 선택했을 때만 활성화 된다.
• 이 버튼을 누르면 다음 페이지인 SelectScorePage로 넘어간다.

Widget bottomAppBarButton(BuildContext context) {
  return BottomAppBar(
    child: ElevatedButton(
      onPressed: selectedMovies.length == 10 // 선택 된 영화가 10개
          ? () { // 맞아? -> 10개가 맞다면 버튼을 눌렀을 때 SelectScorePage로 이동
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SelectScorePage(selectedMovies: selectedMovies),
                ),
              );
            }
          : null, // 아니야? 10개가 아니니까 버튼 비활성화
      child: const Text('다음'), // 버튼 이름은 '다음'
    ),
  );
}

• ElevatedButton: 하단의 버튼을 정의.
  • ElevatedButton은 Flutter에서 제공하는 입체감 있는 버튼이다.
  • 기본적으로 배경색이 강조되고, 버튼이 눌릴 때 그림자가 생겨서 유저가 버튼을 누르는걸 인지할 수 있다.
  • (이 외에도 Flutter에서 제공하는 여러 버튼이 있다.)
• onPressed: 버튼의 동작 정의.
  • 영화 10개가 선택되면 SelectScorePage로 이동하는 동작을 정의했다.
  • selectedMovies.length == 10을 조건으로 사용하여, 선택된 영화가 10개가 맞는지 확인한 후 맞으면 버튼 활성화, 아니면 비활성화한다. 이렇듯 '특정 조건', '?'(맞아?), ':'(아니야?) 를 이용하여 손쉽게 코드를 만들 수 있다.
  • onPressed가 null인 경우, 버튼은 비활성화 되며 클릭이 불가능하고, 시각적으로도 사용자가 알 수 있게 버튼의 색상이 흐릿하게 바뀌게 된다.

---

• 이렇게 전체 구조와 Scaffold의 상단바, 하단 버튼에 대해 알아보았다.
• 다음 글에서 본문(body) 구성에 대해 알아보자.