목록전체 글 (369)
seong

마지막으로 내가 이 클론코딩을 선택한 이유중 한개인 SideMenu클릭시 3D 입체감 표현이다. 시작 전 기본적으로 화면은 Stack으로 구성이 되어 있고, AnimatedPosition, Transform이 주로 사용된다. 1. SideMenu 먼저 호출 Positioned( width: 288, height: MediaQuery.of(context).size.height, child: const SideMenu(), ), 2. HomeScreen 에 translate 적용 Transform.translate는 자식 위젯을 이동시켜주는 역할을 한다. Transform.translate( offset: Offset(isSideMenuClosed ? 0 : 288,0), // x : 288, y : 0 c..

1. SideMenu Tile만들기 //Side_Menu_Tile의 변수 final RiveAsset menu; final VoidCallback press; final ValueChanged riveOnInIt; final bool isActive; // 선택된 아이템 활성화 유무 판단 // Column( children: [ const Padding( padding: EdgeInsets.only(left: 24), child: Divider( color: Colors.white24, height: 1, ), ), ListTile( onTap: press, leading: SizedBox( height: 34, width: 34, child: RiveAnimation.asset( //menu는 Rive..

RiveAnimation Icon BottomNav의 Icon클릭시 잠시동안 Animate가 동작한다. RiveAnimation.asset 만 해준다고 Icon과 Animate가 동작 하지않는다. artboard,onInit,onTap(GestureDetector위젯 활용)등 입력 해 주어야한다. RiveAnimate를 적용 시키는방법 RiveAnimation.asset 경로 입력 후 아래 파라미터를 입력해준다. 각 파라미터의 입력 값 찾는 방법은 아래에 설명따로 해두었다. - artboard (아이콘의 이름) artboard: "HOME" - onInit (Animate동작 함수) 및 Trigger선언 onInit: (artboard) { StateMachineController? controller ..

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)), ], )