특정 노트에 연결된 책(Book) 정보가 화면에 표시되지 않는 문제를 발견했다. 처음에는 단순한 UI 버그라고 생각했지만, 문제의 원인은 백엔드 데이터 반환 방식과 위젯 상태 관리의 차이에 있었다. 이번 글에서는 이 문제를 어떻게 해결했는지 트러블슈팅 과정을 정리해보았다.1. 문제 상황노트에는 bookId가 포함되어 있지만, 화면에서 책 정보가 표시되지 않음bookId를 기반으로 책 정보를 가져와야 하지만, UI에서 아무것도 렌더링되지 않음특정 노트를 선택해도 bookList(책 목록)에서 해당 bookId를 찾지 못하는 경우가 발생2. 원인 분석1) bookId가 존재해도 UI가 업데이트되지 않음bookId가 null이 아니면 _getBookById()를 호출하여 책 정보를 가져오도록 구현했음하지만 _..

Flutter에서 로그인 기능을 구현하려면, 먼저 프로젝트를 설정하고 기본적인 UI를 만들어야 합니다.이 글에서는 프로젝트 설정 → 기본 UI 구성 → 로그인 화면 구현 → 입력값 검증 → UI 디테일 보완까지 차근차근 정리해보겠습니다. 1. 프로젝트 기본 설정Flutter 프로젝트에서 사용할 필수 패키지를 추가합니다.pubspec.yaml 수정 dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.8 flutter_svg: ^2.0.6 intl: ^0.18.1 dio: ^5.2.0 # 서버와 통신하는 HTTP 클라이언트 flutter_riverpod: ^2.3.6 # 상태 관리를 위한 Riverpod logger: ^1.3.0 # 콘솔..

1. 기본 흐름데이터 모델링앱에서 다룰 데이터를 정의하고 샘플 데이터를 생성합니다.class를 사용해 데이터를 체계적으로 관리합니다.UI 위젯 설계StatelessWidget: 변경되지 않는 고정 UI를 설계.StatefulWidget: 사용자 상호작용에 따라 변경되는 UI를 설계.반복적인 UI 생성리스트 데이터를 사용해 동적으로 UI를 생성합니다.ListView.builder 또는 List.generate를 활용.페이지 전환 및 네비게이션 구현Navigator 또는 BottomNavigationBar로 화면 이동을 관리.2. 주요 개념 설명2.1 List.generate: 반복 UI 생성Flutter에서 동일한 구조의 UI를 반복적으로 생성해야 할 때 사용하는 방법입니다.주요 특징정적 데이터 반복 생성..

Flutter를 활용한 어플 개발은 UI 컴포넌트 생성, 데이터 모델링, 화면 간 이동 및 상태 관리를 포함한 여러 단계를 거칩니다. 이번 글에서는 기본적인 Flutter 개념과 함께 간단한 당근마켓 UI 구현 과정을 따라가 보겠습니다.1단계: Flutter 프로젝트 설정 및 테마 구성프로젝트 생성Flutter CLI로 프로젝트를 생성하고, 필요한 패키지를 추가합니다.flutter create carrot_market_uicd carrot_market_uiflutter pub add google_fonts intlgoogle_fonts: 구글 폰트를 활용해 텍스트 스타일을 꾸밈.intl: 숫자 포맷, 날짜 처리를 지원.테마 파일 작성Flutter 앱의 스타일을 통일하기 위해 테마 설정을 추가합니다.the..

Flutter로 간단하지만 세련된 프로필 앱을 만들어 보겠습니다.이번 포스팅에서는 테마 설정, 메인 페이지 구조, 프로필 헤더 디자인 등을 다룹니다. 1. 테마 설정하기테마 설정의 중요성Flutter에서 테마(Theme)는 앱의 색상, 글꼴, 스타일 등을 한 곳에서 관리할 수 있는 기능입니다.테마를 설정하면 디자인 일관성을 유지하고, 수정이 필요할 때 여러 파일을 변경할 필요 없이 테마만 수정하면 됩니다.테마 파일: theme.dart우선 테마를 정의하는 theme.dart 파일을 만듭니다. 협업 시 디자이너가 제공한 컬러 팔레트를 기반으로 작성하는 경우가 많습니다.import 'package:flutter/material.dart';const MaterialColor primaryWhite = Mate..