[Flutter 기초] Container 위젯

기초 위젯 중 하나인 Container 위젯은 Box를 만든다.

 

Container 위젯에서 사용하는 중요 parameter들은 다음과 같다.

• width : 컨테이너의 너비 설정
• height : 컨테이너의 높이 설정
• color : 컨테이너의 배경색을 설정
• alignment : 컨테이너 내 자식의 위치를 제어
• padding : 컨테이너 가장자리와 컨테이너 내부 사이의 안쪽 여백 정의
• margin : 컨테이너의 바깥쪽 여백 정의
• decoration : 테두리, 배경 이미지 또는 기타 꾸미기를 컨테이너에 추가하는데 사용 (자세한 건 검색)

※  만약 width, height, child 정도만 필요하다면 Container 위젯보다 SizedBox 위젯이 효율이 더 좋다. (Container는 무거움)

 

가장 기초가 되는 parameter는 width와 height이다. (box의 너비와 높이를 지정)

※ width와 height가 없어도 container 내용물 크기에 맞춰서 생성되긴 하는데, 의도대로 만들고 싶으면 크기 지정 해주자

※ Container 안에 Text를 넣고 싶으면 child를 추가하고 그 아래 Text 위젯을 추가한다.

body: Container(
  width: 150.0,
  height: 100.0,
  color: Colors.red,
  child: Text('Container'),
)

---

alignment, margin, padding 을 설정해서 다음과 같이 보여줄 수도 있다.

margin과 padding 값을 주는 방법

• EdgeInsets.all( value ) : 모든 방향에 같은 값
• EdgeInsets.fromLTRB( left, top, right, bottom ) : 상하좌우 각 방향에 다른 값

body: Container(

  width: 250.0,
  height: 200.0,
  color: Colors.red,
  alignment: Alignment.centerLeft, // container 내부의 위치 왼쪽 중앙으로
  margin: EdgeInsets.all(10),      // container 외부와 상하좌우 모두 10씩 띄움
  padding: EdgeInsets.fromLTRB(10,20,20,0), // container 내부와 상하좌우 각각 값에 맞춰서 띄움
  child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.green,
      child: Text('Container')),
)