코딩 다이어리

내가 좋아요 를 누른 항목만 따로 볼 수 있도록 스크린을 만들어봅시다. # 파이어베이스 데이터 리딩파이어베이스에서 데이터를 읽으면 아래와 같은 순서로 변형 할 수 있다.List -> DocumentSnapshot -> Movie data순서대로 데이터를 가져오는 방법을 정리하였다. List 파이어베이스의 컬렉션에서 데이터를 직접 불러오는 방법을 사용"where" 을 이용하면 된다.조건을 위해 제공해주는 기본 함수로는 11개가 있다.Query where( Object field, { Object? isEqualTo, Object? isNotEqualTo, Object? isLessThan, Object? isLessThanOrEqualTo, Object? isGreaterT..

이번 시간에는 검색 화면을 구현해보았다!일치하는 데이터를 보여주는 것 까쥐~ 이제 곧 클론 코딩의 끝이 보인다 +_+ # 검색 문자 추적데이터의 변화를 지켜보기 위해 Screen을 StatefulWidget으로 만든다.class SearchScreen extends StatefulWidget { const SearchScreen({super.key}); @override _SearchScreenState createState() => _SearchScreenState();} State를 제어하는 class 생성 후 TextEditingController 의 listener를 이용해 텍스트의 변화를 추적한다.class _SearchScreenState extends State { final Text..

지난 번엔 Flutter에서 Firebase를 사용하기 위한 콘솔 및 환경 설정에 대해 정리했다.(https://codingstorywithme.tistory.com/94)   이번에는 Flutter에서 Firebase를 사용하는 방법에 대해 정리해보겠다. # Package 설치파이어베이스의 데이터베이스인 파이어스토어 사용을 위해,dependency 에 cloud_firestore와 firebase_core를 설치한다. pubspec.yamldependencies: flutter: sdk: flutter carousel_slider: flutter_linkify: #for using clickable link url_launcher: #for executing link cloud_fires..

✗ cmdline-tools component is missing      Run `path/to/sdkmanager --install "cmdline-tools;latest"`      See https://developer.android.com/studio/command-line for more details.✗ Android license status unknown.      Run `flutter doctor --android-licenses` to accept the SDK licenses.      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. flutter doctor 를 실행했을 때..

Flutter 에서  Firbase를 사용하기 위해 연동하는 방법을 알아보자! 오늘은 크게 두 가지로 나누어 정리를 해보겠다.- 파이어베이스 설치- 파이어베이스 프로젝트 생성 후 연동  일단 큰 프로세스는 https://firebase.google.com/docs/flutter/setup?hl=ko&platform=ios#add_flutterfire_plugins 공식 홈페이지를 따라하면 된다. 1. 파이어베이스 설치 (Firebase CLI  참조)공식 사이트 : https://firebase.google.com/docs/cli?hl=ko&_gl=1*lruw9z*_up*MQ..*_ga*MTkzMjk2NjgwMi4xNzE1MTI4MDQw*_ga_CW55HF8NVT*MTcxNTEzMDQzOC4yLjAuMT..

이번 시간에는 더보기를 누르면 Profile 화면이 보이고,프로필 화면은 이미지를 원형으로 추가, 그 아래에 링크를 추가하도록 함! 완성된 화면 미리보기 ~  1. 원형 이미지 추가CircleAvatar 를 이용해서 png 이미지를 원형으로 보이도록 추가 (프로필 사진 대용)https://api.flutter.dev/flutter/material/CircleAvatar-class.htmlContainer( padding: const EdgeInsets.only(top: 50), child: const CircleAvatar( radius: 100, backgroundImage: AssetImage('images/bbongflix_logo.png'), ),), 2. 클릭과 이동이 가능한 링..

클릭하면 바로 주소로 이동가능하도록텍스트를 삽입하는 방법에 대해 알아보겠다!1. 패키지 설치먼저 필요한 패키지를 보면,- Linkify : 주소 텍스트를 클릭 가능하도록 함.- Url launcher : 실제 주소로 이동이 가능하도록 함.이렇게 두 가지 패키지가 필요하다.두 가지를 설치해준다.pubspec.yamldependencies: flutter: sdk: flutter carousel_slider: flutter_linkify: #for using clickable link url_launcher: #for executing link 이렇게 파일을 수정하면 자동으로 필요한 package 가 설치가 된다. 2. Linkify 사용https://pub.dev/packages/flutter..

이번 시간에 할 것 1. 상세 페이지 화면 구성위와 같은 상세 페이지를 자세히 살펴보면, - 블러 처리된 포스터- 원본 포스터- 한 줄 설명- 재생 버튼- 프로그램 정보- 캐스트위의 모든 정보는 블러 처리된 포스터 위에 보여지게 된다. => Stack 이용+ 또 오른쪽 위에  X 버튼도 보인다!------------ 버튼 3개----------- 포스터  Stack 밑에 버튼 3개 있음 => ListView 이용 로 이루어져 있는 것을 볼 수 있다.2. 상세 페이지 화면으로 이동홈 화면에서 인포메이션을 누르거나, 홈 화면에 있는 원형 아이콘/ 사각 아이콘을 눌렀을 때 해당 상세페이지 화면으로 이동하도록 구현!  구현을 해보으자 # 블러처리 된 포스터블러처리 하는 방법은 이전에 올린 글을 참고하면 좋음ht..

이번에는 넷플릭스 홈 화면에 있는 원형 슬라이더와 사각형 슬라이더를 만들어보는 시간!아래 화면에 있는 것이 사각형 슬라이더 라고 한다. 원형 슬라이더 구현 column으로 타이틀 (위 사진에서는 Popular on Netflix) 과 아래 포스터 리스트를 구현을 해줌.TitlePoster 1Poster 2Poster 3 - 시작 축은 start로 지정 (참고 : https://codingstorywithme.tistory.com/77)- 포스터 들은 SizedBox를 이용해 구현 (https://api.flutter.dev/flutter/widgets/SizedBox-class.html)class CircleSlider extends StatelessWidget { final List movies; ..

넷플릭스에서 메인화면에 포스터가 크게 보이고, 옆으로 넘기면 다른 포스터가 보이는 화면을 구현해보았다- Carousel Slider Dependency 추가Carousel Slider를 사용하기 위해서는 디펜던시를 추가해줘야한다.pubspec.yamldependencies: flutter: sdk: flutter carousel_slider: ...저장하면 자동으로 필요한 파일을 다운로드 받고, 추가가 된다. Carousel Slider 추가현재 포스터가 무엇인지 기억하기 위해 index와  keyword 는 전역변수로 관리를 해주기로.!CarouselSlider( items: images, options: CarouselOptions(onPageChanged: (index, rea..