넷플릭스 UI 개발하기

1. 네비게이션 탭이 있는 앱 프로젝트 구조 설정하기

• lib 아래에 폴더 3개 만들기 (model, screen, widget)
  
  => 각 역할을 하는 코드들끼리 같은 폴더 안에 놔둬서 관리하기 쉽게 하기 위함

  model : 데이터베이스 모델 관련된 파일들
  screen : 각 화면별 파일
  widget : 여러번 반복되거나 자주 사용될 widget에 대한 코드

• MyApp을 Stateless Widget으로 하는 것이 아니라, Stateful Widget으로 하여서 아래의 MyHomePage를 사용하지 않는 방식 사용
  
  => 아래 코드 다 삭제

• main.dart

import 'package:flutter/material.dart';
import 'package:flutter_netflix_clone_app/widget/bottom_bar.dart';

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

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();   // MyApp에 대한 상태 관리
}

class _MyAppState extends State<MyApp> {    // MyApp의 상태를 관리하는 _MyAppState를 클래스로 만듦
  late TabController controller;
  @override
  Widget build(BuildContext context) {      // 오버라이드를 통해서 Widget build() 함수 만듦
  // 내비게이션 탭 구조를 작성함에 앞서서 기본적인 MaterialApp 설정
    return MaterialApp(
      title: 'YeahFlix',
      theme: ThemeData(
        brightness: Brightness.dark, 
        primaryColor: Colors.black, 
        //accentColor: Colors.white
      ),
      home: DefaultTabController(
        length: 4, // 하단 바 메뉴 수
        child: Scaffold(
          body: TabBarView(
            physics: const NeverScrollableScrollPhysics(),   // NeverScrollableScrollPhysics : 사용자가 직접 손가락 모션을 통해서 스크롤하는 기능을 막는 기능
            children: <Widget>[
              Container(
                child: const Center(
                  child: Text('home'),
                ),
              ),
              Container(
                child: const Center(
                  child: Text('search'),
                ),
              ),
              Container(
                child: const Center(
                  child: Text('save'),
                ),
              ),
              Container(
                child: const Center(
                  child: Text('more'),
                ),
              ),
            ],
          ),
          bottomNavigationBar: Bottom(),
        ),
      ),
    );
  }
}

• bottom_bar.dart - widget

import 'package:flutter/material.dart';

class Bottom extends StatelessWidget {      // 상태 관리가 필요없는 위젯이므로 StatelessWidget으로 만듦
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Container(
        height: 50,
        child: const TabBar(
          labelColor: Colors.white,
          unselectedLabelColor: Colors.white60,
          indicatorColor: Colors.transparent,
          tabs: <Widget>[
            Tab(
              icon: Icon(
                Icons.home,
                size: 18,
              ),
              child: Text(
                '홈',
                style: TextStyle(fontSize: 9),
              ),
            ),
            Tab(
              icon: Icon(
                Icons.search,
                size: 18,
              ),
              child: Text(
                '검색',
                style: TextStyle(fontSize: 9),
              ),
            ),
            Tab(
              icon: Icon(
                Icons.save_alt,
                size: 18,
              ),
              child: Text(
                '저장한 콘텐츠',
                style: TextStyle(fontSize: 9),
              ),
            ),
            Tab(
              icon: Icon(
                Icons.list,
                size: 18,
              ),
              child: Text(
                '더보기',
                style: TextStyle(fontSize: 9),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

💡 결과 화면

• 좀 오래된 강의여서 그런지 코드에 경고하는 부분이 많이 생겼고, 이제는 사용되지 않는 컴포넌트?도 있었음
  prefer_const_constructors 문제 등
• dart 자체를 처음 배워보는건데 무작정 코드를 따라 치는거라 아직 이해가 안 가는 부분이 많음😥 그냥 받아들이는 중

---

2. 홈 화면에 상단 바 추가하기

1. 넷플릭스의 4가지 탭 중 첫 번째인 홈 탭 구성
2. 상단바, 전체화면 영화 포스터, 영화 정보, 찜하기 기능, 영화 세부 정보 화면, 미리보기 위젯(원형, 사각), 재생하기는 생략

• images 폴더 만들고 안에 로고 이미지 넣기
• pubspec.yaml

  assets:
    - images/bbongflix_logo.png

👉 assets 주석 없애고 images에 넣은 로고 이미지 파일 이름 적기

• home_screen.dart - screen

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {      // 영화 데이터를 백엔드에서 가져와야 되기 때문에 StatefulWidget으로 만듦
  _HomeScreenState createState() => _HomeScreenState();   // HomeScreen에 대한 상태 관리
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return TopBar();
    // return Container(
    //   child: const Center(
    //     child: Text('real home'),
    //   ),
    // );
  }
}

class TopBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.fromLTRB(20, 7, 20, 7),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,    // 간격 수정
        children: <Widget>[
          Image.asset(
            'images/bbongflix_logo.png',
            fit: BoxFit.contain,
            height: 25,
          ),
          Container(
            padding: const EdgeInsets.only(right: 1),
            child: const Text(
              'TV 프로그램',
              style: TextStyle(fontSize: 14),
            ),
          ),
          Container(
            padding: const EdgeInsets.only(right: 1),
            child: const Text(
              '영화',
              style: TextStyle(fontSize: 14),
            ),
          ),
          Container(
            padding: const EdgeInsets.only(right: 1),
            child: const Text(
              '내가 찜한 콘텐츠',
              style: TextStyle(fontSize: 14),
            ),
          ),
        ],
      ),
    );
  }
}

• main.dart 일부

