Flutter 9

플러터 기본 - Form 위젯

Form 위젯TextField는 단순히 하나의 텍스트 입력을 다루는데 반해서, Form은 그 자체로 입력 필드를 가지고 있지 않지만, FormField 위젯들을 그룹화하여 관리하며, 복잡한 유효성 검사를 보다 쉽게 할 수 있는 위젯다른 위젯과 달리 Form 위젯은 자체적인 화면을 제공하지는 않으며, 사용자가 입력한 데이터의 유효성 검증, 데이터 관리 관련 기능을 제공한다.Form 위젯 내에서 TextFormField 위젯을 사용하여 각 데이터 입력을 받는 것이 일반적이다.Form 위젯 작성 방법은 다음과 같다.1. Form 위젯을 위한 GlobalKey를 만들어야 한다. GlobalKey는 FormState 전체에 엑세스하는데 사용되며, 이 객체는 폼 데이터의 유효성을 검사하고 저장하는데 사용된다.fin..

Flutter 2024.11.15

플러터 기본 2

Flutter 앱 개발에서 자주 사용되는 asset과 로컬 폰트 설정 방법assetasset은 앱 구성에 필요한 리소스 파일들을 의미한다. 예로 아이콘, 이미지, JSON 파일, 폰트 파일 등이 있다.이러한 리소스는 앱 빌드 시 내부에 포함되어야 하며, 이를 위해 pubspec.yaml 파일에 등록이 필요하다. Text 위젯에서 로컬 폰트 (fontFamily) 설정하기Flutter에서 Text 위젯의 fontfamily를 로컬 폰트로 설정하려면, asset으로 폰트를 등록한 후 사용해야 한다. 폰트 다운로드https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through grea..

Flutter 2024.11.07

플러터 기본기 - 위젯 사용법

기초적인 Flutter 화면을 구성하는 패턴'package:flutter/material.dart' 임포트MaterialApp으로 메인 위젯 트리 감싸기title과 theme과 같은 속성 설정home : 속성을 주 페이지로 정의Scaffold :앱의 시각적 레이아웃에 대한 기본 구조 제공appBar 및 body와 같은 속성 설정레이아웃 요소 제공 (예 : AppBar, Drawer, BottomNavigationBar)각 구성요소는 또 다른 위젯으로 각각의 사용법은 이후에 정리하기로 함body에 실제 화면 관련 위젯 정의import 'package:flutter/material.dart';void main() { runApp(MyApp());}// 상태 기반 UIclass MyApp extends St..

Flutter 2024.11.06

플러터 기본기 다지기

"Everything is a Widget" - Flutter의 핵심 철학Flutter는 React에서 영감을 받은 선언적 프로그래밍 방식을 채택하였다. 개발자는 원하는 UI 상태를 직접 선언하며, 프레임워크가 이를 효율적으로 렌더링한다. 명령형 UI어떠한 상태가 되도록 명령한다.ViewA a = ViewA();ViewB b = ViewB();a.setColor(red) // 빨간색이 되어라b.setColor(yello) // 노란색이 되어라a.add(b) // b는 a의 child가 되어라 선언형 UI어떠한 최종 상태를 선언한다.// 빨간색 A가 노란색 B를 child로 가지고 있다.return ViewA( color: red, child: ViewB( color: yello, ),); Flutt..

Flutter 2024.11.05

dart(함수, 메서드)

함수 특정 작업을 수행하는 코드 블록. 반복적인 작업을 함수로 정의해서 사용 가능하며 코드의 재사용성 및 가독성을 높여 준다.returntype functionName(parameter1,parameter2, ...){ // function body}리턴타입 함수이름(매개면수1, 매개변수) { // 수행 할 코드를 작성 } void main () { calculateInterest(5000, 10, 1);}// 간단한 이자를 계산하는 함수를 만들어 보자.// 이자(interest) = 원금(principal) * 이자율(rate) * 시간(year)void calculateInterest(double principal, double rate, double year) { double interest..

Flutter 2024.09.06

dart Null Safety

dart Null Safety 널 세이프티(Null Safety)는 개발자가 널 에러를 피할 수 있도록 도와주는 다트 프로그래밍 언어의 기능이다. 이 기능은 사운드 널 세이프티 인 다트(Sound Null Safety in dart)라고 불리며, 이를 통해 개발자는 코드 작성 시점에 널 에러를 잡을 수 있다.   Sound Null Safety in dart (Sound Type System) 런타임 중에 null 포인터 예외를 방지하기 위해 Dart 컴파일러가 코드를 분석하고 컴파일할 때 타입 시스템에서 엄격한 규칙을 적용하는 것을 의미   Dart Null Safety의 개념 Null Safety는 변수에 null 값을 할당하는 것을 엄격하게 제한한다. 변수를 null 또는 non-null로 선언할..

Flutter 2024.09.06

컬렉션(자료구조)

dart 에서 제공 하는 자료구조와 특징에 대해 알아 보자.    컬렉션은 여러 값을 하나의 변수에 저장할 수 있는 타입을 의미한다.  주요 컬렉션 타입 List(리스트) : 여러 값을 순서대로 저장하고, 인덱스 번호로 접근 가능한 컬렉션 타입Map(맵) :'키'와 '값'의 형태로 저장하고, '키'를 기반으로 매칭되는 '값'을 바로 접근 가능한 컬렉션 타입Set(셋) :중복된 데이터를 제거하고 데이터를 저장하는 컬렉션 타입// 코드의 시작점void main() { // List 자료구조 살펴보기 List myList = ['고양이','포도','사과']; // 선언과 동시에 초기화 // R print(' LIST DATA $myList'); // add 추가 myList.add('강아지');..

Flutter 2024.09.06

프로젝트 구조

flutter 프레임워크의 전체적인 구조를 살펴 보자.   andorid 폴더에서 직접 코틀린 코드나 자바 코드를 통해서 작업을 진행할 수 있다. iOS 폴더에서는 버전 정도 수정이 가능하며 권장 사항은 XCODE 를 통해서 설정 하길 바란다.  pubspec.yaml 파일은 프로젝트에 설정 및 외부 라이브러리 관리를 위해 파일 이다. 변경 사항이 발생하면 상세한 부분은 pubspec.lock 파일에 수정 된다.

Flutter 2024.09.06

변수

대부분의 프로그래밍 언어의 구성- 변수- 조건문- 반복문- 함수(인수값) : 위 내용들을 가지고 미리 만들어 놓은 코드 dart 언어 기본// main() 함수는 작성한 코드 부터 실행(실행 진입점)// 각 구문은 세미콜론(;) 으로 끝나야 함// 코드의 시작점 void main() { print('Hello Dart');} // end of main 주석// 메서드/클래스 정의 위에 주석을 작성하면 'dartdoc' 과 같은 문서 생성 도구를/// 통해 문서 생성 가능void main() { // 한줄 주석 /** * 여러줄 주석 */} // end of main 변수// 변수와 데이터 타입void main() { int age = 20; double version = 10.0; ..

Flutter 2024.09.06