• Function의 body
• Var 변수 키워드: String, int, double, List<String>, Map(key와 value로 이루어짐)
(데이터타입 따로 지정안해도 자동으로 지정됨)

int timesTwo(int x){
  return x*2;
} 

int timesThree(int x) =>x*2;

• 다트 문법은 main() 함수가 진입점-> void main(){
                        Print("hh");
                        }

• 다트는 객체지향 언어이며 단일 상속을 지원한다.
• 다트에서 모든 것이 객체이며 모든 객체는 클래스의 인스턴스이다. 모든 객체는 Object 클래스를 상속받는다. 심지어 숫자도 기본형이 아니라 객체!
• 다트는 형식을 갖는다. 문자열을 반환한다고 선언한 함수에서 숫자를 반환할 수 없다.
• 다트는 최상위 수준 함수와 변수를 지원하며 이를 라이브러리 멤버라 부른다.
• 다트는 어휘적으로 한정된다.

형식 시스템

- 변수를 선언할 때는 형식을 지정해야 한다.
- List나 Map을 사용할 때는 <와> 사이에 요소의 형식을 정의한다.
    ○ List<String> names; -> 문자열 리스트
- 함수에서 인수를 정의할 때도 형식을 사용한다.
    ○ Int addNums(int x, int y){
        Return x+y;
    }
- 다트는 동적 형식도 지원한다. 변수를 dynamic으로 설정하면 컴파일러가 해당 변수에 모든 형식을 허용한다.
    ○ Dynamic myNumber='Hello';

주석 종류 3가지

//: 한 줄 주석 /* */: 여러 줄 주석 ///: 문서 주석-> 메서드나 클래스 정의 위에 작성하면 dartdoc과 같은 문서 생성 도구를 통해 문서를 자동으로 생성해줌

• 문장은 세미콜론으로 표시!

final, const, static

• 세 키워드는 변수의 형식을 확장한다.
• 변수의 값을 바꿀 수 없게 하려면 final, const 사용
• Final 변수는 한 번만 할당할 수 있으며 클래스 수준에서 변수를 할당하기 전에 선언함. 쉽게 말해 클래스의 생성자에서 할당하는 모든 변수에 final을 사용함
• 반면 const 변수는 할당하기 전에 선언하지 않음 컴파일 이후로 항상 같은 값을 갖는 변수를 상수라고 함

변수: num(int, double), String, bool

• 변수에 담긴 값은 언제라도 다른 값으로 바꿀 수 있음
• 타입 추론
다트는 타입을 직접 명시하지 않고 var로 대체할 수 있는 타입 추론을 지원
• 변수는 값이 변경되어 의도치 않게 에러를 발생할 가능성이 있으므로 가급적이면 값이 변하지 않게 상수로 사용하는 것이 좋음-> final 키워드를 제일 앞에 붙이면 값이 수정되지 않는 상수로 사용가능!
• 변수에 required 키워드 애너테이션을 추가하려면 meta라는 다트 라이브러리를 사용해야 함

산술연산자: +, -, *, /, ~/(정수 나눗셈), %

증감연산자

비교연산자

논리연산자: &&,||

타입검사: is, is!

Ex) 
void main(){
  int a=10;
  if(a is int){
    print('정수');
  }

  String text='hello';
  if(text is! int){
    print('숫자가 아님');
  }
}

?. 연산자

?? 연산자: 값이 존재하지 않는 상황에 할당할 백업값을 지정 가능-> 이 값이나 변수가 null이면 백업값을 사용하시오를 의미

??= 연산자: 객체가 null이면 백업값을 할당하고 아니면 객체를 그대로 반환한다.

형변환: as 키워드 사용-> int와 double 모두 상위 개념인 num으로 형변환 가능

• Assert() 함수는 계산 결과가 참인지 검사
• 더하기 연산자의 또 다른 쓰임새는 두 개의 문자열을 결합하는 것

함수

Int f(int x){ Return x+10; }

Void main(){ Var result=f(10); }

• 함수는 입력과 출력을 다양하게 조합 가능
• 입력값은 없거나 여럿일 수 있음
• 출력값은 없거나 하나만 있을 수 있음

• Print() 함수는 반환값이 void인 대표적인 함수
변수 앞에 $ 기호를 붙여 문자열 내에 변수를 삽입할 수 있음
Ex) 
String _name='홍길동';
int _age= 20;

