코딩 다이어리

이번에는 넷플릭스 홈 화면에 있는 원형 슬라이더와 사각형 슬라이더를 만들어보는 시간!아래 화면에 있는 것이 사각형 슬라이더 라고 한다. 원형 슬라이더 구현 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; ..

문제 / 예제 / 제한 조건 : 처음에 문제 보자마자 엄청 쉬워보였다.# 풀이 1내가 생각했던 방식은 [1,2,3,4] 가 있다면이 값을 모두 곱해둔 값을 하나 가지고 있고 -> 24result를 저장 할 때, nums[i]로 나누어서 저장하면 된다고 생각했다.class Solution { public int[] productExceptSelf(int[] nums) { int[] results = new int[nums.length]; int allMultipleValue = 1; for (int num : nums) { allMultipleValue *= num; } for (int i = 0; i Time comp..

넷플릭스에서 메인화면에 포스터가 크게 보이고, 옆으로 넘기면 다른 포스터가 보이는 화면을 구현해보았다- 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..

문제 / 예제 / 제한조건 : 겹치는 수의 인덱스 차이가 k보다 적게 나는 것이 1개라도 있으면 true! 매우매우 기분 좋게 한 번에 아주 좋은 결과로 통과해부렀지〰️ 해결방법나는 map에 num값을 key로 Index 값을 value로 저장해두고,같은 num값이 있을 경우, index 값을 비교해서 k 보다 크면 더 큰 (최신)  index 값을 저장하여 index 값을 업데이트 해주는 식으로 하였다.class Solution { public boolean containsNearbyDuplicate(int[] nums, int k) { HashMap map = new HashMap(); for(int i=0; iTime Complexity :..

문제 / 예시 / 제한조건 겹치는 항목이 있는지 체크하는 방법 HashMap 을 이용class Solution { public boolean containsDuplicate(int[] nums) { HashMap map = new HashMap(); for(int num : nums) { if(map.containsKey(num)) return true; else map.put(num, true); } return false; }} 이렇게 풀었당Time Complexity : O(n)Space Complexity : O(n) 근데 Hash..

이번 시간에는 넷플릭스에 들어가는 N로고를 추가하는 방법에 대해 알아보는 시간~ 나는 강사님이 만들어주신 B로고를 그대로 사용했는데, Y로 바꾸고 싶다+_+ 이미지 파일 패키지에 추가하는 방법 1. root폴더 아래에 images폴더 생성 버튼 누르고 images 폴더 생성 (원하는 폴더명으로 하면 될 듯) 2. 생성한 폴더 (images)에 추가하고자 하는 이미지 파일 저장 3. pubspec.yaml 파일 수정 assets에 있는 주석을 지우고, 원하는 파일의 경로를 추가해주면 된다. ex) 수정 전 # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - i..