플렉스 위젯 (Row & Column)

Row와 Column은 자식 위젯들을 수평 또는 수직으로 배열하는 플렉스 위젯입니다. 이들은 Flitter에서 레이아웃을 만드는 데 기본이 되는 위젯입니다.

속성

Row와 Column에서 공통으로 사용되는 속성들:

• children: Widget[] - 자식 위젯들의 목록
• mainAxisAlignment: MainAxisAlignment - 주축을 따라 자식들을 배치하는 방법
  • “start” (기본값)
  • “end”
  • “center”
  • “spaceBetween”
  • “spaceAround”
  • “spaceEvenly”
• crossAxisAlignment: CrossAxisAlignment - 교차축을 따라 자식들을 배치하는 방법
  • “start”
  • “end”
  • “center” (기본값)
  • “stretch”
• mainAxisSize: MainAxisSize - 주축에서 차지할 공간의 크기
  • “min”
  • “max” (기본값)
• verticalDirection: VerticalDirection - 자식들이 배치되는 방향
  • “up”
  • “down” (기본값)
• clipped: boolean - 자식들을 컨테이너 경계로 잘라낼지 여부 (기본값: false)

일반적인 사용 사례

1. 기본 Row 레이아웃:

   Row({
     children: [
       Container({
         width: 50,
         height: 50,
         color: "red",
       }),
       Container({
         width: 50,
         height: 50,
         color: "blue",
       }),
     ],
   });
   

2. 중앙 정렬된 Column:

   Column({
     mainAxisAlignment: "center",
     crossAxisAlignment: "center",
     children: [Text({ text: "제목" }), Text({ text: "부제목" })],
   });
   

3. 간격이 있는 아이템들:

   Row({
     mainAxisAlignment: "spaceBetween",
     crossAxisAlignment: "center",
     children: [Text({ text: "왼쪽" }), Text({ text: "오른쪽" })],
   });
   

모범 사례

1. 레이아웃 가이드라인:

   • 적절한 축 정렬 선택하기
   • 교차축 동작 고려하기
   • 일관된 간격 사용하기
   • 오버플로우가 가능한 경우 clipped를 true로 설정하기

2. 성능:

   • 깊이 중첩된 플렉스 위젯 피하기
   • 유연한 크기 조정을 위해 Expanded 사용 고려하기
   • 플렉스 레이아웃의 리빌드 최소화하기

3. 반응형 디자인:

   • 오버플로우를 적절히 처리하기
   • 화면 크기 변화 고려하기
   • 적절한 제약 조건 사용하기

일반적인 패턴

1. 내비게이션 바:

   Row({
     mainAxisAlignment: "spaceBetween",
     crossAxisAlignment: "center",
     children: [
       IconButton({ icon: "menu" }),
       Text({ text: "제목" }),
       IconButton({ icon: "settings" }),
     ],
   });
   

2. 폼 레이아웃:

   Column({
     crossAxisAlignment: "stretch",
     mainAxisSize: "min",
     children: [
       TextField({ label: "사용자 이름" }),
       TextField({ label: "비밀번호" }),
       Button({ text: "제출" }),
     ],
   });
   

3. 카드 콘텐츠:

   Column({
     crossAxisAlignment: "start",
     mainAxisSize: "min",
     children: [
       Image({ src: "image.jpg" }),
       Text({ text: "제목" }),
       Text({ text: "설명" }),
     ],
   });
   

팁과 트릭

1. 레이아웃 디버깅:

   • 임시로 배경색 추가하기
   • 정렬 경계 확인하기
   • 플렉스 동작 모니터링하기
   • 오버플로우 식별을 위해 clipped 속성 사용하기

2. 간격 기법:

   • 간격을 위해 Container 사용하기
   • 간격을 위해 mainAxisAlignment 고려하기
   • 일관된 간격 유지하기

3. 최적화:

   • 가능한 경우 플렉스 위젯 캐싱하기
   • const 생성자 사용하기
   • 레이아웃 제약 조건 고려하기
   • 적절한 mainAxisSize 설정하기