YH-0.0.4-SNAPSHOT

안녕하세요! 이번 포스팅에서는 플러터(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 위젯 - 텍스트를 표시하는 기본..

만들면서 배우는 플러터 앱 프로그래밍을 바탕으로 연습했습니다.코드를 짜기 전, 최상단 폴더에 assets 폴더를 만들고 이미지와 폰트를 넣어줍니다.이미지 폴더 전체 사용 설정 (pubspec.yaml) # To add assets to your application, add an assets section, like this: assets: - assets/images/images/ 해당 경로 하위의 모든 파일을 가져올 수 있게 됩니다.폰트 사용 설정 (pubspec.yaml) # example: fonts: - family: PatuaOne fonts: - asset: assets/fonts/PatuaOne-Regular.ttf해당 폰트를 불러올 때 입력할 폰트의 ..

플러터를 이용해서 간단한 store App을 만들며 문법에 익숙해져보도록 하겠습니다.만들면서 배우는 플러터 앱 프로그래밍을 바탕으로 연습했습니다.코드를 짜기 전, 최상단 폴더에 assets 폴더를 만들고 이미지를 넣어줍니다.yaml 파일 설정 # To add assets to your application, add an assets section, like this: assets: - assets/bag.jpeg - assets/cloth.jpegyaml 파일에서 assets 폴더의 이미지를 사용할 거라고 명시해주면 프로젝트에서 이미지를 가져올 수 있습니다. 시나리오 코드 1 - 초기 코드 작성// 플러터 동작시 반드시 있어야 함import 'package:flutter/material.d..

상속(Inheritance)은 객체 지향 프로그래밍(OOP)의 핵심 개념 중 하나로, 부모 클래스가 가진 속성(상태)과 메서드(행위)를 자식 클래스가 물려받는 것을 의미합니다. 이를 통해 코드 재사용성을 높이고, 계층적인 구조를 통해 클래스 간의 관계를 명확히 표현할 수 있습니다.하지만 단순히 "물려받는 것" 이상의 의미를 가지며, 다형성(Polymorphism)이 성립할 때 진정으로 올바른 상속이라 할 수 있습니다.  다형성이란?"하나의 형태가 다양한 형태로 동작하는 것" 상속 관계에서 다형성이란, 자식 클래스의 객체가 부모 클래스의 형태로 사용될 수 있는 것을 뜻합니다. 예를 들어, 자식 클래스가 부모 클래스의 타입으로 묶여 있을 때도 부모 클래스에서 정의된 행위를 동일하게 수행하거나, 자식 클래스에..

안녕하세요. 이번 포스팅에서는 Google에서 개발한 프로그래밍 언어 Dart의 기본 문법을 소개해 드리려고 합니다.Dart는 Flutter를 활용한 앱 개발에서 주로 사용되며, 간결한 문법과 객체지향 프로그래밍 지원으로 초보자부터 숙련자까지 모두에게 사랑받는 언어입니다.그럼, Dart의 세계로 들어가 보겠습니다! 🚀  1. Dart의 시작 : main() 함수void main() { print("Hello, Dart!"); // 콘솔에 출력}Dart 코드의 실행은 항상 main() 함수에서 시작됩니다. 2. 변수와 데이터 타입변수란?값을 저장할 수 있는 메모리 공간즉 값을 저장해두고 이후 재사용하거나 변경할 수 있도록 메모리 공간을 이름으로 할당한 개념데이터 타입이란?메모리 공간에 들어간 값의 형태..