만들면서배우는플러터앱프로그래밍 4

[Flutter] 연습하기 4 - Flutter login app

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

Flutter 2025.01.13

[Flutter] 플러터 Stack 위젯

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

Flutter 2025.01.10

[Flutter] 연습하기2 - flutter recipe app

만들면서 배우는 플러터 앱 프로그래밍을 바탕으로 연습했습니다.코드를 짜기 전, 최상단 폴더에 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해당 폰트를 불러올 때 입력할 폰트의 ..

Flutter 2025.01.07

[Flutter] 연습하기1 - flutter store app

플러터를 이용해서 간단한 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..

Flutter 2025.01.07