LimitedBox class

이 위젯은 child에 대한 제한이 없는 경우에 박스를 제한할 때 사용한다.
대부분 상위 요소에서 정의된 제한에 따라 크기가 정해진다. 하지만 ListView, Column, Row와 같은 경우, 하위요소 크기에 제한을 두지 않는다.

이처럼 상위 요소의 제한이 존재하지 않을 때, 상위 요소 제한에 의존하는 위젯에는 어떻게 기본값을 줄 수 있을까?

이런 경우에 LimitedBox를 사용하면 된다!
LimitedBox를 사용하면 maxHeight와 maxWidth가 제공된다. 이는 child에게 무한한 상황에서 자연스러운 크기를 제공하는 효과가 있다.

경우를 나눠 정리해보면,

만약 위젯의 최대 너비가 제한되지 않았다면 이 위젯의 child의 너비는 maxWidth에 따라 제한된다.

같은 논리로, 만약 위젯의 최대 높이가 제한되지 않았다면 이 위젯의 child의 높이 또한 maxHeight에 제한된다.

IntrinsicWidth class

바로 이전에 IntrinsicHeight class에 대해 다루었다.
height가 있으니 width도 존재한다.

IntrinsicHeight class와 거의 비슷한 내용이다.
위 설명에서 height를 width로 바꿔서 이해하면 된다.


이 위젯은 너비가 제한되지 않고 무한 확장을 시도하는 child를 필요로 할 때 유용하다.

이 위젯이 child에게 전달하는 constraints는 부모의 constraints를 지키기 때문에 만약 constraints가 child의 최대 고유 높이를 포함할 만큼 충분히 크지 않으면 비교적 낮은 높이를 가지게 된다. 반대로, 최소 높이 constraints가 child의 최대 고유 높이보다 크면 비교적 더 많은 높이가 지정된다.

• 부모의 constraints < child의 고유 너비
  낮은 너비를 가지게 된다.
• 부모의 constraints > child의 고유 너비
  높은 너비를 가지게 된다.
  
  

즉, child는 부모의 constraints를 따르는데, 이 때 부모의 constraints와 child의 고유 너비 사이의 관계에 대한 것이다.

이 class 또한 가능한 사용하지 않는 것을 추천한다.

<사용 후>

(사진출처: https://bsscco.github.io/posts/flutter-layout-widgets/)

IntrinsicHeight class

이름을 보자마자 Intrinsic이 무슨 의미지? 하는 질문이 생겼다.

찾아보니 Intrinsic는 고유한, 본질적인 이라는 뜻이다.

뜻 그대로 IntrinsicHeight는 child의 고유 높이에 맞춰 child의 크기를 조정하는 위젯이다.

이 위젯은 높이가 제한되지 않고 무한 확장을 시도하는 child를 필요로 할 때 유용하다.

이 위젯이 child에게 전달하는 constraints는 부모의 constraints를 지키기 때문에 만약 constraints가 child의 최대 고유 높이를 포함할 만큼 충분히 크지 않으면 비교적 낮은 높이를 가지게 된다. 반대로, 최소 높이 constraints가 child의 최대 고유 높이보다 크면 비교적 더 많은 높이가 지정된다.

• 부모의 constraints < child의 고유 높이
  낮은 높이를 가지게 된다.
• 부모의 constraints > child의 고유 높이
  높은 높이를 가지게 된다.
  
  

즉, child는 부모의 constraints를 따르는데, constraints가 존재하지 않는 경우가 있다. 이 때 부모의 constraints와 child의 고유 높이 사이의 관계에 대한 것이다.

가능한 사용하지 않는 것을 추천한다.

<사용 전>

<사용 후>

FractionallySizedBox class

FractionallySizedBox class는 상위 부모의 사이즈 비율에 맞게 만드는 것이다.
즉 디자인의 크기가 상대적이어야 할 때 크기를 상위 부모의 사이즈를 바탕으로 비율로 표현하는 것이다.

example)

• FractionallySizedBox를 사용해서 상위 부모의 사이즈 비율을 지정하여 child의 크기를 정하고 있다.
• 코드에서 0.7은 70%를 나타낸다. 즉 상위 부모 사이즈의 70%만큼 child를 만들겠다는 의미이다.
• widthFactor처럼 heightFactor을 사용하여 높이의 비율도 설정할 수 있다.

이처럼 FractionallySizedBox class는 상위 부모의 사이즈 비율로 크기를 지정할 때 사용한다.

FittedBox Class

child 또는 내용의 양에 따라 크기가 확장되는 위젯에 의해 오버플로우가 발생되는 경우 FittedBox로 감싸면 전체 크기를 넘지 않게 되며 오버플로우가 방지된다.

