YH-0.0.4-SNAPSHOT

Flutter로 애플리케이션을 개발할 때, REST API를 활용한 데이터 통신은 매우 중요합니다. 이번 포스팅에서는 Flutter에서 인기 있는 HTTP 통신 패키지인 Dio를 사용하여 서버와 데이터를 주고받는 방법을 단계별로 살펴보겠습니다. 💡 학습 목표1. Dio 패키지를 설치하고 기본 사용법 익히기2. REST API로 데이터 가져오기3. JSON 데이터를 Dart 객체로 변환하기 1. Dio 패키지 설치하기 dio install | Dart packageA powerful HTTP networking package, supports Interceptors, Aborting and canceling a request, Custom adapters, Transformers, etc.pub.devD..

Flutter에서 자식 위젯에서 발생한 이벤트를 부모 위젯이 처리하도록 만드는 방법은 여러 가지가 있습니다. 그중 하나는 콜백 함수를 사용하는 것입니다. 이번 포스팅에서는 콜백 함수를 통해 부모 위젯이 자식 위젯의 이벤트를 처리하는 방법을 단계별로 살펴보겠습니다. 1단계: 기본 구조 작성하기우선, 부모 위젯과 자식 위젯의 기본 구조를 만듭니다. 자식 위젯에서 이벤트를 발생시키지만, 아직 부모 위젯과 연결되지는 않은 상태입니다.class ParentsView extends StatefulWidget { const ParentsView({super.key}); @override State createState() => _ParentsViewState();}class _ParentsViewState ex..

안녕하세요! 이번 포스팅에서는 플러터(Flutter)를 활용해 쇼핑카트 앱을 만들어보는 과정을 소개하려고 합니다. 플러터의 다양한 UI 위젯과 상태 관리 방식을 익힐 수 있었어요. 1. lib/constants.dart 파일 만들기 2. lib/theme.dart 파일 만들기 3. main.dart 기본 코드 설계하기 4. 쇼핑카트 헤더 만들기 5. main 앱바 추가 6. 쇼핑카트 바디 만들기  1. 앱의 테마 설정앱의 색상과 테마는 constants.dart와 theme.dart 파일에 정의하여 유지보수가 쉽도록 설계했습니다. 이를 통해 전체 앱의 색상 일관성을 유지할 수 있습니다.constants.dartimport 'package:flutter/material.dart';const kPrimary..

안녕하세요! 오늘은 Flutter를 활용하여 간단한 로그인 화면을 구현하는 방법을 공유하려 합니다. 이 프로젝트는 Flutter를 처음 배우는 분들도 쉽게 따라할 수 있도록 구성되어 있습니다. 기본적인 UI 구성부터 네비게이션까지 한 번에 익힐 수 있었습니다. 프로젝트 소개Flutter를 사용하여 로그인 화면과 홈 화면을 구현합니다. StatelessWidget과 StatefulWidget의 사용법.TextFormField를 활용한 입력 폼 구성.Navigator를 사용한 화면 전환.Material Design을 활용한 UI 구성.주요 기능이메일 및 비밀번호 입력 폼.입력 데이터의 유효성 검사 및 저장.로그인 버튼 클릭 시 홈 화면으로 전환.프로젝트 파일 구조 1. pubspec.yaml 설정pubspe..

Stack 위젯은 Flutter에서 여러 자식 위젯을 겹치게 배치할 수 있게 해주는 컨테이너 위젯입니다.Stack 내의 모든 자식은 오버레이 구조로 배열되어, 리스트의 앞쪽에 있는 위젯이 아래쪽에 위치하게 됩니다. Stack 위젯은 주로 위젯들 간의 위치를 상대적으로 정의할 때 사용됩니다.1. Stack 위젯 기본 개념Stack 위젯은 자식 위젯을 겹쳐서 배치합니다. 기본적으로 마지막에 추가된 위젯이 가장 위에 그려집니다. Stack은 아래와 같은 구조로 구성됩니다:자식 위젯은 리스트의 순서대로 그려집니다.alignment 속성을 사용하면 전체 Stack 내에서 자식 위젯의 배치를 조정할 수 있습니다. Stack 위젯과 alignment 속성의 사용import 'package:flutter/materia..

이 블로그 포스팅에서는 Flutter를 이용해 프로필 페이지를 구현하는 방법을 설명합니다. 각 섹션을 나누어 테마 설정부터 프로필 헤더, 버튼, 그리고 탭을 사용하는 방식까지 순차적으로 구성해보겠습니다.1. 앱 테마 설정하기 (theme.dart)앱의 테마는 전체 디자인에서 중요한 부분을 차지합니다. Flutter에서는 ThemeData 클래스를 사용하여 앱의 테마를 설정할 수 있습니다. 이를 통해 색상, 글꼴, 위젯 스타일 등을 일관되게 적용할 수 있습니다.import 'package:flutter/material.dart';// 보통 협업 --> 디자이너// 전역 함수로 만들어 보자.const MaterialColor primaryWhite = MaterialColor( 0xFFFFFFFF, // ..