      home: DefaultTabController(
        length: 4, // 하단 바 메뉴 수
        child: Scaffold(
          body: TabBarView(
            physics: const NeverScrollableScrollPhysics(),
            children: <Widget>[
              HomeScreen(),		// 이 부분 수정됨!
              Container(
                child: const Center(
                  child: Text('search'),
                ),
              ),

💡 결과 화면

---

3. 영화 모델 만들고 더미 데이터 생성하기

넷플릭스 프로젝트에 들어갈 영화 모델 만들기

• images 폴더 안에 포스터 사진 넣기
• pubspec.yaml

# pubspec.yaml
# The following section is specific to Flutter.
flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/bbongflix_logo.png
    - images/test_movie_1.png

• model_movie.dart - model

class Movie {
  final String title;
  final String keyword;
  final String poster;
  final bool like;      // 해당 영화를 찜하기 하였는지 확인하기 위한 like 변수

  Movie.fromMap(Map<String, dynamic> map)     // 메소드
      : title = map['title'],
        keyword = map['keyword'],
        poster = map['poster'],
        like = map['like'];

  @override
  String toString() => "Movie<$title:$keyword>";    // 인스턴스를 출력할 때 용이하기 위해 toString() 메소드를 override
}

• home_screen.dart 일부 - screen

class _HomeScreenState extends State<HomeScreen> {
  // 더미 데이터
  List<Movie> movies = [
    Movie.fromMap({
      'title': '사랑의 불시착',
      'keyword': '사랑/로맨스/판타지',
      'poster': 'test_movie_1.png',
      'like': false
    })
  ];
  @override
  void initState() {
    super.initState();
  }

set 형태로 관리해도 되지만 굳이 Movie 모델로 선언하여 더미 데이터로 만드는 이유
👉 추후 파이어베이스와의 연동에서 실제로 가져오는 데이터를 그대로 처리하기 위함

---

4. 홈 화면에 이미지 캐로셀 슬라이더 위젯 추가하기

홈 화면에 들어갈 위젯 만들기

1. 상단바에 배경으로 있는 슬라이드 형태 위젯

• 해당 위젯의 이름 : CarouselImage

---

📌 갑자기 너무 어려워져서 아무래도 다른 기초 강의를 먼저 듣고 해야겠음.. 받아들이려고 해도 에러 코드 나오면 뭐가 뭔지 모르겠으니까 문제임 ㅠ 공부하고 오겠습니다.. 😥