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..

Dart는 비동기 프로그래밍을 지원하며, 이를 통해 프로그램의 흐름을 중단하지 않고 작업을 처리할 수 있습니다. 이번 포스팅에서는 Dart의 비동기 프로그래밍 개념과 Future 타입, 그리고 이를 활용한 실습 코드를 살펴보겠습니다. 💡 학습 목표1. Dart 비동기 프로그래밍의 개념 이해하기2. Future 타입 알아보기3. Future.delayed 함수와 함께 Future 타입 활용해 보기 1. Dart 비동기 프로그래밍의 개념동기 프로그래밍모든 코드가 순차적으로 실행됩니다.하나의 작업이 끝나야만 다음 작업이 실행됩니다.예: 파일 읽기 작업이 끝난 뒤에야 다음 코드가 실행.비동기 프로그래밍코드가 동시다발적으로 실행됩니다.작업의 실행 순서가 보장되지 않습니다.Dart 비동기 프로그래밍은 작업 완료를..

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, // ..

Flutter는 다양한 레이아웃과 스크롤 위젯을 제공하며, 그 중에서도 ListView, PageView, GridView는 가장 많이 사용되는 위젯입니다. 이 글에서는 이 세 가지 위젯의 사용법, 주요 속성, 그리고 실습 예제를 함께 살펴보겠습니다. 1. ListView 위젯ListView는 스크롤 가능한 리스트를 만드는 데 사용되며, Flutter에서 가장 일반적인 스크롤 위젯입니다.ListView 사용 방식children 전달 방식: 적은 양의 데이터를 다룰 때 사용.ListView.builder: 동적인 리스트를 생성할 때 사용.ListView.separated: 동적 리스트와 구분선이 필요한 경우 사용.주요 속성reverse: true로 설정하면 리스트가 아래에서 위로 표시됩니다.padding:..

Flutter는 다양한 위젯을 제공하며, 이를 이해하고 활용하는 것이 효율적인 UI 개발의 핵심입니다. 이번 포스팅에서는 Flutter에서 자주 사용되는 Basic Widget에 대해 살펴보고, 예제 코드와 함께 실제 활용 방법을 소개하겠습니다. 1. Layout 위젯Flutter에서 layout 위젯은 visible 위젯을 화면의 원하는 위치에 배치하는 데 사용됩니다. 가장 간단한 layout 위젯으로는 Container와 Center가 있으며, 더 많은 layout 위젯은 Flutter 공식 문서에서 확인할 수 있습니다.2. Visible 위젯Visible 위젯은 화면에 직접 표시되는 UI 요소입니다. Flutter에서는 다양한 visible 위젯을 제공합니다.Text 위젯 - 텍스트를 표시하는 기본..

Flutter는 현대 모바일 애플리케이션 개발에서 주목받는 UI 프레임워크로, 선언적 UI와 위젯 기반 아키텍처를 통해 개발자에게 높은 생산성과 효율성을 제공합니다. 이번 포스팅에서는 Flutter의 사용자 정의 위젯, 프로젝트 구조, 화면 구성 패턴 등을 알아보겠습니다. "Everything is a Widget"Flutter의 핵심 철학Flutter는 위젯 기반의 UI 프레임워크로, 모든 UI 요소를 위젯으로 표현합니다. 이는 개발의 일관성과 효율성을 크게 높여줍니다.선언적 UI 구성 선언형 UI란?// 빨간색 A가 노란색 B를 child로 가지고 있다.return ViewA( color: red, child: ViewB( color: yello, ),);상태만 선언하면 UI는 자동으로 업데이트..