flutter/function10 네이티브 API와 통신하기(1) 플러터 앱을 개발할 때는 다양한 패키지를 사용한다. 그러나 원하는 기능의 패키지가 없거나 버전이 낮아서 사용하기가 불안할 때도 있다. 예를 들면 기기 자체의 정보라든지 배터리 정보, 또는 운영체제에 맞게 개발된 오픈소스를 사용할 때도 마찬가지다. 이럴 때는 어쩔 수 없이 네이티브 언어로 작성된 API를 이용해야한다. 각 모바일 운영체제는 저마다 고유한 기능을 구현해 놓은 API를 제공한다. 이 API는 안드로이드의 경우 자바나 코틀린, iOS의 경우 오브젝트-C나 스위프트로 작성되어 있다. 이처럼 각 모바일 운영체제에 최적화된 언어로 작성된 소스를 네이티브(native)라고 한다. 플러터는 이러한 운영체제별 API를 메시지 전달 방식으로 사용할 수 있도록 지원한다. 플러터 앱이 운영체제별 API와 통신하.. 2022. 11. 21. 애니메이션(4) 슬리버 스크롤뷰 화면을 스크롤할 때 앱바의 크기를 변경하는 애니메이션을 구현해보겠다. 앱바나 리스트를 역동적으로 만들고 싶을 때는 슬리버(sliver)라는 위젯을 사용한다. SliverAppBar, SliverList, SliverGrid 등 세 가지 슬리버를 사용해 확장 앱바와 리스트, 그리드가 차례로 포함된 스크롤뷰를 만들어 보았다. - sliverPage.dart 파일을 만든 뒤 StatefulWidget을 상속받는 SliverPage 클래스를 만들어 기본 골격을 갖춘다. - body에서 사용한 CustomScrollView는 슬리버를 사용해 사용자 정의 스크롤 효과를 만드는 위젯이다. CustomScrollView의 slivers에 위젯을 지정하면 확장 앱바, 리스트, 그리드와 같은 다양한 스크롤 효과를 만들 수.. 2022. 11. 20. 애니메이션(3) 인트로 화면 만들기 애니메이션(1) 그래프, 색상 변경, 불투명도 애니메이션은 위젯이 처음 위치에서 마지막 위치까지 어떻게 이동할 것인지를 정의하는 것이다. 이러한 동작을 매끄럽게 표현하려면 프레임 단위로 위젯의 위치를 구현해야 하지만 그러려면 shinjoo95.tistory.com 애니메이션(2) 페이지 이동, 회전 애니메이션 애니메이션은 위젯이 처음 위치에서 마지막 위치까지 어떻게 이동할 것인지를 정의하는 것이다. 이러한 동작을 매끄럽게 표현하려면 프레임 단위로 위젯의 위치를 구현해야 하지만 shinjoo95.tistory.com 앞 게시물처럼 Hero를 이용하면 페이지 연결을 자연스럽게 표현할 수 있고, AnimatedBuilder와 Tween을 이용하면 원하는 동작으로 애니메이션을 만들 수 있다. 이러한 내용을 바탕.. 2022. 11. 20. 애니메이션(2) 페이지 이동, 회전 애니메이션 애니메이션은 위젯이 처음 위치에서 마지막 위치까지 어떻게 이동할 것인지를 정의하는 것이다. 이러한 동작을 매끄럽게 표현하려면 프레임 단위로 위젯의 위치를 구현해야 하지만 그러려면 shinjoo95.tistory.com 이전 포스트에 이어 애니메이션을 좀 더 세밀하게 조절하는 법과 페이지를 이동할 때 사용하는 애니메이션을 활용하여 나만의 인트로 화면을 구현해보겠다. 페이지 이동 애니메이션 - 페이지를 이동할 때 애니메이션을 적용하려면 Hero 위젯을 사용한다. 이 위젯을 페이지 간의 이미지를 자연스럽게 애니메이션으로 연결해준다. - secondPage.dart 파일을 만들고 StatefulWidget을 상속받는 SecondPage 클래스를 생성한다. build() 함수에서는 Hero 위젯으로 감.. 2022. 11. 18. 애니메이션(1) 그래프, 색상 변경, 불투명도 애니메이션은 위젯이 처음 위치에서 마지막 위치까지 어떻게 이동할 것인지를 정의하는 것이다. 이러한 동작을 매끄럽게 표현하려면 프레임 단위로 위젯의 위치를 구현해야 하지만 그러려면 복잡한 계산식이 필요하다. 하지만 플러터는 복잡한 계산식이 없어도 편리하게 애니메이션을 구현하는 기능을 제공한다. - 플러터가 제공하는 애니메이션 기능 중 하나인 AnimatedContainer 위젯을 사용하면 기존의 컨테이너 위젯과 똑같지만 애니메이션의 모양을 결정하는 curve와 재생 시간을 결정하는 duration 변수를 추가로 넣을 수 있다. - 다음 주소에 접속하면 플러터 API의 Curves 클래스가 제공하는 다양한 애니메이션 모양을 확인할 수 있다. Curves class - animation library - Da.. 2022. 11. 18. 내부 저장소 이용하기 플러터에서 앱의 데이터를 저장하는 방법은 크게 3가지로 나뉜다. 1. 공유 환경설정 2. 파일 3. 데이터베이스 이용 1. 공유 환경설정에 데이터 저장하기 - 공유 환경설정은 비교적 적은 양의 간단한 데이터를 저장하는 용도로, Shared Preferences라는 클래스를 이용한다. 이 클래스는 키-값 쌍으로 구성된 공유 환경설정 파일을 가리키며 이 파일에 데이터를 읽거나 쓰는 함수를 제공한다. - SharedPreferences 클래스를 이용하여 데이터를 저장하는 앱을 만들어 보겠다. 데모 앱의 카운트값 저장하기 - 기본으로 만들어지는 데모 앱에서 플로팅 버튼을 누르면 증가하는 카운트값을 고유 환경설정에 저장해보겠다. - 데모 앱은 오른쪽 아래 + 모양의 플로팅 버튼이 있고 이 버튼을 누르면 화면의 카.. 2022. 11. 17. 내비게이션 한 페이지로도 앱을 만들 수 있지만 기능이 많으면 화면 구성이 어렵고 로딩이 느려지기도 한다. 내비게이션 기능은 앱이 제공하는 기능이나 메뉴별로 화면을 분리해서 개발하는 방법이다. - FirstPage 클래스에서 만든 플로팅 버튼을 눌렀을 때 호출되는 onPressed 이벤트 처리 함수 - Navigator는 스택(Stack)을 이용해 페이지를 관리할 때 사용하는 클래스이다. Navigator 클래스의 of(context) 함수는 현재 페이지를 나타내고 push() 함수는 스택에 페이지를 쌓는 역할을 한다. 따라서 위 코드는 현재 페이지 위에 SecondPage를 쌓는 것으로 해석할 수 있다. - push() 함수에 전달한 MaterialPageRoute() 함수는 머티리얼 스타일로 페이지를 이동하게 해.. 2022. 11. 14. 네트워크 통신, 카카오 API 외부 패키지 이용 방법 앱을 만들 때 모든 기능을 직접 구현하려면 많은 시간이 필요하다. 그러므로 대부분의 개발자는 이미 만들어진 패키지를 활용한다. pub.dev 에서 원하는 기능이 구현된 패키지를 찾아 pubspec.yaml 파일에 등록하면 기능을 사용할 수 있다. Dart packages Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs. pub.dev 네트워크와 연결하는 통신 규약 HTTP의 데이터 통신 기능 구현 http 옆에 버전이 기재되어있고, 라이센스 항목에 BSD라.. 2022. 11. 12. 탭바(tabBar) 만들기 여러 페이지 만들고 이동하기 여러 화면을 만들고 각 화면을 탭바에 연결해 사용자가 탭을 눌렀을 때 각 화면으로 이동하는 앱을 구현한다. 모바일 앱 개발에서는 이와 같은 기능을 내비게이션(navigation)이라 칭힌다. 탭바 위젯을 사용하려면 탭 컨트롤러가 필요하다. main.dart _MyHomePageState 클래스에서 initState() 함수를 이용해 TabController를 선언한다. TabController에서 length에는 몇 개의 탭을 만들지 지정하고, vsync에는 탭이 이동했을 때 호출되는 콜백 함수를 어디서 처리할지 지정한다. _MyHomePageState 클래스에 *with 키워드를 추가하고 SingleTickerProviderStateMixin 클래스를 지정하면 vsync: .. 2022. 11. 9. 이전 1 2 다음 반응형
