안녕하세요~ 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 개발자입니다. 오늘은 HTML과 CSS를 활용해서 Grid를 적용해보는 방법에 대해 살펴보도록 하겠습니다. 먼저 기본적으로 grid를 형성하는 방법에 대해 살펴보겠습니다. 여기에서는 쉬운 예제를 위해 inline CSS로 진행했습니다. 아래 코드처럼 container 클래스의 div 태그와 그 안에 product 클래스의 제품 6개 div 태그들을 넣어주었고 9번째부터 19번째 줄까지 CSS 코드를 작성해주었습니다. 여기에서 중요하게 적용해야 하는 CSS는 아래 표로 정리했습니다. display flex, grid, inline, block 등 속성을 가지고 있으며 flex와 grid의 차이는 flex는 1차원, grid는 2차원으로 flex는 세로 또는 가로 방향 한 방향만 ..

안녕하세요~ totally 개발자입니다. 오늘 이 시간에는 파워포인트 슬라이드를 16대 9비율로 변경해보는 코드에 대해 살펴보고자 합니다. 사실 요즘에는 4대3 비율을 많이 사용하고 있지 않고 16대 9비율을 많이 사용하고 있지만 여전히 4대3 비율의 슬라이드도 많이 존재하는 실정입니다. 그래서 이번에는 파일을 직접 선택하여 그 파일의 비율을 16대 9로 변경해보도록 하겠습니다. 아래와 같이 샘플 PPT가 하나 있다고 가정하겠습니다. Step 1: 보기 -> 도구상자 -> OpenFileDialog를 드래그 앤 드롭으로 추가해줍니다. Step 2: 버튼을 하나 추가해줍니다. Step 3: 버튼을 더블 클릭하여 이 메소드 안에 var filePath = string.Empty로 변수를 초기화해줍니다. St..