void main(){
  print('$_name은 $_age살입니다.');
}

• 클래스 내부에 작성하는 함수를 메서드라고 함
• 정의된 클래스에 관계된 기능을 수행
Ex) 
class Myclass{
  bool isEven(int number){
    return number %2==0;
  }
}

var myClass=MyClass();
print(myClass.isEven(10)); //static키워드를 붙이면 
정적 메서드가 되며 함수로 볼 수 있음

Ex) 
void main(){
  Person person=Person("hjw",age:24);
  person.greeting();
}

class Person{
  String name;
  int age;
  Person(this.name,{this.age});

  void greeting(){
    print('안녕하세요 저는 $name입니다.');
  }
}

익명함수: 이름 없는 함수도 정의해 사용 가능

• ([인수명]) {[동작 또는 반환값]}

  (number){
  return number %2==0;
  };

람다식

• ([인수명]) => [동작 또는 반환값]

(number)=> number % 2 ==0;

선택 매개변수: 함수 정의에서 {}j로 감싼 매개변수는 선택적으로 사용 가능

• 호출시 매개변수명을 값 앞에 써주면 됨-> 이름 있는 매개변수라고 함

• 만약 필수 매개변수와 선택 매개변수를 함께 사용하고 싶다면 앞쪽에 필수 매개변수를 먼저 둔다.
• 선택 매개변수는 호출할 때 매개변수명을 함께 쓰기 때문에 옵션이 많을 때도 가독성을 높여주는 장점
  void something(String name,{int age}){}

  void main(){
    something('홍길동',age: 10);
    something('홍길동');

  }

main(){
String text='hello';

if와 else

if(text is int){ print('정수'); }else if(text is double){ print('실수'); }else{ print('정수도 실수도 아님'); } }

- 다트의 조건문에는 반드시 불리언을 사용해야 함

삼항 연산을 활용한 분기

• [조건] ?[참일 때]:[거짓일 때]

Var todo =isRainy? '빨래를 하지 않는다' : '빨래를 한다';

switch와 case

• Switch문의 각 case에 switch를 탈출하는 키워드를 추가해야 함 보통 break나 return으로 탈출

-객체 지향 프로그래밍 • New 키워드는 인스턴스화하는 키워드이며 생략 가능

Var person=new Person();
Var person2=Person(); //new 키워드 생략 가능

• 변수명 뒤에 .연산자를 입력해 생성한 객체의 프로퍼티에 접근 가능

• 변수명 앞에 _기호를 붙이지 않으면 외부에서 접그 가능하고, 붙이면 접근 불가능함
• _기호가 붙은 프라이빗 변수는 해당 클래스가 정의되어 있지 않은 다른 파일에서 직접 접근 불가능

프라이빗 변수에 접근하려면 게터와 세터 메서드 필요! 각각 읽기와 쓰는 기능을 함

class Person{
  String name;
  int _age;

  int get age=>_age;
}

import 'person.dart'

var person= Person();
print(person.age); //_age값 출력


Ex) 
class Rectangle{
  num left, top, width, height;

  Rectangle(this.left,this.top,this.width,this.height);

  num get right=>left+width;
  set right(num value)=> left=value-width;
}

상속: extends 키워드 사용하여 상속

• 상속을 받으면 원래 있던 기능을 그대로 물려받는데, 만약 새로 정의하고 싶다면 @override 어노텡이션을 사용해 오버라이드하여 재정의하면 됨

• 추상 클래스는 그대로 인스턴스화할 수 없으며 다른 클래스에서 임플리먼트하여 기능을 완성하는 상속 재료로 사용됨 이때 대상 클래스에는 implements 키워드를 메서드에는 @override 키워드를 사용
class Goblin implements Monster{
  @override
  void attack(){
    print('고블린 어택');
  }
}

class Bat implements Monster{
  @override
  void attack(){
    print('할퀴기');
  }
}

믹스인: with 키워드를 사용하면 상속하지 않고 다른 클래스의 기능을 가져오거나 오버라이드할 수 있음

열거 타입: 상수를 정의하는 특수한 형태의 클래스

• Enum Status{login,logout}
    ○ Enum Color {red, green, blue}

    Void updateColor(Color color){
        Switch (color){
            Case Color.red:
                //작업수행
            Case Color.green:
                //작업수행
            Case Color.blue:
                //작업수행
            }
        }

