728x90
반응형

2024/04 25

[Flutter] 넷플릭스 클론 코딩 #7 | 상세보기 페이지 만들기 | 화면 이동 | 이미지 블러 처리 | SafeArea | Navigation

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

SELF STUDY/Flutter 2024.04.30

[Java][LeetCode] #2932. Maximum Strong Pair XOR I | O(nlogn) | O(n^2)

문제 / 예시 : 제한 조건 : 보자마자 복잡하다고 생각했지만!풀어서 써보니 많이 복잡하진 않았다. 풀이 #1내가 생각한 방법은Array 를 정렬시키고, 같은 숫자 (같은 위치) 면 위의 조건에 무조건 통과하니, 투 포인트를 둬서 같은 위치에서 시작 하나씩 이동하면서 비교하는 것 이다. 예시로 보면,12345Left Right    이 위치에서 시작12345Left Right   nums[right] - nums[left] => nums[left]  에 해당 할 경우, XOR 값을 계산해주고 Right를 다음으로 넘기면 된다. 근데12345Left  Right  이 경우, nums[right] - nums[left] => nums[left] 에 해당하지 않아서 Left를 다음으로 이동시키고, Right도..

[Java][LeetCode] #1641. Count Sorted Vowel String | O(n)

내가 너무나 약한 DP에서 랜덤으로 풀어보았다.근데 DP로 푼지 아닌지 모르겠음 문제 / 예제 / 제한조건 풀이 패턴을 찾느라고 거의 1시간은 쓴 것 같다.뇌가 잘 안돌아가서 나는 직접 다 적어봐야 패턴을 찾을 수 있다..뭐 경험이 부족한 탓이겠지!? 그렇게해서 찾은 패턴! n = 1 일 때 각자 개수는AEIOU11111 n = 2 일 때, 각각의 개수는AEIOU54321 n = 3 일 때, 각각의 개수는AEIOU1510631 이렇게 구성되어 있다. 규칙이 보인다 +_+바로바로AEIOUn=2 일때의 A + E + I + O + Un=2 일때의 E + I + O + Un=2 일때의  I + O + Un=2 일때의  O + Un=2 일때의  U1510631 그렇게 구현해보면~class Solution { ..

[Java][LeetCode] #152. Maximum Product Subarray | O(n) | O(n^2)

문제 / 예제 / 제한 조건 :  이번 문제도 보자마자는 엄청 쉬워보였는데, 생각보다 어려웠다. 딱 떠올렸을 때, 모든 케이스를 계산하는 방법 외에 다른 방법이 떠오르지 않았다..통과하는지 보기 위해서 일단 풀어봄 풀이 #1for문 2개를 써서 모든 경우의 수를 다 계산하고 곱해주는 것.class Solution { public int maxProduct(int[] nums) { int maximumNum = nums[0]; for (int i = 0; i Time Complexity : O(n^2)Space Complexity : O(1)이건 너무 꼴찌잖아..(இ﹏இ`。) 다른 방법을 머릿속으로 계속계속 생각했는데, 전혀~ 모르겠어서 검색 찬쓰 유튜브 3개를 정도 보고, ..

[Flutter] 넷플릭스 클론 코딩 #6 | 원형 , 사각형 이미지 슬라이더 위젯 추가 | crossAxisAlignment | InkWell | CircleAvatar

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

SELF STUDY/Flutter 2024.04.27

[JAVA][LeetCode] #238. Product of Array Except Self | Arrays | Medium |

문제 / 예제 / 제한 조건 : 처음에 문제 보자마자 엄청 쉬워보였다.# 풀이 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..

[Flutter] 넷플릭스 클론 코딩 #5 | Carousel Slider 추가 | Indicator 추가 | Stack 사용

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

SELF STUDY/Flutter 2024.04.26

[Flutter] Image Blur effect | 이미지 흐리게 하기 | 흐린 이미지 배경에 넣기 | BoxDecoration | BackdropFilter | ImageFilter

위 사진 처럼불러 처리된 이미지를 배경으로 하고, 그 위에 실제 이미지를 올리는 기능을 구현해보자! 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:..

SELF STUDY/Flutter 2024.04.26

[Flutter] 화면 간 이동 구현 | Navigator

플러터의 화면 구성은 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를 사용해도 된다...

SELF STUDY/Flutter 2024.04.25
728x90
반응형