🌱SeSac Flutter 강의_7/22 : flutter Layout, Stack Widget 등

Flutter Layout

1. Container Widget 이해

• Container Widget: 화면 구성에서 사용되는 가장 기초적인 위젯
  • Margin : Widget의 바깥 여백
  • Padding : Widget의 안쪽 여백
    
• SafeArea Widget : 상태바, 노치(Notch), 홈 인디케이터를 피해 안전한 영역에 화면을 배치
• Fixed Size : width, height를 이용해 Widget의 크기를 고정
  • 부모 Widget의 제약(Constraints)을 받음
• EdgeInsets Constructor : 여백(Padding, Margin)을 생성하는 클래스
  • EdgeInsets.all()
  • EdgeInsets.symmetric()
  • EdgeInsets.only()
  • EdgeInsets.fromLTRB()

padding: EdgeInsets.all(20),
padding: EdgeInsets.symmetric(vertical: 50,horizontal: 30),
padding: EdgeInsets.fromLTRB(30, 10, 50, 20), 
padding: EdgeInsets.only(left: 70),

2. Column, Row Widget 이해

• Column Widget : 자식 Widget을 세로 방향으로 배치
• Column mainAxisAlignment : 세로 방향 정렬
  • 주요 속성-start, center, end, spaceBetween, spaceAround, spaceEvenly
• Column spacing : Widget 사이의 간격 조절
  • spacing 속성 또는 SizedBox 활용
• Column crossAxisAlignment : 가로 방향 정렬
  • 주요 속성-start, center, end, stretch
• Row Widget : 자식 Widget을 가로 방향으로 배치
• Row mainAxisAlignment : 가로 방향 정렬
  • 주요 속성-start, center, end, spaceBetween, spaceAround, spaceEvenly
• Row spacing : Widget 사이의 간격 조절
  • spacing 속성 또는 SizedBox(width:) 활용
• Row crossAxisAlignment : 세로 방향 정렬
  • 주요 속성-start, center, end, stretch

• Wrap Widget : 공간이 부족하면 자동으로 다음 줄에 배치
  • 태그, 버튼 목록 등 여러 Widget을 배치할 때 사용
  • 주요 속성 -spacing, runSpacing, alignment

Scaffold(
    body: SafeArea(
        child: Center(
            child: Wrap(
                spacing: 16, // 아이템 간 가로 간격
                runSpacing: 32, // 줄 바뀜 후 세로 간격
                children: [
                    Container(width: 80, height: 80, color: Colors.red),
                    Container(width: 80, height: 80, color: Colors.green),
                    Container(width: 80, height: 80, color: Colors.blue),
                    Container(width: 80, height: 80, color: Colors.orange),
                    Container(width: 80, height: 80, color: Colors.purple),
                    Container(width: 80, height: 80, color: Colors.brown),
                    Container(width: 80, height: 80, color: Colors.deepOrange,),
                ],
            ),
        ),
    ),
);

3. Stack Widget 이해

• Stack Widget : 여러 Widget을 겹쳐서 배치하는 레이아웃
  • 마지막에 배치한 Widget이 가장 위에 표시

• Positioned Widget : Stack 의 자식으로만 사용할 수 있으며, 자식 위젯을 부모 Stack 내에서 절대 위치로 배치할 때 사용하는 위젯
  • Stack 내부에서만 사용 가능
  • Widget의 위치를 직접 지정
  • 주요 속성-top, bottom, left, right