다트는 List, Map, Set 등의 컬렉션을 제공함

• List: 같은 타입의 자료를 여러 개 담을 수 있고 특정 인덱스로 접근 가능
• Map: 키와 값의 쌍으로 저장할 수 있고 키를 통해 값을 얻을 수 있음
• Set: 중복이 허용되지 않고 찾는 값이 있는지 없는지 판단하고자 할 때 사용

다트에서는 함수를 값으로 취급 가능 그러므로 다른 변수에 함수를 대입 가능

void greeting(String text){ print(text);

} void main(){ var f=greeting; f('hello'); } --> 이렇게 함수를 매개변수로 전달하기, 수정하기, 변수에 대입하기가 가능한 객체를 일급 객체라고 함

for() 문과 forEach() 함수

forEach()함수: 내부 반복을 수행-> 외부에서 봤을 때는 반복을 띠지 않지만 내부적으로 반복을 띰

where 함수: 조건을 필터링할 때 사용하는 함수

map 함수: 반복되는 값을 다른 형태로 변환하는 방법을 제공하는 함수

• Where() 함수와 toSet() 함수를 함께 사용하면 중복 데이터를 없앨 수 있음

class Car{
  int seats;
  String color;

  Car(int sts,[String clr='black']){
    this.seats=sts;
    this.color=clr;
  }

  printVars(){
    print('seat: $seats,color:$color');)
  }
}

void main(){
  Car newCar=Car(4,'red');
  newCar.printVars();
}

루프

• 다른 언어와 동일한 키워드로 반복 루프를 구현함
    ○ 표준 for: 인덱스가 필요할 때 사용
    ○ For-in: 인덱스가 필요 없을 때 사용
    ○ forEach: 인덱스가 필요 없을 때 대안으로 사용 
    ○ While: 바디 실행 전 조건을 확인하므로 바디가 실행되지 않을 수도 있음
    ○ Do while: 루프 바디를 실행한 후 조건을 평가함
    ○ Break와 continue로 루프 흐름 제어

- Shift+F10: 실행
- Ctrl+ Space: 자동완성
- Alt+ 4: 콘솔창 
- 전체 선택 후 Ctrl+ Alt+ L: 코드 정리
- Alt+ Enter: 현재 위젯을 벗겨내거나 다른 위젯으로 감싸기

Flutter 공부 정리

- 스마트폰 앱은 크게 네이티브, 하이브리드, 크로스 플랫폼 방식으로 개발
• 네이티브:  안드로이드-자바 or 코틀린
            IOS-엑스코드로 개발, 개발언어는 스위프트 or 오브젝티브C
• 하이브리드: 웹 기술로 앱 화면을 만든 후 네이티브 기술로 감싸서 앱 형태로 포장
• 크로스 플랫폼: 한 번 구현하여 안드로이드와 IOS 등 각 플랫폼용 앱 만듦

- 플러터는 한 번 코딩으로 여러 플랫폼용 앱을 만드는 크로스 플랫폼 개발 프레임워크
- 위젯과 상태 갱신 두가지는 플러터 개발자가 신경 써야 하는 두가지 핵심 개념!
- 플러터는 상속보다 조합을 우선시하며 이를 이용해 고유한 위젯을 만듦
- 위젯은 다양한 생명주기 메서드와 객체 멤버를 포함한다. 가장 중요한 메서는 build()인데 모든 플러터 위젯은 build() 메서드를 반드시 정의해야 함
- 플러터는 기존에 빌드하고 그렸던 위젯을 필요한 곳에 재사용 가능
- 래스터라징을 끝으로 위젯이 화면에 그려짐
    ○ 플러터는 리액티브다.
    ○ 모든 것은 위젯이다.
    ○ State 객체는 오래 살아남으며 종종 재사용된다.
    ○ 위젯의 제약은 부모가 서술한다.

• 머티리얼 디자인(구글에서 제공하는 디자인 가이드)
- Import 'package:flutter/material.dart';

• 쿠퍼티노 디자인(애플에서 제공하는 디자인 가이드)
- Import 'package:flutter/cupertino.dart'
- 쿠퍼티노 디자인에서는 AppBar 대신 CupertinoNavigationBar를 사용하며 CupertinoSwitch, CupertinoButton, CupertinoAlertDialog, CupertinoPicker 등을 사용함
- 체크박스나 라디오 버튼이 따로 없고 스위치만 사용

