[Flutter] Container Widget 이해하기

Container의 핵심 개념

"Containers with no children try to be as big as possible."

"컨테이너 위젯은 children이 없을 경우, 항상 페이지 내에서 차지할 수 있는 최대의 크기를 차지하려고 한다."

 

"Containers with children size themselves to their children."

"컨테이너 위젯에 children이 있을 경우, 그 children의 크기에 컨테이너의 크기를 맞춘다."

 

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: SafeArea(
        child: Container(
          color: Colors.red,
          width: 100,
          height: 100,
          // widget의 바깥쪽 거리 조정
          margin: EdgeInsets.symmetric(
            vertical: 50,
            horizontal: 10,
          ),
          // widget의 안쪽 거리 조정
          padding: EdgeInsets.all(40),
          // container 는 오직 하나의 child 만을 가짐
          child: Text('Hello'),
        ),
      ),
    );
  }
}

위 코드는 컨테이너 위젯을 나타낸 코드이다. 

SafeArea: 화면 상에서 보이지 않는 영역들을 제외하고 위젯들을 표시해주는 기능.

Container도 width와 height 속성을 가지고 있으며, 

margin과 padding을 활용해서 Container 내의 child의 위치를 설정한다.

Container는 오로지 하나의 child 만을 가질 수 있다는 점을 유의해야 한다.

 

 

 

 

 

 

---

참고

코딩셰프 유튜브 채널: https://youtu.be/RhEzrNTSW7c