📍 튜터님과 Widget 공부

✏️ Container

Container란?

Container는 박스 모델(Box Model) 개념 기반으로 만들어진 위젯
내부에 위젯을 담고 크기, 패딩, 마진, 장식 등을 지정할 수 있는 다목적 박스 역할을 함
주로 레이아웃, 스타일링, 배경 장식 용도로 사용

주요 속성

속성	설명	예시
child	Container 안에 담을 위젯	child: Text('Hello')
width	가로 크기	width: 100
height	세로 크기	height: 50
padding	내부 여백	padding: EdgeInsets.all(8)
margin	외부 여백	margin: EdgeInsets.symmetric(horizontal: 16)
color	배경색	color: Colors.blue
decoration	박스 장식(색, 그림자, 테두리, 그라데이션 등)	BoxDecoration(borderRadius: BorderRadius.circular(8))
alignment	child 위치 조정	alignment: Alignment.center
constraints	최소/최대 크기 제한	BoxConstraints(minWidth: 50, maxWidth: 200)
transform	2D 변형(회전, 이동 등)	transform: Matrix4.rotationZ(0.1)

Container 사용 예시

Container(
  width: 150,
  height: 100,
  padding: EdgeInsets.all(12),
  margin: EdgeInsets.symmetric(horizontal: 16),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.blueAccent,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 4,
        offset: Offset(2, 2),
      )
    ],
  ),
  child: Text(
    'Flutter Container',
    style: TextStyle(color: Colors.white),
  ),
)

Container를 사용하지 않으면?

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 16), // margin
  child: SizedBox(
    width: 150,
    height: 100,
    child: DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.blueAccent,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 4,
            offset: Offset(2, 2),
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.all(12), // padding
        child: Center(
          child: Text(
            'Container',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ),
  ),
)

✏️ SelectableText

SelectableText란?

텍스트를 드래그해서 선택 / 복사할 수 있게 해주는 위젯
일반 Text 위젯과의 가장 큰 차이점은
유저 인터랙션(선택, 복사) 가능 여부

SelectionArea란?

하위 위젯 전체를 하나의 “선택 가능한 영역”으로 만들어주는 위젯

---

공부 소감

오늘도 열시미 팀플을 했다.. 히히..