- 패키지 네임에는 컴퍼니 도메인과 앱 이름의 조합으로 패키지명이 결정됨
- 패키지명은 앱을 나타내는 고유한 값으로 구글 플레이 또는 앱스토어에 업로드할 때 기존에 중복되는 값이 있으면 업로드 되지 않음
• 자바, 오브젝트-C

- 앱을 실행 가능한 형태로 만드는 동작을 빌드라고 함
- 안드로이드 폰에서 플러터 앱을 실행하려면 개발자 모드를 활성화 해야함 

Import 'package:flutter/material.dart';

Void main(){ runApp(const MyApp()); }

Class MyApp extends StatelessWidget{ //StatefulWidget(상태변화가 있는 위젯) ->상태변화가 없는 위젯 Const MyApp({super.key});

- Statelesswidget 클래스: build() 메서드를 가지고 있는데 
위젯을 생성할 때 호출되는데 실제로 화면에 그릴 위젯을 작성해 반환함
    ○ 언제 파괴되어도 괜찮은 위젯으로 이 위젯은 어떠한 정보를 저장하지 않으므로 위젯이 사라져도 별일이 없음/ 상태가 없는 위젯은 새로운 정보에 반응함
    ○ 상태가 있는 위젯(StatefulWidget)과 상태가 없는 위젯(StatelessWidget)으로 나뉨

- Snackbar 사용을 위해서는 home에서 scaffold 이용
• 중앙으로 이동시 alignment:Alignment.center, 사용

- Const: 상수 활용    

- 플러터에서는 화면을 그리는 모든 디자인 요소를 위젯이라고 함

- MetrialApp() 클래스:  
title(제목), theme(테마), home 세 가지 이름이 있는 인수를 설정

--> 이름 있는 인수는 인수 앞에 인수명을 씀

- MyHomePage 클래스의 생성자는 key와 title 프로퍼티를 옵션으로 받아서 
super 키워드로 부모 클래스의 생성자에 key르르 전달

- State 클래스: 주로 상태를 저장할 변수들과 그 변수를 조작할 메서드를 작성

- Scaffold 클래스: 머티리얼 디자인 앱을 만들 때 뼈대가 되는 위젯

- Myapp->MaterialApp->Scaffold->appBar->body 순서로 좁아짐

- FloatingActionButton 클래스

- 널 안전성
• 널 안전성을 도입하면 해당 변수 타입이 널을 허용하는지 아닌지를 정확하게 대입해야 함
• 널을 대입하기 위해 타입 옆에 ? 를 붙이면 됨
-> int? i = null; 
• 결론적으로 널 안전성이 도입되면 String과 String?는 다른 타입으로 취급
• 늦은 초기화 시 -> late 키워드를 선언 앞에 붙임
• 널일 수 있는 값을 처리하는 방법 -> ?? 를 사용하면 널을 허용하지 않는 타입으로 변환
*int value = nullableValue ?? 0
• 널을 허용하는 타입을 매개변수로 사용하는 메서드가 있다면 명확히 타입을 정의해 줘야 함-> str=null
• 널이 아닐 때만 참조하도록 하는 ?. 활용 방법

- 코드 정렬 기능을 사용하려면 모든 프로퍼티의 마지막에 콤마를 찍는 것이 습관화되어 있는 것이 좋음

Flutter 본격 시작

import'package:flutter/material.dart';

voidmain(){ runApp(constMyApp()); }

• stless 입력 후 Myapp 클래스 입력
• Stful 입력 후 State 클래스 입력

위젯 종류

- 위젯은 앱 뷰의 모든 정보를 정의한다.
- 참고로 앱을 만드려면 레이아웃, 스타일, 애니메이션 등 다양한 기능이 필요하므로 보이는 것보다 위젯이 아주 많음
- 레이아웃(Row, Scaffold, Stack 등)/ 구조(Button, Toast, MenuDrawer 등)/ 스타일(TextStyle, Color 등)/ 애니메이션(FadeInPhoto, Transform 등)/ 위치와 정렬(Center, Padding 등)

-MatrialApp(): 커스터마이징 시 사용 -Scaffold(): 상중하로 나눠줌 • appBar: 상단 • Body: 중단 • bottomNavigationBar: 하단

-AppBar() 디자인 • Title: 왼쪽제목 • Leading: 왼쪽에 넣을 아이콘 • Actions: [우측아이콘들]

-Text(): 글자를 표시하는 위젯 • Text()는 style: 안에 스타일 넣을 수 있음 *style: TextStyle() *color: 색주는 법 1) Colors.칼라명 2) Color(0xffaaaaaa)

