📖 [Flutter 개발일지] 독서 기록 앱 만들기 - 노트 기능 구현공통 컴포넌트와 Riverpod 상태 관리로 메모 작성/조회 기능 효율적으로 개발하기1. 공통 컴포넌트 NoteBookInfo로 코드 재사용하기공통 컴포넌트 목적 글쓰기 페이지와 글보기 페이지에서 책 정보를 표시하는 UI가 필요할 때, (리팩토링 전) 중복된 코드는 유지보수가 어려워지고 코드도 지저분해져서 간결화 필요.NoteBookInfo라는 공통 컴포넌트를 만들어서 한 번만 UI를 작성하고, 필요한 곳에서 재사용할 수 있도록 함. 코드가 깔끔해지고, 유지보수도 쉬워짐NoteBookInfoNoteBookInfo 위젯은 책 정보(제목, 저자, 이미지)를 표시하는 역할책 추가/변경/삭제 버튼도 이 위젯에서 관리상황동작Note 추가한 책..

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로 간단한 로그인 앱을 만들어보겠습니다. 로그인 앱은 기본적인 레이아웃 설계와 폼 처리를 배우기에 좋은 예제입니다. 이번 포스팅에서는 작성된 코드와 함께 쓰인 Flutter의 주요 개념을 알아보겠습니다.1. 프로젝트 구조와 주요 파일main.dart: 앱의 진입점이며, 테마와 라우트를 정의합니다.LoginPage: 로그인 화면.HomePage: 로그인 후 이동할 메인 화면.CustomForm: 로그인 폼 컴포넌트.CustomTextFormField: 재사용 가능한 텍스트 필드 위젯.Logo: 로고를 보여주는 컴포넌트.size.dart: 여백과 크기 관련 상수를 정의한 파일.2. main.dart앱의 진입점에서 MaterialApp 위젯을 사용해 테마와 라우트를 설정합니다.import 'pac..

이번 포스팅은 Flutter Day 5-3와 이어지는 글로 프로필 앱을 완성해보겠습니다.ProfileHeader, ProfileCountInfo, ProfileButtons, ProfileTab와 같이 컴포넌트를 분리하고,반복되는 UI 요소를 공통 함수로 만들어 활용하는 방법에 대해 다룹니다.공통 함수 분리Flutter에서는 반복되는 코드를 함수로 분리하면 유지보수성과 재사용성이 높아집니다.이번 프로필 앱에서는 _buildInfo, _buildCountInfo와 같은 함수들을 재사용 가능한 형태로 리팩토링할 수 있습니다.ProfileCountInfo게시글 수, 좋아요 수, 공유 수를 보여주는 컴포넌트입니다.Row와 Column을 조합해서 간단히 구성할 수 있지만, 각 정보를 빌드하는 로직을 함수로 분리해..