개발노트

- 홈 화면 Lottie 애니메이션을 홈화면의 Page마다 추가해주었음 무료만 사용하다보니 선택할 수 있는 애니메이션이 제한적임 Flutter에서 LottieBuilder.network 위젯 사용을 위해 Lottie 애니메이션의 URL이 필요했는데 정확하게 얻는 방법을 알게 됨 원하는 애니메이션을 클릭, 해당 애니메이션을 나의 프로젝트로 이동시킴 Enable Link 스위치 토글을 활성화 시켜 Lottie 애니메이션 링크를 얻음 *주의사항: 무료버전을 사용하는 사람은 최대 10개까지 프로젝트로 이동할 수 있으며, 내 프로젝트에서 지우면 URL이 사라지기 때문에 더이상 불러올 수 없음 - 로그인 화면(로그인 상태관리 추가) 앱 실행 시, 이전 로그인 상태를 알 수 있도록 로직을 추가함(SharedPrefe..

1차적으로 개발한 전체적인 동작화면(사용된 이미지는 랜덤하게 나오는 사이트를 이용) - 구현된 것들 - GoRoute 를 사용하여 Navigator를 구성하였으며, Web에서 URL로 접근 가능하도록함 1. 홈 화면 게스트, 호스트, 등 page들을 넣고 액체느낌으로 페이지 전환되도록 패키지사용 page가 전환되었을 때 축하하는 애니메이션 Lottie가 동작하게끔 로직 작성해봄 2. 칵테일 화면 Hero 위젯을 사용하여 cocktail 정보를 tag로 설정하여 같은 카드가 이동하는 것처럼 일체감을 줌 칵테일 상세화면을 만들고 클릭 했을 때 칵테일 레시피에 필요한 재료와 위스키들을 Riverpod을 통해 가져옴 칵테일 상세페이지의 배경화면 이미지에 블러 효과를 주도록 블러필터를 사용함 당도,바디감, 스파이..

Merge Into Table에 특정 값이 있을 때 Update하고 없을 때 Insert 즉, Upsert하고 싶을 때 사용하는 쿼리 문법 MERGE INTO 타깃테이블 AS Target USING (매칭값) AS Source (타깃테이블칼럼) ON Target = Source 매칭 WHEN MATCHED THEN(AND 로 조건추가가능) UPDATE SET 업데이트 문구 WHEN NOT MATCHED THEN (AND 로 조건추가가능) INSERT (테이블 칼럼명들) VALUES (인서트할 값들); 예시) DECLARE @Code VARCHAR(8) DECLARE @Name NVARCHAR(255) Set @Code = 12345678 Set @Name =N'TEST' MERGE INTO User AS..

- 날짜 연산 패키지: https://pub.dev/packages/jiffy - 액체같은 Swiper 효과: https://pub.dev/packages/liquid_swipe 사용해보니 생각보다 자연스럽고, 이전 페이지 위에 다음 페이지가 바로 생성되는 부분이 좋았습니다. - 간단한 Card Swiper: https://pub.dev/packages/appinio_swiper - 반응형 Scaffold: https://pub.dev/packages/flutter_adaptive_scaffold - 손쉽게 Sheet를 만들어줌: https://pub.dev/packages/wolt_modal_sheet - 영상에 필터를 걸거나 텍스쳐 효과를 줌(빗물, 3D효과, 파장 등): https://pub.dev..

bottomNavigationBar을 만들 때 GoRoute, Stack, OffStage 조합을 사용하는 이유는 다음과 같습니다. GoRoute: GoRoute는 일반적으로 네비게이션 기능을 제공하는 라우팅 패키지로 이를 사용하여 앱의 다양한 화면 간의 이동을 관리할 수 있습니다. 특히, Web에서의 동작을 path와 같은 URL로 처리할 수 있습니다. Stack: Stack 위젯은 위에서 아래로 겹쳐진 위젯을 나타냅니다. 여러 화면을 겹쳐서 표시하고, 사용자가 뒤로가기 버튼을 눌렀을 때 이전 화면으로 돌아가게 합니다. 이것은 사용자 경험을 향상시키고, 앱의 내비게이션을 관리하는 데 도움이 됩니다. OffStage: OffStage 위젯은 화면에서 숨겨진 상태로 위젯을 유지합니다. 이를 통해 앱의 여러..