*fontsize
*letterSpacing
*fontWeight

-Icon(): 아이콘을 표시하는 위젯 • Color • Size • 머티리얼 디자인용 기본 아이콘들은 Icons 클래스에 상수로 미리 정의됨

-Image(): 이미지를 표시하는 위젯 • pubspec에 경로 지정 assets: -assets/ 후에 Image.asset('assets/파일경로') 수정한 후에는 터미널에서 flutter pub get 명령을 실행하여 프로젝트에서 이미지 파일에 접근할 수 있게 해야 함 • Network() 메서드에 이미지 파일의 URL 입력 시 네트워크에 있는 이미지 표시

-Progress(): 로딩 중이거나 오래 걸리는 작업 시 사용자에게 진행 중임을 보여주는 용도로 사용하는 위젯 • CircularProgressIndicator(): 둥근 형태 • LinearProgressIndicator(): 선 형태

-CircleAvatar(): 프로필 화면 등에 많이 사용되는 원형 위젯 • Child 프로퍼티에 정의한 위젯을 원형으로 만들어줌 • 네트워크상에 존재하는 이미지를 표시한다면 backgroundImage 프로퍼티에 NetworkImage 클래스의 인스턴스를 지정해야 가능

-Container(): 네모박스 넣을 시 사용 • Width: double.infinity -> 가로로 무한히 • height • color(flutter의 사이즈 단위는 LP/50LP=1.2cm) • Margin(바깥쪽여백): EdgeInsets. all(20) / fromLTRB(0,0,0,0) -> 박스에 여백주기 • Padding(안쪽여백): EdgeInsets.all(20)- 네 방향 모두 같은 값을 지정 / only() 함수는 상하좌우 중에서 원하는 방향에만 값을 지정 * 앞에 const를 붙이면 컴파일 타임에 상수로 정의되어 재사용 가능 • Decoration: BoxDecoration() -> 박스에 테두리주기 *나머지 박스 스타일들은 decoration: 안에 넣어야함 Border: Border.all(color: Colors.black)

-SizedBox(): 높이 조절 시 사용 • 위젯 중에는 크기에 관련된 프로퍼티가 없는 위젯이 많은데 그러한 위젯을 특정 크기로 만들 때 사용 • Width, height, child만 필요한 박스 사용 시

-Row(): 여러 위젯 가로로 배치 • Row( children:[리스트형태로 여러 위젯 나열] ) • Row() 의 mainAxis는 가로정렬 -> max(최대크기), min(최소크기) • Row() 의 crossAxis는 세로정렬 -> center, start(왼쪽정렬), end(오른쪽정렬), spaceevenly, spacebetween, spacearound

-Column(): 여러 위젯 세로로 배치 • Column( children:[리스트형태로 여러 위젯 나열] ) • Column() 의 mainAxis는 세로정렬 • Column() 의 crossAxis는 가로정렬 • 기본적으로 표시할 위젯의 크기만큼 가로 길이를 가짐

-Opacity(): 위젯이 공간은 차지하고 있으나 투명해져서 보이지 않게 됨 • Opacity 값이 0이면 완전 투명, 1이면 완전 불투명

-Stack(): children에 나열한 여러 위젯을 순서대로 겹치게 함 • Ex) 사진위에 글자 표현, 화면 위에 로딩 표시 • Children 프로퍼티에 정의한 리스트에 먼저 작성한 위젯이 가장 아래쪽에 위치하고, 나중에 작성한 위젯이 위쪽에 위치함

-Center(): 내 자식 위젯의 기준점을 중앙으로 설정해줌--> 위젯 안에 위젯 넣기 가능 • 위젯 ( child: 위젯() ): 자식 상속 파라미터

-Align(): 박스 위치 정렬(자식 위젯의 정렬 방향을 지정) • Align(alignment: Alignment.위치)

