코딩 다이어리

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..

위 사진 처럼불러 처리된 이미지를 배경으로 하고, 그 위에 실제 이미지를 올리는 기능을 구현해보자! Blur 1. BoxDecoration 을 이용해 이미지를 불러온다.BoxDecoration : https://api.flutter.dev/flutter/painting/BoxDecoration-class.htmlContainer( width: double.maxFinite, decoration: BoxDecoration( image: DecorationImage( image: AssetImage('이미지 주소'), fit: BoxFit.cover, ),), 2. BackdropFilter를 이용한 블러 효과 적용...child: ClipRect( child:..

플러터의 화면 구성은 Stack으로 생각하면 된다. 따라서 다른 화면으로 이동 하고 싶을 때는 push 이전 화면으로 돌아가고 싶으면 pop을 하면 된다. 오앙 신기! https://docs.flutter.dev/cookbook/navigation/navigation-basics Navigate to a new screen and backHow to navigate between routes.docs.flutter.dev공식 홈페이지에 설명이 아주 잘 나와있다! 아래와 같이 구현 할 수 있다. Navigator.pushpush 할 때, 어떤 페이지를 push 할 지를 정해줘야하는데, 이때 사용자가 커스텀 하여 생성 할 수도 있고,플랫폼 별로 만들어져 있는 MaterialPageRoute를 사용해도 된다...

https://api.flutter.dev/flutter/rendering/CrossAxisAlignment.html CrossAxisAlignment enum - rendering library - Dart APICrossAxisAlignment enum How the children should be placed along the cross axis in a flex layout. See also: Inheritance Object Enum CrossAxisAlignment Constructors CrossAxisAlignment() const Values start → const CrossAxisAlignment Place the children withapi.flutter.dev Flutter 에..

이번에는 프로그램에 대한 정보를 구조화하고, 더미 데이터를 생성하고 테스트 해보는 시간! 필요한 데이터는- 제목 - 분류 키워드 (ex, 로맨스..)- 포스터- 찜 여부 이렇게 4가지가 있다. 데이터 모델 설정model_movie.dart추후 파이어베이스 연결 후 관리도 쉽게 하기 위해서 데이터를 정의해준다.//For managing movie's data easliy.class Movie{ final String title; final String keyword; final String poster; final bool like; Movie.fromMap(Map map) : title = map['title'], keyword = map['keyworkd'], poster = ma..