Hwan

실패를 두려워하지 않고 끊임없이 도전하며 본질을 추구합니다.

2 분 소요

TIL- 240129

😘 오늘의 나는 무엇을 잘했나요?

  • layout 짜는 데 애를 먹었는데, 모르는 부분을 해결하고 실습을 통해 체화했어요.

1 2 3
그리고 이를 구현해 컨테이너에 색을 입혀서 테스트!
4

😆 오늘의 일에서 나는 어떤 것을 배웠나요?

  • Flexible 위젯 - 반응형 구현 시 사용

    • 위젯 간에 크기를 비율로써 해당 공간만큼 차지하도록 도와주는 위젯이에요.
    • flex 프로퍼티에 int 값을 할당할 수 있는데, 해당 값만큼 부모가 가지고 있는 최대 크기에서의 flex 값만큼의 비율로 크기를 차지해요.
    • fit 프로퍼티는 flex 값을 얼마나 엄격하게(strictness) 차지할 것인지를 설정하는 건데, loose의 경우 자식 위젯이 필요하는 만큼만 차지하게 되고 tight의 경우 자식 위젯이 필요로 하는 크기에 상관없이 그 비율만큼 무조건 화면을 차지하게 되어요.

    5
    FlexFit.loose: 가게 이름이라는 텍스트 위젯이 필요로 하는 만큼만 공간을 차지해요.
    6

    FlexFit.tight: 가게 이름이라는 텍스트 위젯이 필요로 하는 공간은 무시하고 무조건 flex에 할당한 값만큼 공간을 차지해요.

  • Layout 기본 원리: 자식 위젯은 부모의 제약(constraint) 내에서만 크기를 결정할 수 있어요.
    • 여기서 제약(constraint)이란 최소, 최대 너비와 높이를 뜻해요.
    • 예를 들어, 부모 위젯의 제약이 너비(0~360), 높이(0~50)이라면 자식 위젯은 해당 제약 내에서 크기를 결정하고 부모 위젯에게 알려요.
  • 급한 마음에 우다다다 구현을 했는데, 하기 전에 스스로 레이아웃을 위젯을 이용해 트리를 만든 후에 구현하는 것으로…
  • 그리고 자식은 부모의 제약 조건을 넘는 크기를 가질 수 있는데 이때 overflow 에러가 발생해요 → 자식 위젯을 Expanded 또는 Flexible(flex:1) 위젯으로 감싸준다면 부모의 제약 조건만큼 최대한 크게 크기를 가져가되 부모보다 크지 않게 설정할 수 있어요.
  • 그리고 layout 관련 디버깅할 때는 widget inspector를 적극적으로 활용해요.
    • layout 관련 부분에서 문제가 된 위젯과 부모 위젯의 너비 또는 높이를 비교해보고 flex에 값이 할당되어 있는지도 확인해야 해요.(그래야 부모 위젯보다 크지 않게 되니까)
    • layout 관련에 문제가 안보인다면 detail widget tree를 확인해야 되어요.
      • renderObject를 살펴보면 constraint를 확인할 수 있는데 너비 또는 높이가 정해지지 않은 경우 이를 수정해야 해요.

🤢 오늘의 나는 어떤 문제를 겪었나요?

  • CheckBox의 상태가 변화하지 않는 문제

    7

    • build 메서드와 State 객체에서 변수를 선언해 관리한다는 것이 어떤 차이가 있는지 몰랐어요.
    • 즉, build 메서드 안에 bool 데이터를 담은 변수를 선언한 게 문제였어요.. build 메서드는 호출될 때 ui를 그리는 역할을 하는데 여기에 변수를 선언하면 build 메서드가 호출될 때 변수가 초기화되고 build 메서드가 종료되면 더 이상 변수에 담긴 값이 관리되지 않아요.

    • 하지만 다음과 같이 State 객체의 멤버 변수로 선언하게 되면 State객체가 생성되서 소멸할 때까지 해당 변수를 관리하기 때문에 State 객체의 멤버 변수로 선언해야 해요.

      class _MyWidgetState extends State<MyWidget> {
  int myVariable = 0;

  @override
  Widget build(BuildContext context) {
    return Text('Value: $myVariable');
  }
}

  • StoreCard 레이아웃을 짜는 것을 성공했으나 컴포넌트 크기 설정에 문제가 있었어요.

🤩 앞으로 어떻게 해결할 것인가요?

  • State 객체의 생명 주기에 대해 더 자세히 알아보도록 합니다.
  • 유저 입장에서 어떤 정보가 팀배달에 참여함에 있어 중요한 요인인지 다시 생각해보고 컴포넌트의 크기 비율을 다시 설정해봐야겠어요.

카테고리:

업데이트:

댓글남기기

참고