Flutter - Scroll Controller 사용 방법, 스크롤 특정 위치로 이동하기, 샘플 코드

개요 Scroll Controller(스크롤 컨트롤러)를 이용하여 스크롤의 특정 위치로 이동하는 방법을 알아보자. 포스텅에서 설명하는 스크롤 컨트롤러는 위치 조정에 대한 메서드와 속성을 다룬다. 포스팅에서 다루는 프로젝트는 깃허브에서 다운 받을 수 있다. https://github.com/luvris2/flutter-example 하위 디렉토리 : flutter_scroll_controller_example GitHub - luvris2/flutter-example Contribute to luvris2/flutter-example development by creating an account on GitHub. github.com Scroll Controller 설명 및 정의 스크롤 컨트롤러는 스크롤 ..

• format_list_bulleted Mobile/Flutter
• · 2024. 3. 19.
• textsms

Flutter/Dart - 채팅 앱 만들기(1) - 다트로 웹 소켓 서버/클라이언트 만들기 (WebSocket)

개요 기존에 Flask를 활용하여 실시간 채팅 기능을 설명 및 구현한 포스팅을 작성한 적이 있다. 관련 링크 : Python Flask - 실시간 채팅 기능 구현하기 (양방향 소켓 통신, FlaskSocketIO) 이 기능을 이용하여 사내에서 간단히 직원들끼리 사용할 채팅 프로그램을 만들었었는데, 이번에는 조금 더 욕심을 부려서 다양한 플랫폼에서도 사용할 수 있도록 Flutter로도 다시 재구현해 보고자 이 포스팅을 작성하게 되었다. 관련 내용들을 찾아보니 대부분이 NodeJs나 각각의 WebSocket서버를 구축하고 사용하는 것 같더라. Dart언어를 사용하는 Flutter인 만큼, 이번 포스팅에서는 Dart를 이용하여 웹 소켓 서버를 구축해보고자 한다. 또한 웹 소켓 서버 구축에 대한 각각의 메서드 ..

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

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