[Flutter/플러터] 영화추천 화면 만들기 - main.dart

 

영화추천 화면 만들기

디자인-프로토타입

2. 디자인 - 프로토타입

• 앞서 영화추천 앱의 디자인을 간단하게 만들어봤다. 우선은 이대로 만들어본다.

 

1. 화면 구조

lib └ main.dart └ pages      └ select_movie_page.dart      └ select_score_page.dart      └ movie_rec_page.dart └ widgets

• lib 폴더 하위에 pages 폴더와 widgets 폴더를 만든다.
• pages 폴더 하위에 화면 별 파일을 만든다. 
  • 영화 선택 페이지: select_movie_page
  • 영화 점수 페이지: select_score_page
  • 영화 추천 페이지: movie_rec_page

2. 메인 함수(main.dart)

import 'package:flutter/material.dart';
import 'package:movie_rec/pages/select_movie_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Movie Rec',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.amber),
        useMaterial3: true,
      ),
      home: const SelectMoviePage(),
    );
  }
}

• 이 코드에서는 Flutter 앱의 시작점인 MyApp 클래스를 정의하고 있으며, 이 클래스는 Flutter 앱에서 반드시 있어야 하는 부분으로, 앱의 전반적인 설정과 초기화 작업을 담당한다.
• 아래는 각 부분에 대한 구체적인 설명인데, 계속 보면서 익숙해질 내용들이라 한번만 읽고 넘어가면 된다.

---

2-1. MyApp 클래스의 역할

• Flutter 앱은 하나의 메인 함수에서 시작한다.
• 그 메인 함수는 보통 MyApp이라는 클래스를 호출하여 전체 앱의 구조와 테마를 정의한다.
• 이 클래스는 StatelessWidget 혹은 StatefulWidget을 상속받는데, StatelessWidget은 상태를 가지지 않는 위젯이다.

2-1-1. StatelessWidget이란?

• StatelessWidget은 한 번 생성된 후 상태가 변하지 않는 위젯을 의미한다.
• 즉, 화면이 업데이트되거나 데이터가 변경되어도, 이 위젯 자체는 변화하지 않는다. 따라서 앱의 전반적인 레이아웃이나 테마와 같은 고정된 내용을 설정할 때 적합하다.
• 예: 단순한 텍스트 표시, 이미지 표시 등

class MyApp extends StatelessWidget {
  const MyApp({super.key});
}

• 여기서 const 키워드는 이 클래스가 불변(immutable)이라는 것을 의미하며, 최적화에 유리하다.
• super.key는 부모 클래스의 생성자에 key 값을 전달하는 부분이다.

 

2-1-2. StatefulWidget이란?

• StatefulWidget 클래스는 상태가 변하는 위젯을 의미하며, 화면의 레이아웃과 상태를 정의하는 두 부분으로 나뉘어 동작한다.
  • StatefulWidget: 상태를 생성하고 유지하는 역할을 한다.
  • State: 상태를 저장하고 업데이트하며, 상태가 변할 때마다 setState()를 호출하여 UI를 다시 렌더링 한다.
  • (맨 처음 프로젝트를 만들면 숫자 count 예제가 작성되어 있는데, 버튼을 누를수록 숫자가 올라가기 때문에 StatefulWidget으로 만들어져 있다.)
• 예: 사용자의 입력에 따라 화면이 변경될 때, 타이머나 외부(네트워크) 요청에 의해 데이터가 변경될 때

---

2-2. MaterialApp 위젯

• Flutter에서 앱의 전반적인 구조와 테마를 정의할 때 MaterialApp 위젯을 사용한다.
• (이 위젯은 Flutter에서 기본적으로 제공하는 Material Design 스타일의 앱을 만들기 위한 기본 위젯이다.)

return MaterialApp(
  title: 'Movie Rec',
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.amber),
    useMaterial3: true,
  ),
  home: const SelectMoviePage(),
);

 

2-2-1. title 속성

• 이 속성은 앱의 이름을 정의한다.
• Flutter는 이 title 값을 사용하여 안드로이드의 최근 앱 목록이나 iOS의 앱 스위처에서 표시할 앱 이름으로 사용한다.

title: 'Movie Rec',

• 이 경우, 앱의 이름은 "Movie Rec"으로로 설정된다.

 

2-2-2. theme 속성

• theme는 앱의 전반적인 테마를 설정하는 부분이다.
• ThemeData 클래스를 사용하여 앱 전체의 색상, 글꼴, 스타일 등을 정의할 수 있다.

 

theme: ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.amber),
  useMaterial3: true,
),

 

2-2-3. colorScheme

• colorScheme는 앱의 기본 색상 테마를 정의하는 데 사용된다. 여기에서는 ColorScheme.fromSeed를 사용하여 시드 색상(seedColor)을 지정하고, 이 시드 색상으로부터 전체적인 색상 팔레트를 생성한다.

colorScheme: ColorScheme.fromSeed(seedColor: Colors.amber),

• 여기서 amber를 시드 색상으로 사용하고 있으며, 이 색상을 기반으로 다양한 색조들이 자동으로 생성되어 앱 전체에 적용된다.

 

2-2-4. useMaterial3

• 이 속성은 Material Design 3 스타일을 사용할지 여부를 결정한다.
• (Material Design 3는 Google이 최근에 발표한 새로운 디자인 시스템으로, 더 직관적이고 다양한 색상 팔레트를 제공한다고 한다.)

useMaterial3: true,

• 좋아보이니 일단 써보자.

---

2-3. home 속성

• home 속성은 앱이 실행되었을 때 처음으로 표시되는 화면(페이지)을 정의한다.
• SelectMoviePage라는 클래스를 처음 페이지로 보여줄 것이기 때문에 다음과 같이 작성한다.

home: const SelectMoviePage(),

---

• 여기까지 해서 main.dart 파일에 대해 알아보았다.
• 다음으로는 실제로 첫 화면에 보일 SelectMoviePage를 만들어보자.