뉴스 앱을 만들다 보면, “더 보기” 버튼 없이 계속 내려가면 새로운 뉴스가 자동으로 나오는 UI를 구현하고 싶어진다.이런 기능을 흔히 무한 스크롤 (Infinite Scroll)이라고 부른다.이번 글에서는 Flutter에서 ScrollController를 사용해 무한 스크롤을 구현하는 방법을 실제 코드와 함께 정리해본다.🔁 무한 스크롤 동작 방식 요약스크롤을 감지해서 리스트 끝에 도달했는지 확인다음 페이지 데이터를 요청하고 리스트에 추가로딩 중에는 중복 요청 방지이 3가지가 핵심이다. 이제 코드를 보면서 차근차근 구현해보자.🧱 ScrollController 기본 셋업class NewsFeedScreen extends StatefulWidget { @override State createState..

뉴스 앱을 만들 때, 데이터를 어디선가 불러와야 한다.그 어디선가는 보통 API 서버이고, 데이터를 JSON 형태로 내려준다.그리고 Flutter에서는 http 패키지로 이 JSON 데이터를 가져와서 보여줄 수 있다.이 글에서는 http 패키지를 사용하는 방법부터, JSON 파싱, 모델 클래스 구성까지 실전 예제로 정리해본다.📦 http 패키지 설치하기// pubspec.yamldependencies: http: ^0.13.5설치 후에는 반드시 flutter pub get을 해줘야 한다.🌐 예시 API 호출해보기import 'package:http/http.dart' as http;import 'dart:convert';Future fetchNews() async { final response =..

뉴스 앱을 만들다 보면 반드시 부딪히는 고민이 있다.“뉴스 목록을 카드형으로 보여줄까, 리스트형으로 보여줄까?”보기에는 카드형이 감성 있고 예쁜데, 리스트형은 뭔가 더 깔끔하고 정보 전달이 빠르다.이 글에서는 두 UI 패턴의 특징과 선택 기준을 비교해보려 한다.🃏 카드형 UI란?카드형 UI는 각 콘텐츠를 독립된 카드 형태로 표현하는 디자인이다.이미지, 제목, 날짜 등을 하나의 카드로 묶어 콘텐츠를 시각적으로 구분해준다.장점디자인적으로 감각적이고 현대적터치 대상이 넓어 모바일 UX에 좋음정보를 묶어서 보여줄 수 있어 시선 집중 유도단점스크롤 시 효율성 낮음 (동시에 많이 못 보여줌)컨텐츠 간 시각적 연속성이 떨어짐데이터가 많을 경우 로딩 속도, 배터리 영향 큼📄 리스트형 UI란?리스트형 UI는 콘텐츠를..

Flutter 프로젝트를 처음 시작하면, 보통은 lib/main.dart 하나로 모든 걸 처리한다.하지만 프로젝트가 커질수록 디렉토리는 복잡해지고, 유지보수는 악몽이 된다.이번 글에서는 기능 기반 분리와 폴더 구조 설계 전략을 통해,확장 가능한 Flutter 앱의 구조를 어떻게 잡아야 할지 정리해보려 한다.🧱 기본 구조 vs 기능 기반 구조📦 기본 구조 (초기 템플릿)lib/├── main.dart├── screens/├── widgets/작은 앱에선 이 구조도 충분하다. 하지만 기능이 많아질수록 화면/위젯 분류만으로는 한계가 온다.📦 기능 기반 구조lib/├── main.dart├── core/ # 공통 유틸, 상수, 테마 등├── services/ # API, Fireb..

Flutter를 처음 접했을 때 가장 설렜던 한 마디."한 번의 코드로 iOS, Android, Web, Desktop까지!"마치 마법 같았고, 실제로도 그렇게 돌아갔다.하지만 실전에서 마주한 건 기대 이상의 현실의 벽이었다.이 글에서는 Web과 Desktop 플랫폼 대응을 어떻게 접근해야 하는지,Flutter의 가능성과 한계를 중심으로 이야기해본다.🌍 Flutter Web — 모바일 감성 그대로 웹으로?Flutter Web은 모바일에서 만든 UI를 그대로 웹에서도 보여줄 수 있다는 장점이 있다.하지만 브라우저의 특성과 Flutter의 CanvasKit 구조 때문에 제한사항도 많다.✅ 장점모바일 앱 UI 그대로 가져올 수 있음빠른 프로토타입 공유 및 데모 배포에 유용Firebase Hosting, Gi..

Flutter 앱을 개발하다 보면 어느 순간 앱이 무거워졌다고 느끼는 때가 있다.버튼 반응이 느려지거나, 스크롤이 버벅거리거나, 디바이스가 뜨거워지는 현상까지...이럴 땐 단순히 기능 추가가 아니라, 성능 최적화가 필요하다.이 글에서는 빌드 최적화와 오버렌더링 탐지를 중심으로 Flutter 성능을 올리는 팁을 정리해본다.⚙️ Build 최적화 — 최소한만 다시 그리기Flutter는 위젯 트리에서 변경이 생기면 해당 위젯과 자식 위젯을 다시 빌드한다.하지만 이게 불필요하게 많아지면, 성능은 곤두박질친다.✅ const 키워드 활용하기위젯이 절대 바뀌지 않는다면 const로 선언해두면Flutter가 이를 캐싱해 다시 빌드하지 않는다.const Text('고정된 텍스트'); // good!Text('바뀌지 않..