MediaQuery.of(context).size 는 BuildContext 형인 context가 필요합니다. 따라서 위 코드는 BuildContext 를 제공하는 build안에서만 사용이 가능합니다. - 해결방법: BuildContext가 없이 기기의 size를 가져오기 위해서는 MediaQueryData를 사용하면됩니다. import 'package:flutter/material.dart'; class DeviceSize { static final deviceWidth = MediaQueryData.fromView( WidgetsBinding.instance.platformDispatcher.views.single) .size .width; static final deviceHeight = Media..

1. 프로젝트명 정하고 생성하기 2. 깃허브 Repository 생성(Private) 3. 내가 고려했던 사항들을 구현 가능하게 해주는 패키지 설치 4. 앱 Theme, Primary Color, DarkMode 등 고려하여 초기 설정 5. GoRouter 로 Web 확장까지 고려하여 Navigator 설정하기 6. MVVM 패턴과 repository 등 상태관리를 위해 Provider, Riverpod 설치 7. Serverless 를 위해 firebase 패키지 설치, 프로젝트 생성

flutter_animate flutter_animate 패키지는 Flutter 애플리케이션에서 애니메이션을 쉽게 적용할 수 있도록 도와주는 패키지입니다. 이 패키지는 다양한 애니메이션 효과를 제공하며, 간편한 구문을 사용하여 애니메이션을 구현할 수 있습니다. flutter_animate 패키지의 주요 특징은 다음과 같습니다: 다양한 애니메이션 효과: 패키지는 여러 가지 애니메이션 효과를 제공합니다. 이 효과들은 Fade, Scale, Rotate, Flip 등의 기본적인 애니메이션부터 Pulse, Shake, Wiggle과 같은 고급 애니메이션까지 다양합니다. 간편한 구문: 애니메이션을 구현할 때 간편한 구문을 제공하여 개발자가 복잡한 애니메이션 코드를 작성하지 않아도 되도록 합니다. 이로써 애니메이션..

animations Flutter 애니메이션을 관리하고 제어하는 데 도움이 되는 다양한 패키지가 있습니다. 그 중 하나가 animations 패키지입니다. 이 패키지는 다양한 애니메이션 효과와 전환을 구현하는 데 사용될 수 있습니다. animations 패키지는 Flutter의 기본적인 애니메이션을 보완하고 확장하여 더 많은 제어와 유연성을 제공합니다. animations 패키지의 주요 기능은 다음과 같습니다: 다양한 애니메이션 효과 제공: 패키지에는 페이드 인/아웃, 슬라이드, 크기 조절 등 다양한 애니메이션 효과를 구현하는 위젯이 포함되어 있습니다. 전환 애니메이션 제공: 페이지 전환 애니메이션, 위젯 간의 전환 효과 등을 구현할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 애플리케이션의 전체적..

RIVE RIVE는 Lottie 와 비슷한 패키지로, 움직이는 애니메이션을 제공합니다. 특정 행동에서의 애니메이션 혹은, Input의 값을 변환켜 한가지가 아닌 여러가지 동작을 할 수 있게 만들어줍니다. 즉, RIVE의 가장 큰 특징은 사용자의 조작에 따라 상호작용이 가능한 애니메이션을 구현할 수 있습니다. 구현 목표. RIVE 에 있는 정답곰(정답, 오답에 반응하는 곰) 을 버튼 클릭으로 움직이게 만들어봅니다. 정답 곰은 State 의 Input을 2개(Correct, Incorrect) 가지고 있으며, 2가지 Input 을 전달하는 버튼을 각각 구현합니다. State 가 변했을 때 SnackBar에 stateMachineName 과 stateName이 표시되도록 구현합니다. 1. Flutter 프로젝..