alignment를 사용하여 원하는 배열로 나타낼 수 있다.

example)

사용 전)

사용 후)

이처럼 부모에서 주어진 크기 내에 child를 생성할 때 오버플로우가 발생하지 않도록 하기 위해 주로 사용한다.

fittedBox는 부모 크기에 맞춰 child 크기를 조정하는 것이다.
BoxFit.cover를 사용하면 부모 크기에 딱 맞게 child 크기를 조정할 수 있다.

참고) https://medium.com/flutter-community/flutter-widgets-boxes-part-2-the-whole-picture-4bb142f0b1ab

CustomSingleChildLayout

childe의 레이아웃을 지정하는 위젯이다.

• delegate은 child 레이아웃의 constraints를 결정할 수 있다. 또한 child를 어디에 둘지, parent의 크기를 결정한다. 하지만 parent는 child의 크기에 의존하지 않는다.
• CustomSingleChildLayout은 delegate를 지정해야 한다.
• 주로 grid를 만들 때 쓰인다.

정리하면, child의 위치, 크기를 결정할 때 사용하는 layout 중 하나이다.

example 1)

const CustomSingleChildLayout({
    Key key,
    @required this.delegate,
    Widget child,
  })

example 2)

Widget single(){
  return CustomSingleChildLayout(delegate: delegate)
}

about using this in a constructor

this.propertyName 은 짧고 간단하게 constructor의 values에 값을 할당할 때 사용한다.

class MyColor {
  int red;
  int green;
  int blue;

  MyColor(this.red, this.green, this.blue);
}

final color = MyColor(80, 80, 128);

제시된 코드에서 this.은 class 변수에 값을 넣겠다는 것을 의미한다.
이러한 방식은 named parameters에서도 사용된다.

using this in named parameters

class MyColor {
  ...

  MyColor({required this.red, required this.green, required this.blue});
}

final color = MyColor(red: 80, green: 80, blue: 80);

위 코드는 MyColor의 parameters에 this를 사용한 예이다.
여기에는 required가 사용되었는데, int values는 null이 될 수 없기 때문이다.

• 만약, 값을 지정하지 않아도 되는 parameter라면 required를 생략해도 된다.

Question

MyColor([this.red = 0, this.green = 0, this.blue = 0]);
// or
MyColor({this.red = 0, this.green = 0, this.blue = 0});

첫 번째 코드는 리스트?
두 번째 코드는 property names가 parameters가 될 수 있음을 보여주는 예.

Code example

class MyClass {
  final int anInt;
  final String aString;
  final double aDouble;
  
  // Create a constructor here.
}

Solution

class MyClass {
  final int anInt;
  final String aString;
  final double aDouble;
  
  MyClass(this.anInt, this.aString, this.aDouble);
}

참고 사이트: https://dart.dev/codelabs/dart-cheatsheet#initializer-lists

Exceptions

의미: exceptions는 예상치 못한 일이 발생했음을 나타내는 오류이다.
기능: dart code는 exceptions를 throw 하고 catch할 수 있다.
특징: dart는 exception과 error types를 제공하지만, null이 아닌 객체만 throw 할 수 있다.

exceptions를 다루기 위해 알아야 하는 용어

throw

exception발생 시 객체 또는 코드 등을 반환할 수 있다.
//일단 에러를 던져본다고 생각

throw 사용 코드 예)

//example 1
throw FormatException('Expected at least 1 section');
//example 2
throw 'Out of llamas!';

example 1 사용을 권장한다.

• 에러 타입을 나타내는 implemeter 사용하는 것 권장.
  why?
  implemeter에 다양한 exception과 error의 종류가 있기 때문.

catch

catch는 다양한 exception상황을 제시해서 특정 상황의 에러 상황을 제어한다.
-> 예외를 다시 발생시키지 않는 한 예외가 전파되지 않는다.
//exception을 catch 한다고 이해함

catch문을 여러 개 쓰면 다양한 종류의 에러 상황 제어 가능하다.
오류 상황 앞에 on을 쓰거나, catch를 사용한다.

<예시코드1>

try {
  breedMoreLlamas();
} on OutOfLlamasException {
  buyMoreLlamas();
}
//OutofLiamasException이라는 오류가 생기면 buyMoreLlamas()실행.

<예시코드2>

try {
  breedMoreLlamas();
} on OutOfLlamasException {
  // 지정해둔 특정 오류 상황(OutOfLlamas라는 오류 상황) 처리
  buyMoreLlamas();
} on Exception catch (e) {
  // exception 타입으로 지정한 오류 처리 
  // (위에 선언한 OutOfLlamasException는 제외)
  print('Unknown exception: $e');
} catch (e) {
  // 타입이 특정하게 지정되지 않은 나머지 오류 처리
  print('Something really unknown: $e');
}
//한 경우씩 위에서부터 걸러서 내려온다고 생각

