subindev 님의 블로그

채팅 UI를 구현할 때 고려해야 할 세세한 부분들이 많습니다. 우리는 하루에도 몇십 번씩 사용하는 채팅 앱을 만들기 위해서는 당연하다고 느껴질 수 있는 세부 사항들을 고려하고, 사용자 경험(UX)을 고려하여 고품질의 채팅 기능을 구현해야 합니다.이 포스팅에서는 WhatsApp, 카카오톡, 그리고 라인과 같은 대표적인 채팅 앱에서 적용되는 UI 인터랙션 로직을 적용한 채팅 앱을 개발하는 방법에 대해 설명합니다.기본적인 구조 (뼈대)먼저, 채팅 스크린의 기본 구조를 살펴봅시다. Scaffold( appBar: AppBar( title: const Text("Chat"), backgroundColor: const Color(0xFF007AFF), ), // 일반..

Dart 비동기 프로그래밍 정리학습 목표Dart 비동기 프로그래밍의 개념 이해Future 타입에 대한 이해Future 타입과 Future.delayed 함수 사용 실습1. Dart 비동기 프로그래밍이란?동기성 (Synchronous)코드가 순차적으로 진행됩니다.이전 작업이 끝나야 다음 작업을 시작할 수 있습니다.예: 파일 읽기 작업 완료 후에야 다음 코드 실행.비동기성 (Asynchronous)코드가 동시다발적으로 실행됩니다.작업 순서를 보장하지 않으며, 기다리는 동안 다른 작업을 수행합니다.Dart는 Future 타입을 사용해 비동기 작업을 처리합니다.2. Future 타입이란?Future 객체: 미래에 값이나 오류를 반환할 것을 약속하는 데이터 타입입니다.비동기 작업을 쉽게 처리하기 위해 async와..

1단계 - 기본 구조 작성개념부모-자식 위젯 구조를 이해합니다.부모는 상태(state)를 관리하며, 자식은 단순히 UI 요소로 동작합니다.코드 설명부모 위젯 ParentsView는 StatefulWidget으로 선언되어, 상태를 관리합니다.자식 위젯 ChildA, ChildB는 StatelessWidget으로 선언되어, 상태 없이 UI만 표시합니다.InkWell 위젯을 통해 클릭 이벤트를 감지합니다.부모는 displayText라는 상태 변수에 따라 화면에 메시지를 출력합니다.import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { const MyApp({super.k..

버전이 뭔가 안맞을 경우 문제가 생길 수 있음 아래의 그림과 같이 버전을 변경한 후     아래의 명령어로 clean 한 후 다시 pub get을 하고 다시 실행해보면 적용이 완료!flutter clean flutter pub get 출처: https://codejinjinh.tistory.com/304 [CodeJin:티스토리]

Stack 위젯 Stack 위젯은 Flutter에서 여러 자식 위젯을 겹치게 배치할 수 있게 해주는 컨테이너 위젯입니다 Stack 내의 모든 자식은 오버레이 구조로 배열되어, 리스트의 앞쪽에 있는 위젯이 아래쪽에 위치하게 됩니다. Stack 위젯은 주로 위젯들 간의 위치를 상대적으로 정의할 때 사용됩니다.Stack 위젯과 alignment 속성의 사용import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return ..

ListView_GridView_PageView Test CodeListView 사용법과 주요 속성ListView는 여러 항목을 세로로 나열할 때 사용하는 가장 일반적인 스크롤 가능한 위젯입니다. 주로 다음과 같은 방식으로 사용됩니다: 1. 일반적인 ListView 사용 (적은 데이터)children을 명시적으로 전달하는 방식으로, 항목이 적을 때 유용합니다ListView( children: [ ListTile( leading: CircleAvatar( backgroundColor: Colors.amber, child: Text('1'), ), title: Text('item1'), subtitle: Text('item sub...'),..