Container 위젯

Container 위젯은 일반적인 그리기, 위치 지정, 크기 조정 위젯을 결합한 편리한 위젯입니다. 자식에 패딩, 마진, 테두리, 배경색 또는 장식을 추가하는 데 사용할 수 있습니다.

속성

• width: number | string - 컨테이너의 너비
• height: number | string - 컨테이너의 높이
• color: string - 배경색 (기본값: “transparent”)
• padding: EdgeInsets - 내부 여백 (기본값: EdgeInsets.all(0))

  EdgeInsets.all(10)
  EdgeInsets.symmetric({ horizontal: 16, vertical: 8 })
  EdgeInsets.only({ left: 8, top: 16, right: 8, bottom: 16 })
  

• margin: EdgeInsets - 외부 여백 (기본값: EdgeInsets.all(0))
• alignment: Alignment - 자식 위젯을 정렬하는 방법

  Alignment.center
  Alignment.topLeft
  Alignment.bottomRight
  

• decoration: BoxDecoration - 고급 스타일링

  new BoxDecoration({
    color: "white",
    borderRadius: BorderRadius.all(Radius.circular(8))
  })
  

• child: Widget - 포함할 위젯
• clipped: boolean - 자식을 컨테이너의 경계로 잘라낼지 여부
• transform: Matrix4 - 컨테이너에 적용할 변환

일반적인 사용 사례

1. 기본 Container:

   Container({
     width: 100,
     height: 100,
     color: "lightblue"
   })
   

2. 텍스트가 있는 Container:

   Container({
     color: "lightblue",
     child: Text("안녕하세요", {
       style: new TextStyle({ fontSize: 30 })
     })
   })
   

3. 패딩이 있는 Container:

   Container({
     color: "lightblue",
     padding: EdgeInsets.all(10),
     child: Container({
       color: "green",
       child: Text("패딩이 있는 콘텐츠")
     })
   })
   

모범 사례

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

   • 필요한 경우에만 width/height 사용
   • 여백에는 EdgeInsets 선호
   • 자식 위치 지정에는 alignment 사용
   • 오버플로우 제어에는 clipped 고려

2. 스타일링 가이드라인:

   • 단순한 배경에는 color 사용
   • 복잡한 스타일링에는 BoxDecoration 사용
   • 장식을 일관되게 유지
   • 재사용 가능한 스타일 고려

3. 성능 팁:

   • EdgeInsets 객체 캐싱
   • const 생성자 사용
   • 불필요한 중첩 피하기
   • 레이아웃 제약 조건 고려

일반적인 패턴

1. 둥근 모서리 Container:

   Container({
     width: 300,
     height: 300,
     clipped: true,
     decoration: new BoxDecoration({
       borderRadius: BorderRadius.all(Radius.circular(20)),
       color: "lightblue"
     })
   })
   

2. 가운데 정렬된 콘텐츠:

   Container({
     color: "lightblue",
     padding: EdgeInsets.all(10),
     alignment: Alignment.center,
     child: Text("가운데")
   })
   

3. 변환된 Container:

   Container({
     width: 300,
     height: 300,
     color: "lightblue",
     transform: Matrix4.translationValues(10, 10, 0)
   })
   

팁과 요령

1. 여백 팁:

   • 동일한 여백에는 EdgeInsets.symmetric 사용
   • 외부 여백에는 margin 고려
   • 내부 여백에는 padding 사용

2. 장식 팁:

   • borderRadius와 함께 clipped 사용
   • 장식을 단순하게 유지
   • 재사용 가능한 스타일 고려

3. 레이아웃 팁:

   • 위치 지정에는 alignment 사용
   • 효과에는 transform 고려
   • 중첩을 최소화