rethrow

rethrow는 오류를 재전파한다. 함수의 오류를 볼 수 있게 하기 위해서 재전파 하는 것이다.
예외를 완전히 처리할 수 없는 경우 사용한다.

<예시코드>

void misbehave() {
  try {
    dynamic foo = true;
    print(foo++); // 만약 여기서 런타임 오류가 났다면
  } catch (e) { // 여기서 오류를 catch하고,
    print('misbehave() partially handled ${e.runtimeType}.');
    rethrow; // call한 함수(해당 예시에서는 main함수)가 이 오류 볼 수 있도록 재전파
  }
}

void main() {
  try {
    misbehave(); // rethrow로 위에서 찾은 에러가 재전파되어 발생.
  } catch (e) { // 에러를 catch
    print('main() finished handling ${e.runtimeType}.');
  }
}

finally

finally는 예외 발생의 여부와 관계 없이 일부 코드가 실행되게 할 때 사용한다.

finally는 크게 두 가지 상황으로 나뉜다.

1. catch가 있는 경우

에러 상황에 알맞는 catch문이 있으면, catch문을 먼저 실행하고 finally 실행
실행 순서: catch문 -> finally

<예시코드>

try {
  breedMoreLlamas();
} catch (e) {
  print('Error: $e'); // 에러를 먼저 제어한다.
} finally {
  cleanLlamaStalls(); // 그 다음, 함수를 실행한다.
}

2. catch가 없는 경우

에러 상황에 알맞는 catch문이 없으면 exception이 있어도 finally를 실행한다.
실행 순서: finally -> exception

<예시코드>

try {
  breedMoreLlamas();
} finally {
    // 에러가 발생하더라도 아래 호출된 함수 실행
  cleanLlamaStalls();
  //catch문이 없으므로 에러가 재전파 된다.
}

exception code example

typedef VoidFunction = void Function();

class ExceptionWithMessage {
  final String message;
  const ExceptionWithMessage(this.message);
}

// Call logException to log an exception, and doneLogging when finished.
abstract class Logger {
  void logException(Type t, [String? msg]);
  void doneLogging();
}

void tryFunction(VoidFunction untrustworthy, Logger logger) {
  // Invoking this method might cause an exception. Catch and handle
  // them using try-on-catch-finally.
  untrustworthy();
}

solution code

typedef VoidFunction = void Function();

class ExceptionWithMessage {
  final String message;
  const ExceptionWithMessage(this.message);
}
// Call logException to log an exception, and doneLogging when finished.
abstract class Logger {
  void logException(Type t, [String? msg]);
  void doneLogging();
}

void tryFunction(VoidFunction untrustworthy, Logger logger) {
// Invoking this method might cause an exception. Catch and handle
    // them using try-on-catch-finally.
  try {
    untrustworthy();
  } on ExceptionWithMessage catch (e) {
    logger.logException(e.runtimeType, e.message);
  } on Exception {
    logger.logException(Exception);
  } finally {
    logger.doneLogging();
  }
}

참고 사이트1: https://m.blog.naver.com/mingdyuo/221803704762
참고 사이트2: https://dart.dev/codelabs/dart-cheatsheet#initializer-lists

git checkout을 하려고 했으나 이런 에러가 떠서 아무것도 하지 못하는 상황이 되었다. 

현재 vscode를 사용 중인데, 폴더 옆에 ! 이런 표시가 생겼다. 아무리 에러를 찾아보아도 에러는 보이지 않고, 빌드가 되지 않았다.

그래서 일단 git status 명령어를 사용하여 어디에서 어떤 에러가 발생했는지 확인해 보았다.

$git status

그 결과 이런 결과를 얻을 수 있었다.

아무래도 수정한 것을 제대로 저장 또는 push 하지 않은 상태에서 merge를 해서 발생한 문제인 것 같다.

이렇게 git status를 통해 에러가 난 부분을 확인할 수 있었다.

그래서 에러에 나온대로 각 파일을 하나씩 git add하여 수정된 것을 저장하였다.

잘 보일지 모르겠으나, 기존에 home.dart 파일이 문제가 있었는데, add를 하고 git status를 실행한 결과 해당 파일이 사라진 것을 확인할 수 있다.

git add {commit이 필요한 파일 경로}

(ex. $git add lib/screen/home.dart)

이렇게 git status를 통해 add가 필요한 파일을 찾고 git add를 해주었다.

문제가 되는 파일을 모두 해결하고 난 뒤 git checkout을 했더니 드디어 됐다.

git error가 발생한 경우에는 먼저 git status를 통해 꼭 먼저 확인해보는 습관을 가져야겠다.