<aside> 💡 요점이 뭐죠?
Flutter 레이아웃 메커니즘의 핵심은 위젯입니다. Flutter에서는 거의 모든 것이 위젯이며, 심지어 레이아웃 모델도 위젯입니다. Flutter 앱에서 볼 수 있는 이미지, 아이콘, 텍스트는 모두 위젯입니다. 하지만 눈에 보이는 위젯을 정렬, 제약 및 정렬하는 행, 열 및 그리드와 같이 눈에 보이지 않는 것들도 위젯입니다.
위젯을 구성하여 레이아웃을 만들면 더 복잡한 위젯을 만들 수 있습니다. 예를 들어 아래 첫 번째 스크린샷은 3개의 아이콘과 각 아이콘 아래에 레이블이 있는 것을 보여줍니다:
두 번째 스크린샷은 시각적 레이아웃을 표시하며, 각 열에 아이콘과 레이블이 포함된 3개의 열로 이루어진 행을 보여줍니다.
<aside> 💡 참고: 이 튜토리얼의 대부분의 스크린샷은 시각적 레이아웃을 볼 수 있도록 debugPaintSizeEnabled가 true로 설정된 상태로 표시됩니다. 자세한 내용은 Using the Flutter inspector의 섹션인 Debugging layout issues visually을 참조하십시오.
</aside>
다음은 이 UI의 위젯 트리 다이어그램입니다:
대부분은 예상대로 보이지만 Container(분홍색으로 표시됨)에 대해 궁금할 수 있습니다. 컨테이너는 하위 위젯을 사용자 정의할 수 있는 위젯 클래스입니다. 패딩, 여백, 테두리 또는 배경색을 추가하거나 일부 기능에 이름을 지정하려는 경우 Container를 사용합니다.
이 예시에서는 각 Text 위젯을 Container에 배치하여 여백을 추가했습니다. 또한 전체 Row을 Container에 배치하여 행 주위에 패딩을 추가합니다.