전체 글823 08. 실시간 데이터를 UI에 반영하는 StreamBuilder 알아보기 오늘 배울 것오늘은 StreamBuilder의 개념과 FutureBuilder와의 차이점. 그리고 StreamBuilder의 기본 구조와 각 속성의 의미에 대해 알아보겠습니다. 마지막으로 타이머 예제를 통한 실시간 데이터 UI 갱신을 직접 실습해보겠습니다. StreamBuilder란?StreamBuilder는 지속적으로 변하는 데이터를 실시간으로 UI에 반영할 수 있게 해주는 비동기 위젯입니다. FutureBuilder가 "한 번 받아오는 비동기 데이터"에 적합하다면 StreamBuilder는 "여러 번 지속적으로 들어오는 데이터" 에 적합합니다. 예를 들어, 실시간 채팅 앱이나 센서 데이터, 데이터 스트림과 같은 실시간 데이터 처리에 사용할 수 있습니다. FutureBuilder vs Stre.. 2025. 5. 9. 07. 비동기 상태에 따라 UI를 바꾸는 FutureBuilder 알아보기 오늘 배울 것FutureBuilder 와 일반 Builder 와의 차이점을 비교하고 FutureBuilder 의 목적과 언제 사용하면 좋은지 알아봅니다. FutureBuilder 란?FutureBuilder 는 Future 타입의 비동기 작업을 감지해서 '결과값이 오기 전', '도착했을 때', '에러가 났을 때' 각각의 상태에 따라 다른 위젯을 보여줄 수 있게 해주는 빌더입니다. 비동기 작업 결과를 기다렸다가 화면에 반영해야 할 때 유용하게 사용할 수 있습니다. 일반 Builder 와 차이점일반 BuilderFutureBuilder이미 가지고 있는 데이터로 빌드비동기 데이터가 '나중에' 올 때까지 기다렸다가 빌드동기적 데이터 기반비동기 (Future) 기반반복적인 UI 생성비동기 작업의 상태에 따.. 2025. 5. 8. 06. Flutter 비동기 처리 Future, async/await 알아보기 오늘 배울 것오늘은 Flutter 프로그래밍에서 중요한 개념인 동기와 비동기에 대해 공부하고 Future, async/await의 개념과 사용법을 알아보겠습니다. 동기(Synchronous) vs 비동기(Asynchronous)쉽게 비유적으로 설명해 보자면 동기는 줄 서서 일을 처리하는 것이고, 비동기는 맡겨두고 다른 일 먼저 하고 오는 것입니다. 동기와 비동기를 표로 정리하면 다음과 같습니다. 동기비동기한 번에 하나씩 처리동시에 여러 일 가능앞 작업이 끝나야 다음 일로 넘어감기다리는 동안 다른 일 가능예: ATM에서 돈 뽑기예: 배달 주문하고 다른 일 하기 동기의 장점은 흐름이 예측 가능하다는 것입니다. 코드가 작성된 순서대로 차례차례 실행되기 때문에 디버깅이나 버그를 찾기도 쉽습니다. 동기.. 2025. 5. 7. 05. Flutter Navigator로 화면 이동하는 방법 오늘 배울 것오늘은 Flutter 에서 기본 제공하는 Navigator를 사용해 화면 간 이동 방법에 대해서 배워보겠습니다. 홈 → 입력 → 리스트 화면을 오가면서 Navigator 메서드(함수) push, pop, pushReplacement, popUntil 을 익혀봅시다. Navigator 메서드 요약표먼저 Navigator의 각 메서드에 대한 설명을 간략히 표로 정리하였습니다. 이를 바탕으로 실습을 진행하겠습니다.메서드설명뒤로가기사용 예push()새 화면 추가ONavigator.push(context, MaterialPageRoute(...))pop()현재 화면 제거-Navigator.pop(context)pushReplacement()현재 화면을 새로운 화면으로 교체❌Navigator.pus.. 2025. 5. 6. 04. Flutter 에서 자주 사용하는 레이아웃 위젯 오늘 배울 것Flutter로 UI 화면을 구현할 때 자주 사용하는 레이아웃 위젯들을 하나하나 소개하고 직접 실습할 수 있는 코드를 제공해드리겠습니다. 오늘 배우는 레이아웃 위젯은 다음과 같습니다. 1. Column2. Row3. Container4. Stack5. Expanded 6. Padding7. SizedBox 1. Column (세로 정렬)Column은 자식 위젯들을 세로로 나열할 때 사용합니다.Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text('첫 번째'), Text('두 번째'), Text('세 번째'), .. 2025. 5. 3. 03. 위젯 트리 구조, DevTools 로 Widget Tree 보는 방법 오늘 배울 것모든 Flutter 화면은 build() 함수 안에서 위젯 트리(Tree) 구조로 만들어집니다. 이 구조를 이해해야 화면 UI를 구성하고 그리기가 수월합니다. 오늘은 실습을 통해 위젯 트리 구조에 대해 배우고 DevTools 로 Widget Tree 보는 방법을 알아보겠습니다. 위젯 트리 구조 시각화하기화면에 텍스트, 버튼, 박스 등을 여러 개 중첩시켜서 위젯 트리가 어떻게 쌓이는지 직접 확인해 보겠습니다. 아래 코드를 main.dart에 붙여 넣고 앱을 실행해 주세요.import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const My.. 2025. 5. 2. 이전 1 2 3 4 ··· 138 다음
