Flutter - 특정 영역만 페이지 이동하기 (특정 부분 화면 전환)

개요 여러 프레임으로 구성된 하나의 화면에서 요구사항에 맞게 특정의 영역만 화면 전환이 되어야할 때가 있다. Header와 Footer, 그리고 메인 영역이 표시될 Body를 영역별로 나눠서 작업한 적이 있었는데 보통 Navigator.push()를 사용하면 화면 전체가 전환되기 때문에 다소 난감하다. 또한, 매 페이지마다 같은 Header와 Footer 내용의 코드를 재사용하기도 좀 그렇다. 단지 내가 원하는 것은 중앙의 Body 영역의 화면 전환일뿐인데 말이다. 이번 포스팅에서는 특정 영역에서만 화면을 다르게 보여주는 내용에 대해 설명한다. 포스팅에서 설명하는 프로젝트는 깃허브에서 다운로드 가능하다. https://github.com/luvris2/flutter-example 하위 디렉토리 : flu..

• format_list_bulleted Mobile/Flutter
• · 2024. 2. 12.
• textsms

Flutter - Navigator.pop 이전 화면으로 현재 화면의 값 넘기기

개요 Navigator를 이용하여 이동된 페이지에서 다시 이전 화면으로 pop하여 돌아갈 경우, 현재 페이지의 값을 이전 페이지에게 넘겨야 할 때가 있다. 이는 상태 관리 패키지(Provider, getX 등)를 이용하여 값을 공유하는 방법도 있지만 단순히 일회성의 데이터 전달이 필요할 경우는 굳이 상태 관리 패키지를 이용하기에는 번거롭다. 네비게이터에서는 페이지가 pop되어 이전 페이지로 되돌아갈 때 현재 페이지의 값을 넘겨주는 방법이 있다. 이번 포스팅에서는 Navigator.pop에서 값을 전달할 수 있는 파라미터를 이용하여 현재 페이지와 이전 페이지의 값을 전달해보자. 포스팅에서 설명하는 프로젝트는 깃허브에서 다운로드 가능하다. https://github.com/luvris2/flutter-exa..

• format_list_bulleted Mobile/Flutter
• · 2024. 2. 11.
• textsms

Flutter - 사용자가 색상 팔레트에서 색 선택하기 (ColorPicker 구현)

Overview 플러터 앱에서 사용자가 색상을 선택하고, 선택한 색상을 반영하는 기능을 구현해보자. 포스팅에서는 flutter_colorpicker 패키지를 사용하며, 총 세 가지의 컬러 피커 사용 방법을 샘플로 다룬다. 포스팅에서 다루는 프로젝트는 아래의 깃허브에서 다운로드 가능합니다. 깃허브에서 flutter_color_picker_example 섹션을 확인해주세요. 그 외에도 다른 샘플 프로젝트를 확인하실 수 있습니다. 자세한 내용은 깃허브의 리드미를 확인해주세요 :) https://github.com/luvris2/flutter-example GitHub - luvris2/flutter-example Contribute to luvris2/flutter-example development by c..

• format_list_bulleted Mobile/Flutter
• · 2024. 1. 14.
• textsms

Flutter - 플러터 앱 프로젝트 정보 확인하기 (package_info_plus)

package_info_plus 패키지란?Flutter 플러그인으로, 애플리케이션 패키지에 대한 정보를 보다 쉽게 확인할 수 있다. 확인할 수 있는 정보는 다음과 같다.애플리케이션 이름패키지 이름버전 정보빌드 번호 또한, 기존의 package_info 패키지는 2021년 말에 지원이 중단되었으며, 플러스 버전인 package_info_plus 플러그인을 사용하여야 한다. 즉, 기존의 패키지 인포 플러그인은 지원이 종료되었고 플러스 버전으로 유지되고 있다.package_info_plus 설치pub add 명령어를 통해 package_info_plus 패키지를 설치해준다.flutter pub add package_info_plus 패키지가 잘 적용될 수 있도록 플러터 프로젝트의 빌드 정보를 정리하고 다시 빌..

• format_list_bulleted Mobile/Flutter
• · 2024. 1. 12.
• textsms

Flutter - 앱 버전 업데이트 구현하기, 파이어베이스로 버전 관리하기(FlutterFire RemoteConfig)

Overview 현재 회사에서 새롭게 리뉴얼해서 2.0 버전으로 만드는 앱이 있다. 앱이 신버전으로 출시 될 때, 사용자들은 앱이 출시됐는지를 확인하기 어렵다. 즉, 개발자는 앱 사용자들이 새로운 버전의 앱이 출시되었을 때 최신버전의 앱을 사용하도록 유도해야한다. 좀 더 자세히 말하면, 구글 플레이 스토어를 통해 앱을 업데이트하도록 해서 최신 버전을 사용할 수 있게 하여야 한다. 이는 Firebase의 RemoteConfig를 사용하면 버전 관리 기능은 손쉽게 구현할 수 있다. 아래는 예시 이미지이다. 버전 정보가 다르면 업데이트 해달라는 문구가 출력되고, 업데이트하기 버튼을 누르면 구글 플레이 스토어로 연결되어 업데이트를 진행하는 기능이다. 이번 포스팅에서는... 파이어베이스의 원격 구성을 이용하여 앱..

• format_list_bulleted Mobile/Flutter
• · 2024. 1. 11.
• textsms

Flutter - 플러터 앱에 파이어베이스 연동하기 (FlutterFire)

플러터파이어(FlutterFire) 란? Flutter의 응용 프로그램을 Firebase에 연결하는 Flutter 플러그인 세트이다. Flutter에서 Firebase 서비스를 사용하려면 FlutterFire 플러그인이 필요하다. 이 포스팅은 파이어베이스 CLI를 필요로 한다. 또한 포스팅에서는 윈도우 환경에서 npm으로 Firebase CLI를 설치한 후 진행하였다. 플러터파이어 CLI를 설치하려면 반드시 파이어베이스 CLI가 설치되어 있어야 한다. 만약 설치 되어 있지 않다면 아래의 포스팅을 확인하여 먼저 기본 환경을 구성하자. Firebase - 처음 시작하기, 프로젝트 생성하기, Firebase CLI 설치하기 Firebase - 처음 시작하기, 프로젝트 생성하기, Firebase CLI 설치하기..

• format_list_bulleted Mobile/Flutter
• · 2024. 1. 10.
• textsms