[Flutter] 넷플릭스 클론 코딩 #1 | 플러터 개발 환경 세팅 | fix 'bottom overflowed by 19 pixels' error

뭔가 계속 취준을 하다 보니 나의 개발 스택을 넓히고 싶다는 생각이 들었다.

그래서 예~전부터 해보고 싶었던 Flutter에 드디어 손을 살짝-

 

 

Android 와 IOS를 둘 다 개발 해볼 수 있다니 두근두근!

 

인프런에 클론 코딩 하는 강좌가 있어서 입문해보고자 도전 했다.

강좌는 4년 전 꺼라 현재 업데이트 되면서 틀린 부분도 있어서 어렵긴 했다.

 

개발 환경 세팅

시작 할 때 가장 어렵고 번거로운 환경 세팅~

하지만 홈페이지에 아주 잘 나와있어서 그대로만 하면 되었다!

https://docs.flutter.dev/get-started/install

Choose your development platform to get started

 

추가로 안드로이드 스튜디오, Xcode 도 세팅이 되어 있어야하니 참고!

 

Flutter

Flutter 에 대한 기초 강의는 (영어)

https://www.linkedin.com/learning/introduction-to-dart/getting-started-with-flutter

Getting started with Flutter - Dart 동영상 튜토리얼 | LinkedIn Learning(이전 이름: Lynda.com)

요기서 듣는 중~.~

 

클론 코딩 강좌는 (한국어)

https://inf.run/oDwPu

[지금 무료] Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터] | 권태뽕 - 인프런

요깅!

 

Flutter는 꽤 Jetpack과 비슷하게 생겼다.

UI를 개발 할 때 xml에 익숙했었는데, 이제 이런 방식에도 익숙해져야겠다.!

 

디버깅 실행을 했는데,

bottom overflowed by 19 pixels

에러를 만났다!

 

찾아보니까 적어놓은 길이가 하드코딩 되어 있어서 실제 디바이스의 넓이를 넘어가서 생기는 에러였다.

 

이 에러는 디바이스 별 넓이를 받아와서 설정하면 된다.

MediaQuery 를 이용해서 디바이스의 실제 너비를 받아온다.

실제 디바이스의 화면 크기 받아오기 

MediaQuery.of(context).size.width;

여기에서 높이 / 너비 를 알아보는 방법은

높이 : MediaQuery.of(context).size.width.height
너비 : MediaQuery.of(context).size.width.width

로 하면 된다.

 

실제 코드 :

 Widget build(BuildContext context) {
    // for flexible size based on device display
    final Size screenSize = MediaQuery.of(context).size; // 실제 디바이스 화면 크기 받아오기
    final double screenHeight = screenSize.height; // 실제 디바이스의 높이

    return Container(
        color: Colors.black,
        height: screenHeight * 0.1, // 높이 설정
        child: const SizedBox(

 

동작 화면 

왼쪽 : 안드로이드 - pixel                      |           오른쪽 : ios - iPhone 13 Pro Max

 

신기하다 >0<

재밌구만

오늘안에 끝내는 것이 목표!

 

내 github : 

https://github.com/leehy0321/NetflixClone/tree/main

GitHub - leehy0321/NetflixClone