seong

1. showGeneralDialog를 사용해 커스텀한 dialog를 사용 2.Duration,Tween,SlideTransition을 사용해서 해당 효과를 만들어준다. Duration : 애니메이션의 지속시간 Tewwn : 시작(begin)과 끝(end)을 가지며, 애니메이션을 시작과 끝을 부드럽게 이어준다. SlideTransition : 화면의 슬라이딩 효과를 만들고 싶을때 사용한다. 애니메이션 관련 소스코드 barrierDismissible : true 일경우 다른 곳을 터치해도 dialog를 닫을 수 있도록 해줌. transitionDuration : dialog가 나타나는데 걸리는 시간 ( milliseconds: 400 = 0.4초 ) transitionBuilder : 어떠한 애니메이션을 ..

Flutter의 Rive라이브러리를 사용하려면 .riv형식의 파일이 필요하다. 이것을 만들어주는 곳이 https://rive.app/ rive이다. 내가 만들어보았지만 차라리 다른 능력자분들이 만들어놓을 것을 쓰는게 훨씬 정신건강에 이로울것 같다.. (필요한 .riv를 rive.app 홈페이지에서 Community에서 검색하면 된다.) 만들때 필요한 것 1. svg 이미지 파일 2. 최대 시간 초 설정 3. 시간 초를 나누어 이미지의 위치, Rotation 설정 4. Download 1. 자신이 원하는 크기의 사이즈 설정 ( 에뮬레이터의 휴대폰 사이즈를 입력했다) 2. svg파일을 assets에 추가 3. 우측 상단의 Animate -> Timeline -> Duration를 자신이 필요한 애니메이션초 ..

RiveAnination위젯 - 로티, svg 등 애니메이션을 활용할 방안은 다양하게 있지만 유튜브에 찾아보니 rive도 간단하게 애니메이션 이미지를 구현할 수 있다. - 2D 애니메이션을 활용 해 좀 더 화려하게 해준다 ( 애니메이션 ) - .riv 이미지 형식이다. https://pub.dev/packages/rive rive | Flutter Package Rive 2 Flutter Runtime. This package provides runtime functionality for playing back and interacting with animations built with the Rive editor available at https://rive.app. pub.dev Rive파일 만들기 ..

소스코드 - width의 값이 1024보다 클 경우 Desktop로 했다. - Desktop일 경우 appBar는 없어진다. - Appbar를 클릭하면 현재 페이지의 openDrawer를 호출해, SideMenu()를 연다. (SideMenu는 개인적으로 만든 위젯) appBar: Responsive.isDesktop(context) // Desktop이면 AppBar 숨김 ? null : AppBar( backgroundColor: bgColor, leading: Builder(builder: (context) { return IconButton( onPressed: () { Scaffold.of(context).openDrawer(); }, icon: const Icon(Icons.menu), ); ..

AnimatedTextKit - 일반적인 정적인 Text에 애니메이션을 입혀준다. - https://pub.dev/packages/animated_text_kit 에서 설치가 필요하다. 소스코드 AnimatedTextKit( animatedTexts: [ TyperAnimatedText("AnimatedTextKit 사용해보기", textStyle: const TextStyle(color: Colors.white)), TyperAnimatedText("Text Animation 입히기", textStyle: const TextStyle(color: Colors.white)), ], )

TweenAnimatedBuilder - Tween은 begin을 시작해 end까지 애니메이션이 움직이도록 해준다. - 애니메이션의 속성 : duration (애니메이션 실행 시간), curve(애니메이션 실행 속도 ex: 시작은 빠르게 중간부터 천천히 등) - 주의 사항 : Tween의 타입, builder의 두번째 파라미터 타입 모두 일치 해야한다. 소스코드 - begin을 0으로 주고, percentage는 80으로 주었다. - CircularProgressIndicator는 0 ~ 80까지 선으로 원을 그려준다 정적인 CircularProgressIndicator위젯에 TweenAnimation을 사용해 선에 색 0 ~ 80 이 채워지는 효과가 생기게 되었다. TweenAnimationBuilde..

PageView - 페이지 이동시 부드럽게 이동할 수 있도록 해준다. 소스코드 코드 설명 - 총 3개의 페이지를 splash, 현재 페이지 구분을 위해 currentPage 변수 선언 - PageView.builder로 페이지 이동을 하고, onPageChanged 메서드로 현재 페이지를 전달해준다. - 페이지 이동마다 아래 dot도 함께 변한다. -> AnimatedContainer를 사용 class _BodyState extends State { int currentPage = 0; List splashData = [ { "text": "Welcome to Tokoto, Let's shoop!", "img": "assets/images/splash_1.png", }, { "text": "We help..

GestureDetector 위젯 - 움직임(클릭, 더블클릭 등등)을 감지 할 수 있도록 해준다. - 간단하게 말해 버튼화 시켜준다. - InkWell과의 차이점: InkWell은 버튼 클릭시 누를때 퍼지는 듯한 모션이 보이지만, GestureDetector은 없다. 소스코드 GestureDetector( onTap: () => Navigator.pushNamed(context, ForgotPasswordScreen.routeName), child: const Text( "Forgot Password", style: TextStyle(decoration: TextDecoration.underline), ), ),