Flutter/Dart - 채팅 앱 만들기(4) - 앱에서 소켓 서버와 통신하여 채팅 기능 구현하기

개요 웹 소켓 서버에 대한 기능은 이전 포스팅으로 분리하였으므로, 이번에는 채팅 앱 클라이언트에서 웹 소켓 서버와 통신하고 실제로 실시간 채팅이 이루어지는 기능을 상호작용할 수 있도록 해보자. [ 시리즈 포스팅 내용 보기 ] Flutter/Dart - 채팅 앱 만들기(1) - 다트로 웹 소켓 서버/클라이언트 만들기 (WebSocket) Flutter/Dart - 채팅 앱 만들기(2) - 앱 UI 레이아웃 디자인 및 기능 설계하기 Flutter/Dart - 채팅 앱 만들기(3) - 다트 웹 소켓 서버 기능 구현하기 Flutter/Dart - 채팅 앱 만들기(4) - 앱에서 소켓 서버와 통신하여 채팅 기능 구현하기 이번 포스팅에서는 아래와 같은 내용을 다룬다. 클라이언트에서 메시지를 보내는 방법 단순히 모든..

• format_list_bulleted Mobile/Flutter
• · 2024. 4. 23.
• textsms

Flutter/Dart - 채팅 앱 만들기(3) - 다트 웹 소켓 서버 기능 구현하기

개요이전 포스팅에서 다뤘던 기능들과 플러터 앱의 UI를 결합하여,이번에는 웹소켓 서버와 통신 하여 실제 실시간 채팅이 이루어지도록 기능을 구현해보자.웹소켓과 채팅 기능의 이해를 돕기 위해 최대한의 최대한... 간소화 하였다.UUID와 Shared Preference를 활용한 조금 더 정밀한 개인 메시지 전송 방법을 설명하려했지만,그러면 포스팅의 내용이 너무 길어지고 복잡해질꺼 같아서 전부 다 뺐다.프로젝트를 간단히 초기 설정된 닉네임으로만 통하여 메시지를 보내도록 수정하였다.때문에 같은 닉네임을 사용한다면 사실상 1:1 개인 메시지의 기능이 아니게 되는 허점이 존재하지만 이해하길 바란다.(이 기능을 잘 활용하면 특정 방에 접속한 유저들끼리 나눌 수 있는 '채팅방' 형태의 기능을 구현할 수도..

• format_list_bulleted Mobile/Flutter
• · 2024. 4. 18.
• textsms

Flutter - 포커스 제어하기 (텍스트필드 키보드 올리기/내리기, 포커스 감지, 포커스 상태 확인하기) (FocusManager/FocusNode)

개요 이번 포스팅에서는 포커스를 다룬다. 포스팅의 주요 목적은 1) 애플리케이션 내에서 입력 상자에 대한 포커스의 상태를 확인한다. 2) 텍스트필드 입력 상태를 다른 영역을 터치하여 입력 상태를 끝내 올라오는 키보드를 없앤다. 3) 조건에 의해 텍스트필드에 입력 상태로 이동한다. * 텍스트필드로 이동된 상태에는 포커스가 활성화되고 키보드가 노출된다. [ 소스 코드 다운로드 ] 포스팅에서 설명하는 프로젝트는 깃허브에서 다운로드할 수 있다. https://github.com/luvris2/flutter-example 하위 디렉토리 :flutter_focus_example 간단 요구사항 1. 텍스트 입력 기능 사용자는 애플리케이션 내에서 텍스트의 내용을 입력할 수 있어야 한다. 2. 입력 키보드 제거 텍스트 ..

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

Flutter/Dart - 채팅 앱 만들기(2) - 앱 UI 레이아웃 디자인 및 기능 설계하기

개요 애플리케이션을 채팅 형태의 UI를 구성하고, 사용자와 상호작용하여 기능을 수행할 수 있도록 기본 뼈대를 만드는 것을 목표로 한다. [ 시리즈 포스팅 내용 보기 ] Flutter/Dart - 채팅 앱 만들기(1) - 다트로 웹 소켓 서버/클라이언트 만들기 (WebSocket) Flutter/Dart - 채팅 앱 만들기(2) - 앱 UI 레이아웃 디자인 및 기능 설계하기 Flutter/Dart - 채팅 앱 만들기(3) - 다트 웹 소켓 서버 기능 구현하기 Flutter/Dart - 채팅 앱 만들기(4) - 앱에서 소켓 서버와 통신하여 채팅 기능 구현하기 이번 포스팅에서는 소켓을 다루지 않는다. 하지만 채팅 앱을 구성하려면 사용자와 상호작용하는 UI가 필수적으로 필요하다. 때문에 소켓 서버에서의 송수신되..

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

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