seong

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

Spacer 위젯 - Column, Row위젯 처럼 Flex공간이 존재하는 위젯에서 위젯과 위젯 사이의 공간의 여백을 주는데 사용된다. - 생성자 flex를 선언할 수 있다, - flex : 위젯 사이의 비율을 말한다. 소스코드 Column( children: [ Expanded( flex: 3, child: Column( children: [ const Spacer(), // 공간 여백 추가 Text( "TOKOTO", style: TextStyle(fontSize: getProportionateScreenHeight(36), color: kPrimaryColor, fontWeight: FontWeight.bold), ), const Text("Welcome to Tokoto, Let's shop!")..

문제 : 아래는 Column내부에 Text(Title), Row위젯(Price, icon)이 있다, Text에 maxLine을 2로 주었을 때, Text의 Line에 따라서 Row의 위치가 변한다, 해결 : 처음에는 Row위젯을 SizedBox로 감싸 height를 주려 했으나, 그렇게 해봤자 어차피 달라지는 점은 없다. 동적으로 변하는 Text(Title)을 SizedBox로 감싸 높이를 주었다. 기존의 소스코드 Text( product.title, style: const TextStyle(color: Colors.black), maxLines: 2, ), 변경 후 소스코드 SizedBox( height: getProportionateScreenHeight(42), child: Text( product..