-TextButton(): 평평한 형태의 버튼 • 버튼엔 반드시 child: 와 onPressed/onTapped/onHorizontalDrag 등: 넣어야 잘보임 • Button()는 style: 안에 스타일 넣을 수 있음 *style: ButtonStyle() • 버튼 위젯들은 모두 onPressed 프로퍼티에 버튼이 클릭되었을 때 실행될 함수를 반드시 정의해줘야 버튼이 활성화되며 클릭이 가능1 • Null 지정 시 버튼이 클릭되지 않는 비활성화 상태가 됨

-IconButton(): 아이콘을 표시하는 버튼 • Icon:Icon(Icons.아이콘이름) onPressed: (){}

-ElevatedButton(): 입체감을 가지는 일반적인 버튼

-FloatingActionButton(): 입체감 있는 둥근 버튼(아이콘 표시하는 데 사용)

-Flexible() • 박스 폭을 50%로 설정하려면? -> Flexible()로 감싸야함

-Expanded(): 자식 위젯의 크기를 최대한으로 확장시켜주는 위젯 • Row() 안에서 박스 하나만 꽉 채우고 싶으면 Expanded() 사용 • Flex:1 가진 Flexible 박스랑 동일 • 여러 위젯에 동시에 적용하면 flex 프로퍼티에 정숫값을 지정하여 비율을 정할 수 있으며 기본값은 1

=> 박스폭을 %로 주고 싶으면 Flexible/박스 하나 넓게 채우려면 Expanded

-ListView(): 많은 항목을 세로로 나열할 때 스크롤바 생성 • 스크롤 위치 감시 가능 • 메모리 절약기능 • 리스트 아이템을 쉽게 작성할 수 있는 ListTitle 위젯 사용하면 편리 ListTitle 위젯은 leading, title, trailing 프로퍼티가 각각 왼쪽, 중앙, 오른쪽 위치를 담당해 자유롭게 아이콘이나 글자 배치 가능, onTap 프로퍼티에는 리스트의 항목을 탭했을 때 실행해야 하는 동작을 정의한 함수를 작성 • 다른 스크롤 객체 안에 ListView 위젯을 넣을 땐 shrinkWrap과 physics 프로퍼티를 정의함

-SingleChildScrollView(): 많은 항목을 세로로 나열할 때 스크롤바 생성

-ListBody(): 스크롤 기능 영역이 가로로 꽉 차기 때문에 사용자가 스크롤하기 더 수월

-GridView(): 열 수를 지정하여 그리드 형태로 표시 • GridView.count() 생성자는 간단하게 그리드 작성 • crossAxisCount 프로퍼티에 열 수를 지정

-PageView(): 여러 페이지를 좌우로 슬라이드하여 넘길 수 있도록 해줌 • Tab과 연동하여 사용하지 않으면 좌우로 슬라이드가 가능한지 사용자가 모를 수 있어서 단독으로는 사용X

-AppBar, TabBar, Tab, TabBarView(): PageView()와 유사하지만 페이지와 탭이 연동되는 화면 구성 가능

-Carousel_slider(): 자동 스크롤 지원 기능

-BottomNavigationBar(): 하단에 2~5개의 탭 메뉴를 구성할 수 있는 위젯으로 각 탭을 클릭하여 화면을 전환할 때 사용 • Scaffold의 프로퍼티 중에서 정의 • 탭을 정의하고 Icon과 label 프로퍼티를 정의하여 구현 (BottonNavigationBarItem을 통해)

-Card(): 카드 형태의 모양을 제공하는 위젯 • 기본적으로 크기가 0이므로 자식 위젯의 크기에 따라 크기가 결정 • Shape 프로퍼티는 카드 모양을 변경하는 방법 제공 • Elevation 프로퍼티를 지정하여 그림자의 깊이를 조정

입력용 위젯

-TextField(): 글자를 입력받는 위젯 • InputDecoration 클래스와 함께 사용하면 힌트 메시지나 외곽선 등의 꾸밈 효과를 추가 가능-> labelText 프로퍼티를 활용하여 힌트 표현 • TextEditingController: 입력값 출력하기-> 인스턴스를 통해 TextField 위젯에 작성된 값을 얻을 수 있음 • Form, TextFormField: 폼의 입력값 검증하기

