티스토리

leem Achive
검색하기

블로그 홈

leem Achive

rxxm.tistory.com/m

Dev Notes

구독자
4
방명록 방문하기

주요 글 목록

  • [Flutter 개발일지] 노트 화면에서 책 정보가 표시되지 않는 문제 해결 특정 노트에 연결된 책(Book) 정보가 화면에 표시되지 않는 문제를 발견했다. 처음에는 단순한 UI 버그라고 생각했지만, 문제의 원인은 백엔드 데이터 반환 방식과 위젯 상태 관리의 차이에 있었다. 이번 글에서는 이 문제를 어떻게 해결했는지 트러블슈팅 과정을 정리해보았다.1. 문제 상황노트에는 bookId가 포함되어 있지만, 화면에서 책 정보가 표시되지 않음bookId를 기반으로 책 정보를 가져와야 하지만, UI에서 아무것도 렌더링되지 않음특정 노트를 선택해도 bookList(책 목록)에서 해당 bookId를 찾지 못하는 경우가 발생2. 원인 분석1) bookId가 존재해도 UI가 업데이트되지 않음bookId가 null이 아니면 _getBookById()를 호출하여 책 정보를 가져오도록 구현했음하지만 _.. 공감수 0 댓글수 0 2025. 3. 5.
  • [Flutter 개발일지] Riverpod 리팩토링: StateNotifier 통합 적용 Flutter에서 Riverpod를 활용해 노트 작성, 수정, 삭제 등의 기능을 구현할 때, 여러 가지 방식이 혼용되면 유지보수가 어려워질 수 있다. 이번에 노트 관련 ViewModel을 통일하고, StateNotifier 기반으로 관리하는 방식으로 리팩토링했다. 이 글에서는 기존 코드의 문제점, 변경 사항, 흐름을 정리해본다.기존 코드의 문제점1. 비일관적인 상태 관리노트 목록 → StateNotifierProvider노트 상세 → FutureProvider.autoDispose.family노트 작성 → StateNotifierProvider 없이 직접 호출🔥 문제점:같은 기능을 다르게 관리하니 유지보수가 어려움FutureProvider는 한 번만 호출되고 상태 변경을 감지하지 않음 → UI 업데이트.. 공감수 0 댓글수 0 2025. 3. 5.
  • [Flutter 개발일지] 노트 저장 후 목록이 반영되지 않는 문제 해결 이번 개발 과정에서 노트 작성 후 목록이 갱신되지 않는 문제를 해결하기 위해 Riverpod 상태 관리 방식을 통일하고,fetchNotes() 호출 로직을 명확하게 정리했다. 이 과정에서 발생한 문제, 원인 분석, 해결 과정, 그리고 최종 적용한 코드까지 정리해본다. 1. 문제 상황노트 작성 후 목록이 갱신되지 않음fetchNotes()가 실행되지 않거나, 실행되었어도 UI에 반영되지 않음fetchNotes() 실행 여부를 확인하기 위해 로그를 추가했으나, 실행되지 않음2. 원인 분석1) fetchNotes()가 실행되지 않음initState()에서 fetchNotes(userId)가 한 번만 실행됨새로운 노트를 작성해도 fetchNotes()가 다시 실행되지 않음2) _handleNoteCompleti.. 공감수 0 댓글수 0 2025. 3. 5.
  • Flutter Day 17: 블로그 만들기 - AutoDisposeNotifier 활용 게시글 목록, 상세보기 화면 구현 이번 포스팅에서는 게시글 목록 화면과 상세보기 화면을 만들면서 자동 갱신 기능을 구현해보겠습니다.📌 게시글 목록 (PostListPage)- 데이터 로드, 무한 스크롤 & 새로고침 기능, 새로운 게시글 추가 시 자동 갱신📌 게시글 상세보기 (PostDetailPage)- 게시글 데이터 표시, 삭제 & 수정 기능, 삭제 시 자동 갱신기술설명Riverpod 상태 관리NotifierProvider, AutoDisposeNotifier 사용pull_to_refresh 패키지무한 스크롤 & 새로고침 기능 구현Navigator.push()상세 페이지로 이동 (PostDetailPage)ref.listen() 활용게시글 추가/삭제 시 자동으로 목록을 갱신 1. 데이터 모델 정의게시글과 관련된 데이터를 다루기 위해.. 공감수 2 댓글수 0 2025. 2. 13.
  • Flutter Day 16: 블로그 만들기 - pull_to_refresh 라이브러리를 사용한 게시글 목록 1. pull_to_refresh 라이브러리pull_to_refresh는 Flutter에서 리스트뷰를 새로고침하거나 무한 스크롤을 구현할 때 사용하는 라이브러리입니다.이를 활용하면 사용자가 화면을 아래로 당기거나 끝까지 스크롤했을 때 데이터를 자동으로 갱신할 수 있습니다. Flutter 프로젝트의 pubspec.yaml 파일에 다음을 추가하고, 임포트 하기dependencies: pull_to_refresh: ^2.0.0import 'package:pull_to_refresh/pull_to_refresh.dart';​2. pull_to_refresh를 활용한 새로고침 및 무한스크롤 구현이제 실제로 게시글 목록을 불러오는 PostListBodyTemp 위젯을 만들어봅니다.사용자가 아래로 당기면(onRef.. 공감수 2 댓글수 0 2025. 2. 7.
  • Flutter Day 16: 블로그 만들기 - PostRepository, PostListPage 만들어보기 Flutter 앱에서 게시글을 관리하기 위해 PostRepository를 만들고, 이를 활용한 PostListPage를 구현하는 과정에 대해 다룹니다. 또한, 사용자 로그인 및 로그아웃 처리를 위한 CustomDrawer까지 설명합니다.1. PostRepository 구현하기게시글 데이터를 서버와 연동하기 위해 PostRepository를 작성합니다.이를 통해 게시글 조회, 생성, 수정, 삭제 등의 기능을 제공합니다.PostRepository의 역할게시글 목록 조회 (findAll)→ 페이지 번호를 입력받아 해당 페이지의 게시글을 서버에서 가져옵니다.게시글 상세 조회 (findById)→ 특정 게시글의 ID를 이용해 상세 정보를 가져옵니다.게시글 삭제 (delete)→ 특정 ID를 가진 게시글을 삭제합니.. 공감수 1 댓글수 0 2025. 2. 7.
  • [Flutter 개발일지] 독서 노트 작성, Riverpod와 공통 다이얼로그로 관리하기 📖 [Flutter 개발일지] 독서 기록 앱 만들기 - 노트 기능 구현공통 컴포넌트와 Riverpod 상태 관리로 메모 작성/조회 기능 효율적으로 개발하기1. 공통 컴포넌트 NoteBookInfo로 코드 재사용하기공통 컴포넌트 목적 글쓰기 페이지와 글보기 페이지에서 책 정보를 표시하는 UI가 필요할 때, (리팩토링 전) 중복된 코드는 유지보수가 어려워지고 코드도 지저분해져서 간결화 필요.NoteBookInfo라는 공통 컴포넌트를 만들어서 한 번만 UI를 작성하고, 필요한 곳에서 재사용할 수 있도록 함. 코드가 깔끔해지고, 유지보수도 쉬워짐NoteBookInfoNoteBookInfo 위젯은 책 정보(제목, 저자, 이미지)를 표시하는 역할책 추가/변경/삭제 버튼도 이 위젯에서 관리상황동작Note 추가한 책.. 공감수 1 댓글수 0 2025. 2. 4.
  • Flutter Day 15: 블로그 만들기 - Dio를 활용 로그인 시스템 Flutter에서 Dio를 활용하여 로그인 시스템을 구축하는 방법을 정리해봤습니다.로그인 기능을 구현할 때, JWT 기반 인증, 자동 로그인 유지, 상태 관리(ViewModel) 등을 함께 다루면 더욱 완성도가 높아집니다. 이번 글에서는 로그인 시스템 전체 흐름과 Dio + Riverpod을 활용한 구현 방법을 차근차근 알아보겠습니다. 💡 로그인 시스템의 흐름로그인은 단순해 보이지만, 내부적으로 다음과 같은 과정을 거칩니다.1️⃣ 사용자가 아이디와 비밀번호 입력 후 로그인 버튼 클릭2️⃣ Dio를 사용하여 서버에 로그인 요청 (username, password 전송)3️⃣ 서버가 로그인 성공 시 JWT 토큰 발급4️⃣ Dio가 서버 응답(JWT 토큰, 사용자 정보) 수신5️⃣ FlutterSecureS.. 공감수 1 댓글수 0 2025. 2. 3.
  • Flutter Day 14: 블로그 만들기 - 프로젝트 기본 설정, 로그인 UI 구성 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 댓글수 0 2025. 1. 31.
  • Flutter Day 13: Riverpod 2.xx로 배우는 MVVM 패턴과 상태관리 1. MVVM 패턴Model: 데이터를 정의하는 곳이에요. (TodoItem)ViewModel: 비즈니스 로직과 데이터를 관리하는 중간 관리자에요. (TodoListViewModel)View: 사용자와 상호작용하는 화면(UI)이에요. (TodoListView)MVVM의 핵심은 View와 Model이 직접 연결되지 않고 ViewModel을 통해서만 통신한다는 점코드가 깔끔하고 유지보수하기 쉬움데이터와 UI가 분리되니까 테스트하기 좋음2. ProviderProvider는 앱에서 데이터를 공유하거나 관리하는 역할을 해요. Flutter 앱에서는 데이터(상태)를 여러 위젯에서 공유해야 할 때가 많은데, Provider는 이런 데이터 공유와 관리를 편리하게 만들어주는 도구입니다.Provider의 장점데이터를 안전.. 공감수 2 댓글수 0 2025. 1. 23.
  • Flutter Day 12: MVVM TodoList 만들기 Flutter에서 MVVM(Model-View-ViewModel) 패턴을 사용하면 코드의 유지보수성과 테스트 용이성이 크게 향상됩니다. 이번 글에서는 MVVM 개념부터 실제 구현까지 단계별로, 이해를 돕기 위해 Todo 리스트 예제를 중심으로 설명드리겠습니다. 앱 아키텍처앱 아키텍처는 애플리케이션의 구조와 구성 요소 간의 상호작용을 정의하는 설계 방법론입니다. 쉽게 말해, 코드의 역할을 명확히 나누고 정리된 방식으로 구현하는 것입니다.앱 아키텍처의 핵심 목표역할 분리: 각 컴포넌트가 자신의 역할에만 집중하도록 설계유지보수 용이성: 코드 수정이나 기능 추가가 간편확장성: 프로젝트가 커져도 쉽게 관리 가능MVC vs MVVM 비교  항목 MVC MVVM구조Model, View, ControllerModel,.. 공감수 1 댓글수 0 2025. 1. 22.
  • Flutter Day 11: Riverpod으로 배우는 상태관리 RiverpodRiverpod은 Flutter에서 상태를 관리하기 위한 강력하고 유연한 라이브러리입니다.앱에서 데이터를 공유하고, 상태를 변경하거나 구독(상태 변경 알림)을 처리하는 데 사용됩니다.Riverpod의 목적효율적인 상태관리앱에서 데이터를 여러 위젯에서 쉽게 공유하고 관리.의존성 관리특정 데이터가 필요한 위젯에만 정확히 데이터를 제공.안정성과 테스트 용이성Riverpod은 앱 상태를 독립적으로 관리해 테스트와 유지보수가 쉬움.왜 사용할까?구독과 변경 알림이 쉬움상태가 바뀌면 구독한 위젯에 자동으로 알림이 감.👉 내가 바뀐 데이터만 업데이트하니까 효율적!글로벌 상태도 안전하게 관리 가능앱 어디서든 필요한 데이터를 쉽게 접근하고 관리할 수 있습니다.기존 Provider보다 업그레이드된 기능Riv.. 공감수 1 댓글수 0 2025. 1. 22.
  • Flutter Day 10-2: InheritedWidget를 이용한 도서 관리 앱 Flutter에서 상태를 공유하고 효율적으로 관리하려면 InheritedWidget을 사용하는 방법이 있습니다.InheritedWidget은 위젯 트리에서 데이터를 공유하고 자식 위젯들에게 알림을 줄 수 있는 강력한 도구입니다.InheritedWidget을 활용해 도서 관리 앱을 구현한 예제를 중심으로 개념과 코드를 정리해 보겠습니다. InheritedWidgetInheritedWidget은 위젯 트리에서 데이터를 공유하기 위해 사용됩니다. 부모 위젯에서 상태를 관리하고, 자식 위젯들이 그 상태를 참조하거나 변경할 수 있도록 합니다.이전의 props drilling(프로퍼티 전달) 문제를 해결하고, 트리가 깊어져도 데이터를 효율적으로 관리할 수 있는 구조를 제공합니다. 특징설명데이터 공유부모 위젯이 관리.. 공감수 2 댓글수 2 2025. 1. 20.
  • Flutter Day 10-1: StatefulWidget을 이용한 도서 관리 앱 StatefulWidgetStatefulWidget은 Flutter에서 상태를 가지는 위젯을 정의하는 데 사용됩니다. 상태(State)는 시간이 지남에 따라 변경될 수 있는 데이터를 의미하며, 이 상태의 변화에 따라 UI를 다시 렌더링할 수 있습니다. StatefulWidget은 두 가지 주요 클래스를 조합하여 작동합니다:StatefulWidget 클래스:변경되지 않는 부분(위젯 자체)을 정의.상태를 관리할 State 객체를 생성.createState() 메서드를 통해 상태 객체를 반환.State 클래스:상태를 보유.build() 메서드를 사용해 UI를 생성.상태가 변경되면 setState()를 호출하여 화면을 다시 그림.StatefulWidget vs StatelessWidget특징StatefulWid.. 공감수 0 댓글수 0 2025. 1. 20.
  • Flutter Day 9-2: carrot market app (6) 1. 기본 흐름데이터 모델링앱에서 다룰 데이터를 정의하고 샘플 데이터를 생성합니다.class를 사용해 데이터를 체계적으로 관리합니다.UI 위젯 설계StatelessWidget: 변경되지 않는 고정 UI를 설계.StatefulWidget: 사용자 상호작용에 따라 변경되는 UI를 설계.반복적인 UI 생성리스트 데이터를 사용해 동적으로 UI를 생성합니다.ListView.builder 또는 List.generate를 활용.페이지 전환 및 네비게이션 구현Navigator 또는 BottomNavigationBar로 화면 이동을 관리.2. 주요 개념 설명2.1 List.generate: 반복 UI 생성Flutter에서 동일한 구조의 UI를 반복적으로 생성해야 할 때 사용하는 방법입니다.주요 특징정적 데이터 반복 생성.. 공감수 1 댓글수 0 2025. 1. 18.
  • Flutter Day 9-1: carrot market app (6) 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.. 공감수 2 댓글수 0 2025. 1. 18.
  • Flutter UI 스타일링 - 레이아웃과 구조 잡기 🎨 Flutter로 UI를 설계하려면 레이아웃과 구조의 기본 개념을 이해하는 것이 가장 중요합니다. 이 포스팅에서는 Flutter 초보자들이 레이아웃을 효과적으로 설계하고 스타일링할 수 있도록 필요한 모든 정보를 체계적으로 정리했습니다.1. Flutter 레이아웃의 기본 구조Flutter의 모든 화면은 위젯 트리로 구성됩니다. 화면을 설계할 때 주로 사용하는 기본 레이아웃 구조는 다음과 같습니다.1.1 앱 레이아웃의 기본 틀Flutter는 Scaffold를 사용해 앱 화면을 구성합니다.Scaffold 구조:AppBar: 상단 바 (헤더)Body: 주요 콘텐츠 영역BottomNavigationBar: 하단 바Scaffold( appBar: AppBar(title: Text('앱 제목')), body:.. 공감수 1 댓글수 0 2025. 1. 18.
  • Flutter UI 스타일링 - 기본 속성 Flutter에서 위젯 스타일링은 UI를 더 깔끔하고 사용자 친화적으로 만드는 데 중요한 부분입니다. 특히 Flutter는 다양한 속성을 제공해 배경, 간격, 정렬, 테두리 둥글기 등을 세부적으로 설정할 수 있어요. 이번 포스팅에서는 위젯 스타일링에 자주 쓰이는 핵심 속성들과 코드 예제를 통해 개념을 쉽게 이해할 수 있도록 정리해보겠습니다.1. Flutter 위젯 스타일링의 핵심 속성들borderRadius테두리를 둥글게 만들 때 사용합니다. BoxDecoration이나 RoundedRectangleBorder에서 활용되며, 모든 모서리 또는 특정 모서리만 둥글게 설정할 수 있습니다.전체 모서리를 둥글게borderRadius: BorderRadius.circular(16)특정 모서리만 둥글게borderR.. 공감수 1 댓글수 0 2025. 1. 16.
  • Flutter Day 8-2: shopping cart app (5) 🗂️ 프로젝트 구조Flutter 앱은 여러 파일로 나눠 구조를 만듭니다.이 프로젝트의 주요 파일은 다음과 같습니다:lib/constants.dart → 앱의 상수 정의lib/theme.dart → 앱의 테마 설정lib/main.dart → 앱의 진입점lib/components/shoppingcart_header.dart → 쇼핑카트 헤더lib/components/shoppingcart_body.dart → 쇼핑카트 바디🎨 테마 설정constants.dart: 색상 상수 정의앱에서 사용될 주요 색상을 상수로 정의해 재사용성을 높입니다.MaterialColor로 primarySwatch를 설정하면 Flutter에서 색상 팔레트를 자동으로 생성합니다.const kPrimaryColor = MaterialC.. 공감수 2 댓글수 0 2025. 1. 15.
  • Flutter Day 8-1: 비동기 프로그래밍(Java vs Dart) 알아보기 비동기 프로그래밍은 현대 애플리케이션 개발에서 매우 중요한 개념입니다. 서버 요청, 파일 처리 등 시간이 오래 걸리는 작업을 비동기로 처리하면 앱의 응답성을 유지할 수 있습니다. 이번 포스팅에서는 Java와 Dart에서 비동기 프로그래밍의 차이점과 중요한 개념을 정리해 보겠습니다.1. 비동기 프로그래밍이란?동기(Synchronous): 코드가 순차적으로 실행되며, 한 작업이 끝날 때까지 다음 작업이 대기 - 단점: 오래 걸리는 작업이 있으면 전체 흐름이 멈춤(Blocking) 비동기(Asynchronous): 작업 완료 여부와 상관없이 다음 코드가 실행되고, 작업이 완료되면 결과를 처리.작업이 완료되면 콜백, Future, 또는 이벤트 루프를 통해 결과를 처리. - 장점: 효율적인 리소스 사용 및 빠른 .. 공감수 1 댓글수 0 2025. 1. 14.
  • Flutter Day 7: Flutter login app (4) Flutter로 간단한 로그인 앱을 만들어보겠습니다. 로그인 앱은 기본적인 레이아웃 설계와 폼 처리를 배우기에 좋은 예제입니다. 이번 포스팅에서는 작성된 코드와 함께 쓰인 Flutter의 주요 개념을 알아보겠습니다.1. 프로젝트 구조와 주요 파일main.dart: 앱의 진입점이며, 테마와 라우트를 정의합니다.LoginPage: 로그인 화면.HomePage: 로그인 후 이동할 메인 화면.CustomForm: 로그인 폼 컴포넌트.CustomTextFormField: 재사용 가능한 텍스트 필드 위젯.Logo: 로고를 보여주는 컴포넌트.size.dart: 여백과 크기 관련 상수를 정의한 파일.2. main.dart앱의 진입점에서 MaterialApp 위젯을 사용해 테마와 라우트를 설정합니다.import 'pac.. 공감수 1 댓글수 0 2025. 1. 13.
  • Flutter Day 6-3: Flutter profile app (3) 이번 포스팅은 Flutter Day 5-3와 이어지는 글로 프로필 앱을 완성해보겠습니다.ProfileHeader, ProfileCountInfo, ProfileButtons, ProfileTab와 같이 컴포넌트를 분리하고,반복되는 UI 요소를 공통 함수로 만들어 활용하는 방법에 대해 다룹니다.공통 함수 분리Flutter에서는 반복되는 코드를 함수로 분리하면 유지보수성과 재사용성이 높아집니다.이번 프로필 앱에서는 _buildInfo, _buildCountInfo와 같은 함수들을 재사용 가능한 형태로 리팩토링할 수 있습니다.ProfileCountInfo게시글 수, 좋아요 수, 공유 수를 보여주는 컴포넌트입니다.Row와 Column을 조합해서 간단히 구성할 수 있지만, 각 정보를 빌드하는 로직을 함수로 분리해.. 공감수 1 댓글수 0 2025. 1. 13.
  • Flutter Day 6-2: 앱 개발의 기초: MaterialApp과 Scaffold의 역할 Flutter 앱의 기본 구조를 구성하는 주요 요소들을 자세히 알아보고, 각각의 역할과 사용법을 살펴보겠습니다.Flutter의 기본 구성 요소1. MaterialAppFlutter 앱의 시작점이 되는 최상위 위젯입니다.앱의 전역적인 설정(테마, 라우팅, 디버그 배너 등)을 담당합니다. 모든 Flutter 앱은 MaterialApp 위젯으로 시작됩니다.주요 속성:title: 앱의 이름을 설정합니다. 일부 플랫폼에서는 이 이름이 표시됩니다.theme: 앱의 전역 테마를 정의합니다. 색상, 텍스트 스타일 등을 설정할 수 있습니다.home: 앱이 실행되었을 때 가장 먼저 표시되는 화면(위젯)을 설정합니다.2. Theme앱의 전반적인 스타일을 설정하는 곳입니다.Flutter는 ThemeData 클래스를 사용하여 .. 공감수 1 댓글수 0 2025. 1. 13.
  • Flutter Day 6-1: Stack 위젯과 Positioned 활용 Flutter에서 UI를 만들다 보면, 위젯들을 겹쳐서 배치해야 하는 경우가 많습니다. 이때 Stack 위젯을 사용하면 위젯을 쉽게 겹치고 원하는 위치에 배치할 수 있습니다. 오늘은 Stack 위젯과 함께 Positioned 위젯을 이용한 겹쳐진 레이아웃 구현 방법을 알아보겠습니다.Stack Stack 위젯은 여러 자식 위젯을 겹쳐서 배치할 수 있게 해주는 컨테이너입니다.기본 동작: 자식 위젯들은 오버레이(겹침) 구조로 배열됩니다.순서: Stack의 리스트 순서에 따라 앞쪽에 추가된 위젯이 화면에서 아래쪽에 위치합니다.주요 속성alignment:Stack 내 모든 자식 위젯의 기본 정렬 위치를 설정합니다.예: Alignment.topLeft, Alignment.center, Alignment.bottom.. 공감수 2 댓글수 0 2025. 1. 9.
  • Flutter Day 5-3: Flutter profile app (3) Flutter로 간단하지만 세련된 프로필 앱을 만들어 보겠습니다.이번 포스팅에서는 테마 설정, 메인 페이지 구조, 프로필 헤더 디자인 등을 다룹니다. 1. 테마 설정하기테마 설정의 중요성Flutter에서 테마(Theme)는 앱의 색상, 글꼴, 스타일 등을 한 곳에서 관리할 수 있는 기능입니다.테마를 설정하면 디자인 일관성을 유지하고, 수정이 필요할 때 여러 파일을 변경할 필요 없이 테마만 수정하면 됩니다.테마 파일: theme.dart우선 테마를 정의하는 theme.dart 파일을 만듭니다. 협업 시 디자이너가 제공한 컬러 팔레트를 기반으로 작성하는 경우가 많습니다.import 'package:flutter/material.dart';const MaterialColor primaryWhite = Mate.. 공감수 0 댓글수 0 2025. 1. 8.
  • Flutter Day 5-2: 기본 위젯 ListView, GridView, PageView 1. ListViewListView는 스크롤 가능한 리스트를 구현할 때 사용하는 Flutter의 기본 위젯입니다. 단순한 목록에서부터 동적인 데이터를 처리하는 복잡한 리스트까지, 다양한 방식으로 사용할 수 있습니다.ListView 사용 방식기본 ListView적은 양의 데이터에 적합.children 속성에 리스트 항목을 직접 추가.ListView.builder많은 데이터를 처리할 때 효율적.itemCount와 itemBuilder를 사용해 동적으로 항목을 생성.ListView.separatedListView.builder의 확장형으로, 항목 사이에 구분선을 추가.주요 속성reverse: true로 설정하면 리스트를 아래에서 위로 스크롤.padding: 리스트의 내부 여백 설정 (EdgeInsets로 지정.. 공감수 1 댓글수 0 2025. 1. 8.
  • Flutter Day 5-1: 플러터 기본기 다지기 Flutter는 "Everything is a Widget"이라는 철학을 바탕으로, 모든 UI 요소를 위젯으로 표현합니다. 이번 포스팅에서는 Flutter의 핵심 개념과 기본 위젯, 그리고 프로젝트 구조에 대해 자세히 알아보겠습니다.1. Flutter의 핵심 철학: Everything is a WidgetFlutter에서는 모든 것이 위젯입니다. 버튼, 텍스트, 레이아웃, 그리고 전체 앱 자체도 위젯으로 구성됩니다. 이 위젯 기반 구조는 코드 재사용성과 유연성을 극대화합니다.선언형 UI 구성 방식Flutter는 React에서 영감을 받아 선언형 UI 방식을 사용합니다.즉, 최종 UI 상태를 선언하면, Flutter가 이를 자동으로 렌더링합니다.명령형 UI와 선언형 UI의 차이명령형 UI는 상태 변경을 직.. 공감수 1 댓글수 0 2025. 1. 8.
  • Flutter Day 4-2: Flutter recipe app (2) 주요 위젯Container정의: 레이아웃을 구성하는 가장 기본적인 위젯.특징: 크기, 색상, 테두리, 모서리 둥글기 등 다양한 스타일을 설정할 수 있습니다.Container( width: 100, // 가로 길이 height: 100, // 세로 길이 decoration: BoxDecoration( color: Colors.blue, // 배경 색상 borderRadius: BorderRadius.circular(10), // 모서리를 둥글게 border: Border.all(color: Colors.black, width: 2), // 테두리 설정 ),);AppBar정의: 화면 상단에 고정되는 네비게이션 바입니다.특징: 제목, 아이콘, 버튼 등을 추가할 수 있습니다.AppBar(.. 공감수 1 댓글수 0 2025. 1. 7.
  • Flutter Day 4-1: 연관관계, Mixin, 추상 클래스 Dart에서 객체 간의 연관 관계와 Mixin, 그리고 추상 클래스에 대해 이야기해 보겠습니다.1. 객체 간의 연관 관계객체 간의 관계를 정의하는 객체지향 프로그래밍(OOP)에서는 연관 관계를 크게 두 가지로 나눌 수 있습니다:컴포지션 관계와 집합 관계입니다.컴포지션 관계"강한 소유 관계"입니다.전체(예: 자동차)가 사라지면, 부분(예: 엔진)도 함께 사라져야 합니다.자동차와 엔진의 관계가 대표적인 예입니다.class Engine { final String type; Engine(this.type); void startEngine() { print('${type} 엔진이 시동됩니다.'); }}class Car { final Engine engine; Car(String engineType.. 공감수 1 댓글수 1 2025. 1. 7.
  • Flutter Day 3-3: Flutter store app (1) Flutter는 모바일 UI를 만들기에 최적화된 강력한 프레임워크입니다.Flutter의 YAML 파일 설정, 위젯 트리 구조,그리고 시각적 레이아웃을 구성하는 기본 위젯들을 알아보겠습니다.1. YAML 파일 설정YAML 파일이란?pubspec.yaml 파일은 Flutter 프로젝트의 설정 파일입니다.여기에는 앱에서 사용할 패키지, 리소스(이미지, 글꼴 등), 환경 설정 등이 정의됩니다.Asset 설정# pubspec.yaml 파일의 assets 섹션assets: - assets/bag.jpeg - assets/cloth.jpegassets:: Flutter 프로젝트에서 사용할 이미지, 아이콘, 동영상 등을 정의합니다.사용 방법:assets 폴더에 이미지를 추가합니다.위와 같이 YAML 파일에 경로를 .. 공감수 1 댓글수 1 2025. 1. 6.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.