안녕하세요~ totally 개발자입니다. TweenAnimationBuilder, Transform 오늘은 카드를 뒤집어보는 애니메이션에 대해 살펴보겠습니다. TweenAnimation에서는 tween instance를 사용하게 되는데 begin value와 end value를 지정해서 target인 end value로 애니메이션하는 원리입니다. Transform은 어떻게 transform(변형)시킬지를 정의합니다. 바로 예제 실습으로 들어가보도록 하겠습니다. Step 1: 카드의 앞, 뒤로 사용할 동일한 크기의 이미지 2개를 준비해서 원하시는 폴더에 넣어주시고 pubspec.yaml에 경로를 명시해줍니다. Step 2: dart:math를 임포트해줍니다. Step 3: 필요한 변수인 _isBack과 _..

안녕하세요~ totally 개발자입니다. AnimatedContainer 오늘 다뤄볼 부분은 AnimatedContainer을 사용해서 컨테이너의 크기 또는 색상이 변할 때 애니메이션을 입히는 방법입니다. 바로 예제를 살펴보도록 하겠습니다. Step 1: 초기 width(가로길이)와 height(세로길이), color(색상)을 변수로 만들어주겠습니다. Step 2: AnimatedContainer 위젯으로 애니메이션을 입힐 Container 위젯을 만들어주고 변화를 줄 속성에 조금 전에 선언했던 변수들을 전달해줍니다. duration에는 몇 초로 설정할 것인지, curve에는 어떤 방식의 애니메이션 효과를 적용할 것인지 선택해서 입력하면 됩니다. Step 3: 애니메이션을 할 수 있도록 요소들을 변경할 ..

안녕하세요~ totally 개발자입니다. 오늘 다룰 부분은 Scaffold 위젯에 있는 bottomNavigationBar 속성을 이용하여 화면 하단 네비게이션 바를 배치해보는 것에 대해 살펴보도록 하겠습니다. 보통 인스타그램, 카카오톡 등 요즘 어플들을 보면 화면 하단에 네비게이션바가 위치하고 있는 것을 알 수 있습니다. 대부분의 이유로는 화면 하단에 있기 때문에 한 손가락으로 쉽게 누르면서 조작할 수 있다는 장점이 있습니다. 예제로 바로 들어가보도록 하겠습니다. Step1: 9번째 줄에 with SingleTickerProviderStateMixin을 추가하고 10, 11번째 줄에 TabController와 tab을 선택했을 때 선택한 인덱스 값을 담을 수 있는 integer 변수를 하나 선언해줍니다..

안녕하세요~ totally 개발자입니다. SharedPreferences 오늘 살펴볼 부분은 SharedPreferences입니다. 간단한 자료를 디스크에 저장할 때 유용하게 사용되며 방대한 자료는 이 방법을 권장하지 않습니다. 이 SharedPreferences는 다양하게 사용될 수 있습니다. 예를 들어 사용자의 정보를 기억한다던지 앱을 사용하고 종료한 후 기존에 설정해두었던 데이터를 불러오는 상황에서 유용합니다. 사용 방법은 간단하며 key, value 구조로 되어 있습니다. 사용하는 방법은 아래와 같습니다. 1) pubspec.yaml에 shared_preferences: 2.0.5 (현재 기준 2.0.15이지만 필자는 2.0.5로 진행했습니다)를 입력합니다. 버전 및 공식 문서는 아래에서 확인하시..

안녕하세요, totally 개발자입니다. 오늘 다룰 부분은 좀 방대하지만 Flutter에서 반드시 알아야 할 부분으로 FutureBuilder, Future, Async, Await, 로딩 중일 때 로딩중임을 표시하는 방법, JSON 파일을 불러오는 플러터에서 불러와서 출력하는 방법들입니다. 이 개념은 비동기(Asynchronous) 처리로써, 보통 한 작업을 처리하고 나서 다음 작업을 처리하는 반면, 비동기에서는 한 작업을 일단 처리를 시작하고 처리가 끝나지 않았음에도 불구하고 다음 코드 작업 실행에 착수합니다. 그 때 플러터에서 사용하는 개념이 Future, Async, Await입니다. async 키워드는 함수 부분에 붙여주고 await는 실행해야 하는 함수 앞에 붙여주면 됩니다. 바로 예제를 확인..

안녕하세요~ totally 개발자입니다. Youtube Video 오늘은 플러터에 유튜브 동영상을 삽입하는 방법에 대하여 알아보겠습니다. 이 유튜브 동영상 삽입을 위해서는 플러그인을 사용해야 하는데 진행 과정은 아래와 같습니다. 1. 플러그인 설정 2. Info.plist 수정 3. 동영상 및 비디오 컨트롤러 추가 먼저 플러그인 설정부터 확인해보도록 하겠습니다. 1. 플러그인 설정 우선 프로젝트 경로에 있는 pubspec.yaml 파일을 찾고 dependencies: 아래 줄에 youtube_player_flutter: 을 추가해줍니다. 2. Info.plist 수정 ios -> Runner -> Info.plist에 5,6번째 줄처럼 io.flutter.embedded_views_preview 넣어줍니..