-CheckBox()와 Switch(): 설정 화면에 많이 사용되는 체크박스, 라디오 버튼, 스위치 표현 • 상태를 나타내는 불리언 타입의 변수 필요하고 value 프로퍼티에 설정 • onChanged 이벤트는 체크값이 변할 때마다 발생하는데 여기서 변경된 값이 불리언 value 인수로 넘어오며 setState() 함수를 통해 value 프로퍼티에 지정한 변숫값을 변경하며 UI를 다시 그림 • 상태를 나타내는 변수가 등장하므로 StatefulWidget

-Radio와 RadioListTile(): 선택 그룹 중 하나를 선택할 때 사용하는 위젯 • 그룹이 되는 항목을 열거형(enum)으로 정의하고 groupValue 프로퍼티에 열거형으로 정의한 Gender 타입의 변수를 지정하고 onChanged 이벤트에서 변경된 값을 반영

-DropDownButton(): 여러 아이템 중 하나를 고를 수 있는 콤보박스 형태의 위젯 • Value 프로퍼티에 표시할 값을 지정 • Map() 함수를 사용하여 _valueList 리스트의 문자열 3개를 DropdownMenuItem 인스턴스 3개로 변환-> map() 함수를 사용하여 값 리스트를 위젯 리스트로 변환하는 코드 자주 사용

다이얼로그 위젯

-AlertDialog(): 머티리얼 디자인의 유저 확인용 다이얼로그 • AlertDialog를 표시하려면 showDialog() 함수의 builder 프로퍼티에 AlertDialog 클래스의 인스턴스를 반환하는 함수를 작성하면 됨 • Title, content, actions 영역을 정의

-DatePicker(): 날짜 선택 시 사용 • Future 타입은 then() 메서드를 사용해 결과를 받는 함수 작성 가능 • 날짜가 선택되면 _selectedTime 변수를 갱신하고 setState() 함수를 호출하여 표시

-TimePicker(): 시간 선택 시 사용 • showTimePicker() 함수를 호출하면 타임 피커를 표시 • 날짜가 선택되면 timeOfDay.hour, timeOfDay.minute 에서 시간과 분을 얻을 수 있음

-GestureDetector()와 InkWell(): 글자나 그림 같이 이벤트 프로퍼티가 없는 위젯에 이벤트를 적용하고 싶을 때 사용하는 위젯 • onTap 프로퍼티를 가지고 있어서 child 프로퍼티에 어떠한 위젯이 와도 클릭 이벤트 작성 • InWell은 클릭 시 물결 효과

애니메이션

-Hero(): 화면 전환 시 자연스럽게 연결되는 애니메이션 • 애니메이션 효과의 대상이 되는 양쪽 화면의 위젯을 Hero 위젯으로 감싸고 tag 프로퍼티를 반드시 동일하게 지정

-AnimatedContainer(): 한 화면 내에서 setState() 함수를 호출하여 화면을 새로 그릴 때 변경된 프로퍼티에 의해 애니메이션되도록 해줌 • Duration, curve 등의 애니메이션 관련 프로퍼티 존재

-SliverAppBar()와 SliverFillRemaining(): 화면 헤더를 동적으로 표현하는 위젯(헤더/내용영역) • 헤더를 위로 스크롤하면 헤더 부분이 작아지면서 헤더 하단에 있던 정적인 내용만 보이는 AppBar 형태로 애니메이션됨 <- 이런 효과를 Sliver • Pinned: 축소될 때 상단에 AppBar가 고정될지 사라질지 설정 • expandedHeight: 확대될 때의 최대 높이 지정 • flexibleSpace: 확대/축소되는 영역의 UI 작성

-SliverAppBar와 SliverList(): 동적인 ListView를 사용하여 Sliver 효과를 줄 때 사용

내비게이션

• 파일 하나에 모든 클래스 작성 가능(main.dart 파일)
• 파일을 분리할 경우에는 임포트하여 다른 파일에 있는 클래스 사용 가능
• 화면 전환하려면 Navigator 클래스의 push() 메서드 사용
-Navigator.push(
    Context,
    MaterialPageRoute(builder:(context)=> [이동할 페이지]),
);

-> 새로운 화면이 표시되어도 이전 화면은 메모리에 남게 됨
• Navigator.pop() 메서드로 현재 화면을 종료하고 이전 화면으로 돌아감
• 이전 화면으로 데이터 돌려주기-> Future 값을 반환받으려면 await 키워드를 메서드 실행 앞에 추가하고 async 키워드 추가
*어떤 일이 끝날 때까지 기다리면서 앱이 멈추지 않도록 하는 방식을 비동기 방식

