seong

TabBar는 Controller가 필수 요소이다. Controller를 정의 하는데는 DefaultController, TabController 두가지 방식이 있다. TabController는 사용자가 직접 커스텀 해 Animate, 세세한 동작을 직접 정의해서 컨트롤 할때 사용한다. 소스코드 TabController를 직접 커스텀 하기 위해 TickerProviderStateMixin을 상속받아주어야한다. initState 메서드를 통해 위젯이 build되기 전에 tabController를 초기화 시켜준다. length : 3 // Tab의 갯수이며, Tab의 갯수와 일치 시켜주어야 한다. vsync : this // TickProvider를 위젯과 동기화 시키기 위해 사용 animationDurat..

Google font를 적용하는 방법은 두가지가 있다. 1. 폰트를 다운 받은 후 적용 2. pub.dev에서 Google fonts 라이브러리를 활용한 적용 폰트를 다운 받은 후 적용 하는 방법 1. Google Fonts 사이트에 들어가서 마음에 드는 폰트 설치 Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 프로젝트 최상위 폴더에 assets/google_fonts 생성 ( 폴더 이름 상관 x ) 3. pubspec.yaml 파일에 아래 처럼 fonts의 경로를 추가 family는 아무거나 써도 되지만 웬만해선 font이름과 같게 사용하..

1. 아래 링크 회원 가입 및 APIKey발급 https://openweathermap.org/ 2. API와 통신을 위해 http_connect 생성 - 싱글톤 패턴을 사용해 중복된 인스턴스를 사용하지 못하도록 방지 - API 요청할 주소 : "http://api.openweathermap.org/data/2.5/weather?lat=$lat&lon=$lon&appid=$_apiKey&units=metric" - path를 uri 타입에 맞게 파싱하여 get요청 - 응답받은 Json String -> Dart에서 다룰 수 있게 Json자료형(Map)으로 변환 해서 넘겨준다. class HttpConnector { // 싱글톤 패턴 사용 static final HttpConnector _instance ..

마지막으로 내가 이 클론코딩을 선택한 이유중 한개인 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를 자신이 필요한 애니메이션초 ..