안녕하세요~ totally 개발자입니다. RefreshIndicator 오늘은 아래로 스와이프하여 새로고침을 구현하여 데이터를 갱신하는 방법에 대해 알아보도록 하겠습니다. RefreshIndicator를 위해서 FutureBuilder, ListView.builder, SingleChildScrollView를 같이 활용해보도록 하겠습니다. Step 1: 실제 json data를 https://dummyjson.com/products 여기 예제 사이트에서 데이터를 가져와서 화면에 출력해보겠습니다. 데이터 fetch를 위해 dio 패키지를 pubspec.yaml에 추가해줍니다. Step 2: dio 임포트 해주고, 11번째 줄처럼 dio 인스턴스를 만들어줍니다. 또한 product를 가져와서 저장할 리스트도..

안녕하세요~ 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 개발자입니다. TTS(Text To Speech) 오늘 다룰 부분은 TTS(Text To Speech)입니다. TTS란 용어 그대로 텍스트를 소리로 나타내는 것입니다. 플러터 패키지를 사용하기 때문에 pubspec.yaml 파일에 다음처럼 명시해주시면 됩니다. 그 다음 flutter_tts.dart를 import 해줍니다. 10번째, 11번째 줄처럼 FlutterTts와 TextEditingController 인스턴스를 만들어줍니다. 다음으로는 13-20번째 줄처럼 initState 메소드를 만들어주어 초기화될 때 tts.setLanguage("ko-KR")과 tts.setSpeechRate(0.5)를 사용하여 언어와 언어를 말하는 속도를 지정해줍니다. 영어인 경우에는 "en-..

안녕하세요~ totally 개발자입니다. 오늘 이 시간에는 플러터의 Lifecycle 생명주기에 대해서 살펴보도록 하겠습니다. 플러터에는 Stateless Widget과 Stateful Widget으로 나뉘어집니다. Stateless Widget은 제목 그대로 상태 없는 위젯으로 구조가 매우 단순합니다. Constructor라고 하는 생성자와 Widget build가 사용되어 화면에 출력될 내용을 표시합니다. 위의 예제를 보시면 extends StatelessWidget으로 표시되어 있고 const STATELESSWIDGETEXAMPLE() 생성자를 만들어줍니다. 그 다음에 @override를 작성한 뒤에 Widget build(BuildContext context)로 출력할 위젯을 작성하면 됩니다. ..