• Routes를 활용한 내비게이션
-routes 프로퍼티에 Map 형태로(키-값 쌍으로) 문자열과 목적지 인스턴스를 작성
-routes:{
    '/first':(context)=>FirstPage(),
    '/second':(context)=>SecondPage(),
    },
);

} } -> / 기호는 페이지 구조를 /first/a/b 와 같은 형식으로 구조화하기 쉬워 사용

-pushNamed() 메서드를 사용하여 화면 내비게이션 실행

• StatefulWidget 클래스에는 build() 메서드 외에도 특정 타이밍에 실행되는 여러 메서드 존재(생명주기 메서드)
-initState(): 위젯이 생성될 때 호출
-dispose(): 위젯이 완전히 종료될 때 호출

커스텀 위젯 문법

• 위젯들 한 단어로 축약하려면
1) Class 작명
2) Return 옆에 축약할 레이아웃 넣기

• 변수, 함수 문법으로도 축약 가능
*변하지 않은 UI들만 변수 함수로 축약해도 상관없음
*var a= SizedBox(
    Child: Text('안녕'),
);

• 아무거나 다 커스텀 위젯화 불가능
재사용 많은 UI들 or 큰 페이지들만 커스텀 위젯화 가능

레이아웃 혼자서도 잘 짜는 방법

1) 예시디자인 준비
2) 네모로 보이는 건 네모 그리기
3) 바깥 네모부터 하나하나 위젯으로
4) 마무리 디자인

구현 순서

1) 뼈대 작성
2) BottonNavigationBar 위젯을 이용한 하단 탭 구성
3) AppBar 위젯 수정
4) 화면이 3개인 UI 작성
5) 상단 부분
6) 중단 부분
7) 하단 부분

• 전체 테마 변경: AppBar를 매번 수정하는 것보다 MaterialApp 클래스의 ThemeData 인스턴스를 수정하는 것이 더 편함
primarySwatch 프로퍼티 대신 primaryColor 프로퍼티를 지정하는 것이 AppBar의 색상이나 글자색을 수정하지 않아도 동일 효과
• Form, TextFormField, Globalkey를 사용하면 입력 폼의 에러를 간단히 검증할 수 있음
• TextFormField 위젯은 TextField 위젯의 기능에 추가로 오류 검증 로직을 추가할 수 있는 위젯
• TextFormField나 TextField 위젯에 입력된 값을 활용하려면 TextEditingController 클래스를 사용
• 복잡한 계산은 별도의 메서드로 분리하는 것이 가독성 및 코드 유지 보수 측면에서 좋음
• Timer 클래스를 사용하면 정해진 시간 간격으로 원하는 동작을 수행시킬 수 있음
• 숫자 형태의 문자열을 특정 자릿수로 만들고 0으로 채우려면 padLeft() 메서드 사용
• 다트에서 정수형 나누기 정수형은 double 타입
• 파이어베이스의 Firestore를 사용하면 쉽게 클라우드 DB를 사용할 수 있음
• Firestore는 실시간으로 데이터를 읽어올 수 있는 스트림을 제공함
• 스트림과 StreamBuilder를 사용하면 자동으로 실시간으로 DB의 내용을 표시할 수 있음
• 안드로이드에서 메서드 개수 제한을 피하려면 minSdkVersion을 21 이상으로 설정해야함

Firebase 활용

• 데이터베이스의 주요 기능은 추가, 읽기, 수정, 삭제, 가져오기
*기본코드준비-> 변수준비-> 전체UI작성-> 할일목록UI작성-> 전체 UI와 할일목록 UI결합-> 기능작성-> 기능과UI연결
• Pubspec.yaml 파일에 cloud_firestore:^1.0.0 입력
• 파이어베이스는 개인적인 서버 없이도 활용할 수 있는 다양한 서버 기능을 제공함
• Firestore는 NoSQL 데이터베이스의 일종으로 자료의 저장 단위는 문서이다.
문서는 컬렉션 안에 저장되며, 문서에는 키-값 형태로 다양한 형태의 자료를 저장가능

카카오 회원가입

• 카카오 SDK for developers 이용